Switch eBook PDF generation from WeasyPrint to Prince

src/README.md

@@ -58,13 +58,7 @@ npm install
 npm run generate
 ```
 
-3. For generating PDFs of the ebook, WeasyPrint will need some additional libraries:
-
-```
-brew install cairo
-brew install pango
-brew install gdk-pixbuf
-```
+3. For generating PDFs of the ebook, you need to install Prince. Follow the instructions on [the Prince Website](https://www.princexml.com/).
 
 4. To actually generate the ebooks, start your local server, then run the following:
 

src/content/en/2019/mobile-web.md

@@ -58,8 +58,12 @@ The state of JavaScript on the mobile web is terrifying. According to HTTP Archi
 Why is this a problem? Because sites loading this much JS take upwards of [10 seconds](https://httparchive.org/reports/loading-speed?start=earliest&end=2019_07_01&view=list#ttci) to become consistently interactive. Or in other words, your page may appear fully loaded, but when a user clicks any of your buttons or menus, the user may experience some slowdown because the JavaScript hasn't finished executing. In the worst case scenario, users may be forced to keep clicking the button for upwards of 10 seconds, just waiting for that magical moment where something actually happens. Think about how confusing and frustrating that can be.
 
 <figure>
-  <iframe class="fig-mobile fig-desktop" width="560" height="315" src="https://www.youtube.com/embed/Lx1cYJAVnzA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-  <figcaption>Figure 2. Example of how painful of an experience waiting for JS to load can be.</figcaption>
+  <iframe class="fig-mobile fig-desktop video-embed" width="560" height="315" src="https://www.youtube.com/embed/Lx1cYJAVnzA" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+  <a class="video-fallback-image" href="/static/images/2019/mobile-web/fig2.png">
+    <img src="/static/images/2019/mobile-web/fig2.png" alt="Figure 2. Example of how painful of an experience waiting for JS to load can be." aria-labelledby="fig2-caption" aria-described="fig2-description" width="600" height="343">
+  </a>
+  <div id="fig2-description" class="visually-hidden">Video showing two web pages loading and each page has a figure tapping repeatedly on a button throughout the video, to no effect. There is a clock ticking up from 0 seconds at the top, and an initial happy emoji face for each website, that starts to turn less happy as clock passes 6 seconds, wide-eyed at 8 seconds, angry at 10 seconds, really angry at 13 seconds and crying at 19 seconds shortly after which the video ends.</div>
+  <figcaption id="fig2-caption">Figure 2. Example of how painful of an experience waiting for JS to load can be.</figcaption>
 </figure>
 
 Let's delve deeper and look at another metric that focuses more on *how well* each page utilizes JavaScript. For example, does it really need as much JavaScript as it's loading? We call this metric the *JavaScript Bloat Score*, based on the [web bloat score](https://www.webbloatscore.com/). The idea behind it is this:

src/content/ja/2019/caching.md

@@ -595,9 +595,9 @@ Varyヘッダーは、1つ以上の要求ヘッダー値の値をキャッシュ
     <thead>
       <tr>
         <td scope="col"></td>
-        <th>Service Workerを使用しない</th>
-        <th>Service Workerを使用する</th>
-        <th>合計</th>
+        <th scope="col">Service Workerを使用しない</th>
+        <th scope="col">Service Workerを使用する</th>
+        <th scope="col">合計</th>
       </tr>
     </thead>
     <tbody>

src/content/ja/2019/mobile-web.md

@@ -59,7 +59,11 @@ last_updated: 2020-05-14T00:00:00.000Z
 
 <figure>
   <iframe class="fig-mobile fig-desktop" width="560" height="315" src="https://www.youtube.com/embed/Lx1cYJAVnzA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-  <figcaption>図2. JS がロードされるのを待つのがいかに苦痛であるかの例。</figcaption>
+  <a class="video-fallback-image" href="/static/images/2019/mobile-web/fig2.png">
+    <img src="/static/images/2019/mobile-web/fig2.png" alt="図2. JS がロードされるのを待つのがいかに苦痛であるかの例。" aria-labelledby="fig2-caption" aria-described="fig2-description" width="600" height="343">
+  </a>
+  <div id="fig2-description" class="visually-hidden">Video showing two web pages loading and each page has a figure tapping repeatedly on a button throughout the video, to no effect. There is a clock ticking up from 0 seconds at the top, and an initial happy emoji face for each website, that starts to turn less happy as clock passes 6 seconds, wide-eyed at 8 seconds, angry at 10 seconds, really angry at 13 seconds and crying at 19 seconds shortly after which the video ends.</div>
+  <figcaption fig2-caption>図2. JS がロードされるのを待つのがいかに苦痛であるかの例。</figcaption>
 </figure>
 
 さらに深く掘り下げて、各ページがJavaScriptをどの程度利用しているかに焦点を当てた別の指標を見てみましょう。例えば、読み込み中のページは本当に多くのJavaScriptを必要としているのでしょうか？　私たちはこの指標を[Web bloat score](https://www.webbloatscore.com/)に基づいた*JavaScript Bloat Score*と呼んでいます。その背後にある考え方は次のようなものです。

src/package.json

@@ -15,8 +15,8 @@
   "homepage": "https://github.com/HTTPArchive/almanac.httparchive.org#readme",
   "scripts": {
     "generate": "node ./tools/generate",
-    "ebook_2019_en": "weasyprint http://127.0.0.1:8080/en/2019/ebook static/pdfs/web_almanac_2019_en.pdf",
-    "ebook_2019_ja": "weasyprint http://127.0.0.1:8080/ja/2019/ebook static/pdfs/web_almanac_2019_ja.pdf",
+    "ebook_2019_en": "prince http://127.0.0.1:8080/en/2019/ebook -o static/pdfs/web_almanac_2019_en.pdf --pdf-profile='PDF/UA-1'",
+    "ebook_2019_ja": "prince http://127.0.0.1:8080/ja/2019/ebook -o static/pdfs/web_almanac_2019_ja.pdf --pdf-profile='PDF/UA-1'",
     "deploy": "echo \"Y\" | gcloud app deploy --project webalmanac --stop-previous-version"
   },
   "devDependencies": {

src/static/css/ebook.css

@@ -1,3 +1,31 @@
+#title .title {
+  color: white;
+  background-color: #5C687D;
+}
+
+.intro-year {
+  margin: 0;
+  width: auto;
+  color: #F7F779;
+  font-size: 10rem;
+  line-height: 100%;
+  font-weight: bold;
+}
+
+#title h1.title::before {
+  border-bottom: none;
+}
+
+#title h1.title {
+  font-size: 5rem;
+  font-weight: 700;
+}
+
+#title h2.title {
+  font-size: 2rem;
+  font-weight: 300;
+}
+
 #title img {
   margin: 0 auto;
 }
@@ -15,12 +43,6 @@
   margin: 0;
 }
 
-.table-wrap {
-  display: block;
-  max-width: 100%;
-  text-align: center;
-}
-
 th, td {
   padding: 5px;
 }
@@ -43,10 +65,10 @@ tbody tr:nth-child(even) {
 }
 
 .intro-image {
-  background-color: grey;
   border-radius: 10px;
   display: block;
   margin: 20px 0;
+  background-color: #5C687D;
 }
 
 .team {
@@ -121,37 +143,45 @@ ul li.contributor::before {
   color: #333;
 }
 
-/* Join the team card */
-.contributor-join {
-  display: none;
-}
-
 .social-icon {
   height: 20px;
   width: 20px;
 }
 
+@prince-pdf {
+  prince-pdf-display-doc-title: true;
+}
+
+
+@page:first {
+  background-color: #5C687D;
+}
+
 @page {
   margin: 2.5cm;
   padding: 0;
   font-family: 'Lato', sans-serif;
   font-size: 10pt;
+  size: A4;
 
   @bottom-left {
     width: 100%;
     margin: 10pt 0 30pt 0;
     border-top: .25pt solid #666;
     color: #333;
+    font-family: 'Poppins', sans-serif;
   }
 
   @bottom-right { 
     width: 100px;
     margin: 10pt 0 30pt 0;
     border-top: .25pt solid #666;
+    font-family: 'Poppins', sans-serif;
     content: counter(page);
   }
 
   @top-right {
+    font-family: 'Poppins', sans-serif;
     content: string(chapter_subtitle) string(chapter_title);
     margin: 30pt 0 10pt 0;
     color: #333;
@@ -196,30 +226,44 @@ ul li.contributor::before {
   }  
 
   #toc a {
-    display: table;
+    display: inline-block;
     min-width: 500px;
   }
 
   #toc a::after {
+    display: inline-block;
     float: right;
     content: target-counter(attr(href), page);
   }
 
-  section.chapter h1.title {
+  section h1 {
     string-set: chapter_title content();
   }
 
+  section div.subtitle {
+    string-set: chapter_subtitle "";
+  }
+
   section.chapter div.subtitle {
     string-set: chapter_subtitle content() " - ";
   }
 
+  .content ul li::before {
+    content: none;
+  }
+
+  .content ul li {
+    list-style: disc;
+  }
+
   figure,
   figure a,
   figure div,
   figure img,
   figcaption {
     max-width: 100%;
     text-align: center;
+    page-break-inside: avoid;
   }
 
   figure .anchor-link {
@@ -234,11 +278,24 @@ ul li.contributor::before {
     width: 1000px;
   }
 
+  figure iframe.video-embed {
+    display: none;
+  }
+
+  figure .video-fallback-image {
+    display: block;
+  }
+
   table {
     display: table;
     border-spacing: 2px;
     border-color: grey;
   }
+
+  .authors li {
+    page-break-inside: avoid;
+  }
+
 }
 
 

src/static/css/page.css

@@ -387,6 +387,14 @@ figure .fig-desktop {
   display: block;
 }
 
+.video-embed {
+  display: block;
+}
+
+.video-fallback-image {
+  display: none;
+}
+
 .bio {
   margin-top: 10px;
 }

src/templates/ar/2019/base.html

@@ -114,7 +114,8 @@ <h1>{{ self.foreword_title() }}</h1>
 
 {% block appendix %}Appendices{% endblock %}
 
-{% block ebook_download %}Download the entire {{ year }} Web Almanac in PDF format{% endblock %}
+{% block ebook_download %}Download the entire {{ year }} Web Almanac in PDF format (generated with <a href="https://www.princexml.com/">www.princexml.com</a>){% endblock %}
+{% block ebook_download_note %}(generated with <a href="https://www.princexml.com/">www.princexml.com</a>){% endblock %}
 
 {% 
   set localizedPartTitles = {

src/templates/base/2019/base_chapter.html

@@ -110,7 +110,7 @@
 
 {% macro render_authors() %}
   {% for author in metadata.get('authors') %}
-  {% if loop.index == 1 %}
+    {% if loop.index == 1 %}
     <h2 id="authors">
       <a href="#authors" class="anchor-link">
       {% if loop.length == 1 %}{{ self.author() }}{% endif -%}
@@ -120,7 +120,7 @@ <h2 id="authors">
     <ul>
     {% endif %}
       {% set authordata = config.contributors[author] if author in config.contributors else None %}
-    {% if authordata %}
+      {% if authordata %}
       <li>
           <div aria-hidden="true">
             <a href="{{ url_for('contributors', year=year, lang=lang, _anchor=author) }}" tabindex="-1">
@@ -132,25 +132,25 @@ <h2 id="authors">
               {% if authordata.twitter or authordata.github %}
                   <span class="social">
                   {% if authordata.twitter %}
-                  <a class="twitter" href="https://twitter.com/{{ authordata.twitter }}" aria-labelledby="author_{{ author }}_twitter">
+                  <a class="twitter" href="https://twitter.com/{{ authordata.twitter }}" aria-labelledby="author-{{ author }}-twitter">
                     <svg width="18" height="18" role="img">
-                      <title id="author_{{ author }}_twitter">{{ onTwitter(authordata.twitter) }}</title>
+                      <title id="author-{{ author }}-twitter">{{ onTwitter(authordata.twitter) }}</title>
                       <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter"></use>
                     </svg>
                   </a>
                   {% endif %}
                   {% if authordata.github %}
-                  <a class="github" href="https://github.com/{{ authordata.github }}" aria-labelledby="author_{{ author }}_github">
+                  <a class="github" href="https://github.com/{{ authordata.github }}" aria-labelledby="author-{{ author }}-github">
                     <svg width="18" height="18" role="img">
-                      <title id="author_{{ author }}_github">{{ onGitHub(authordata.github) }}</title>
+                      <title id="author-{{ author }}-github">{{ onGitHub(authordata.github) }}</title>
                       <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github"></use>
                     </svg>
                   </a>
                   {% endif %}
                   {% if authordata.website %}
-                  <a class="website" href="{{ authordata.website }}" aria-labelledby="author_{{ author }}_website">
+                  <a class="website" href="{{ authordata.website }}" aria-labelledby="author-{{ author }}-website">
                     <svg width="18" height="18" role="img">
-                      <title id="author_{{ author }}_website">{{ website(authordata.name) }}</title>
+                      <title id="author-{{ author }}-website">{{ website(authordata.name) }}</title>
                       <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#globe"></use>
                     </svg>
                   </a>