Fix accessibly ebooks

Author: tunetheweb

src/server/helpers.py

@@ -277,6 +277,9 @@ def get_ebook_methodology(lang, year):
     )
     # Remove lazy-loading attributes
     methodology_maincontent = re.sub(' loading="lazy"', "", methodology_maincontent)
+    # Remove lazy-loading attributes
+    methodology_maincontent = re.sub('<div class="table-wrap">', "<div>", methodology_maincontent)
+    methodology_maincontent = re.sub('<div class="table-wrap-container">', "<div>", methodology_maincontent)
     return methodology_maincontent
 
 

src/static/css/ebook.css

@@ -69,10 +69,21 @@
   margin: 0;
 }
 
+table {
+  border-radius: 16px;
+  border-radius: 1rem;
+  box-shadow: 0 0 16px 0 rgb(78, 85, 100, 0.2);
+  box-shadow: 0 0 1rem 0 rgb(78, 85, 100, 0.2);
+}
+
 .table-wrap {
   padding: 0;
 }
 
+table caption {
+  caption-side: bottom;
+}
+
 .large-table td {
   padding: 0.2rem;
   line-height: 1.5em;
@@ -360,9 +371,9 @@ section.chapter {
   /** We have some big tables that can't be force to break
     * So we cheat and make them small enough to fit on a page
     */
-  figure table td,
-  figure table td li,
-  figure table td p {
+  div table td,
+  div table td li,
+  div table td p {
     font-size: 12px;
     font-size: 0.85rem;
   }
@@ -412,6 +423,8 @@ section.chapter {
   figure a,
   figure div,
   figure img,
+  div.table,
+  p.table-caption,
   figcaption {
     max-width: 100%;
     text-align: center;
@@ -426,7 +439,8 @@ section.chapter {
     text-decoration: none;
   }
 
-  figcaption {
+  figcaption,
+  p.table-caption {
     width: 1000px;
   }
 

src/static/css/page.css

@@ -505,7 +505,8 @@ figure .anchor-link {
   background-color: #e5e5e5;
 }
 
-figure {
+figure,
+div.table {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -551,7 +552,8 @@ figure .code-block {
   margin: 0.625rem auto;
 }
 
-figcaption {
+figcaption,
+p.table-caption {
   margin: 8px auto 0;
   margin: 0.5rem auto 0;
   text-align: center;

src/tools/generate/generate_ebooks.js

@@ -14,6 +14,9 @@ const update_links = (chapter, chapter_config) => {
   body = body.replace(/figure_link\(/g,'figure_link(ebook=true,');
   // Remove figure_drodowns as not needed
   body = body.replace(/{{\s*figure_dropdown.*?}}/gsm,'');
+  // For PDFs tables cannot be in figures
+  body = body.replace(/<figure (id="[^"]*?")><div class="table-wrap"><div class="table-wrap-container"><table>/gs,'<table $1>');
+  body = body.replace(/(<\/table><\/div><\/div>\n *)<figcaption>(.*?)<\/figcaption>(\n *)<\/figure>/gs,'</table><p class="table-caption">$2</p>');
   // Replace current chapter header ids to full id (e.g. <h2 id="introduction"> -> <h2 id="javascript-introduction">)
   body = body.replace(/<h([0-6]) id="/g,'<h$1 id="' + chapter.metadata.chapter + '-');
   // Replace other chapter references with hash to anchor link (e.g. ./javascript#fig-1 -> #javascript-fig-1)