asciidoctor-epub3 1.5.0.alpha.5 → 1.5.0.alpha.6

data/data/samples/sample-book.adoc

@@ -18,4 +18,4 @@ include::sample-content.adoc[]
 
 include::asciidoctor-js-introduction.adoc[]
 
-include::asciidoctor-js-extension.adoc[]
+include::asciidoctor-js-browser-extension.adoc[]

data/data/samples/sample-content.adoc

@@ -7,7 +7,7 @@ Sarah White <https://github.com/graphitefriction[@graphitefriction]>
 :language: asciidoc
 
 [abstract]
-This sample guide describes the some Asciidoctor attributes, values, and layout options available for producing a customized and polished document.
+This sample guide describes several Asciidoctor attributes, values, and layout options available for producing a customized and polished document.
 
 == Block titles
 
@@ -16,7 +16,7 @@ In most cases, the title is displayed immediately above the content.
 If the content is a figure or image, the title is displayed below the content.
 
 A block title is defined on a line above the element.
-The line must begin with a dot (+.+) and be followed immediately by the title text with no spaces inbetween.
+The line must begin with a dot (`.`) and be followed immediately by the title text with no spaces inbetween.
 
 Here's an example of a list with a title:
 
@@ -107,7 +107,7 @@ Warning:: Used to inform the reader of potential risks.
 Caution:: Also used to inform the reader of potential risks, take your pick.
 
 When you want to call attention to a single paragraph, start the first line of the paragraph with the label you want to use.
-The label must be uppercase and followed by a colon (+:+).
+The label must be uppercase and followed by a colon (`:`).
 
 WARNING: Wolpertingers are known to nest in server racks.
 Enter at your own risk.
@@ -131,9 +131,9 @@ While werewolves are hardy community members, keep in mind the following dietary
 
 Quotes, prose excerpts and verses share the same syntax structure, including:
 
-* style attribute, either +quote+ or +verse+ 
+* style attribute, either `quote` or `verse`
 * name of who the content is attributed to
-* biblographical information of the book, speech, play, etc., where the content was drawn from
+* bibliographical information of the book, speech, play, etc., where the content was drawn from
 * excerpt text
 
 .Anatomy of a basic quote

data/data/styles/epub3-css3-only.css

@@ -28,14 +28,26 @@ only screen and (max-device-width: 1280px) and (max-device-height: 768px) {
 
   /*body.namo-epub-library > section.chapter {
     margin: 0 5pt;
-  }  */
+  }*/
+}
+
+body h1, body h2, body h3:not(.list-heading), body h4, body h5, body h6,
+h1 :not(code), h2 :not(code), h3:not(.list-heading) :not(code), h4 :not(code), h5 :not(code), h6 :not(code) {
+  /* !important required to override custom font setting in Kindle / Gitden / Namo */
+  /* Gitden requires the extra weight of a parent selector; it also makes headings bold when custom font is specified */
+  /* Kindle and Gitden require the override on heading child elements */
+  font-family: "M+ 1p", sans-serif !important;
 }
 
-body.gitden-reader a:link {
-  color: #333332 !important;
+/* QUESTION what about nested elements inside code? */
+body code, body kbd, body pre, pre :not(code) {
+  /* !important required to override custom font setting in Kindle / Gitden / Namo */
+  /* Gitden requires the extra weight of a parent selector */
+  /* Kindle and Gitden require the override on pre child elements */
+  font-family: "M+ 1mn", monospace !important;
 }
 
-@media amzn-kf8, amzn-mobi {
+@media amzn-kf8 {
   /* Kindle does its own margin management, so don't use an explicit margin */
   /*body {
     margin: 0 !important;
@@ -43,11 +55,12 @@ body.gitden-reader a:link {
 
   /* text-rendering is the only way to enable kerning in Kindle (and Calibre, though it seems to kern automatically) */
   /* personally, I think Kindle overdoes kerning, but we're running with it for now */
-  h1, h2, h3, h4, h5, h6,
+  /* text-rendering: optimizeLegibility kills certain Kindle eInk devices */
+  /*h1, h2, h3, h4, h5, h6,
   body p, li, dd, blockquote > footer,
   th, td, figcaption, caption {
     text-rendering: optimizeLegibility;
-  }
+  }*/
 
   /* hack line height of subtitle using floats on Kindle */
   h1.chapter-title .subtitle {
@@ -81,7 +94,8 @@ body.gitden-reader a:link {
 /* Font-based icons */
 .icon {
   display: inline-block;
-  font-family: "FontAwesome";
+  /* !important required to override custom font setting in Kindle (since .icon can appear inside a span) */
+  font-family: "FontAwesome" !important;
   font-style: normal !important;
   font-weight: normal !important;
   line-height: 1;

data/data/styles/epub3.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 @import url("epub3-fonts.css");
 
 *, *:before, *:after {
@@ -29,7 +28,7 @@ body {
   /* don't use !important on margin as it breaks calibre */
   margin: 0;
   font-size: 100%;
-  /* NOTE putting optimizeLegibility on the body slow down rendering considerably */
+  /* NOTE putting optimizeLegibility on the body slows down rendering considerably */
   text-rendering: optimizeSpeed;
   /* -webkit-font-smoothing has no noticable effect and is controversial, so leaving it off */
 }
@@ -84,6 +83,7 @@ b.button {
   font-weight: normal;
   text-shadow: 1px 0 0 #B3B3B1;
   color: #191918;
+  white-space: nowrap;
 }
 
 b.button .label {
@@ -199,7 +199,7 @@ td, th {
 
 body a:link {
   color: #333332;
-  /* hack for font color in iBooks */
+  /* hack for font color in iBooks and Gitden (though Gitden would accept color !important too) */
   -webkit-text-fill-color: #333332;
   /* Kindle requires the !important on text-decoration */
   /* In night mode, the only indicator of a link is the underline, so we need it or a background image */
@@ -239,19 +239,13 @@ code.literal {
 h1, h2, h3, h4, h5, h6 {
   font-family: "M+ 1p", sans-serif;
   font-weight: 400;
-  text-align: left;
-  color: #333332;
   letter-spacing: -0.01em;
-  /* disable hyphenation, such as in iBooks */
-  -webkit-hyphens: none;
-  /* force super-long words to break */
-  word-break: break-word;
-
-  /* NOTE: Kindle doesn't allow the line-height to be less than the font size (refer to heading font sizes) */
+  /* NOTE Kindle doesn't allow the line-height to be less than the font size (refer to heading font sizes) */
   line-height: 1.4; /* or 1.2125 */
+  text-align: left;
 
-  margin: 0;
-  padding: 0;
+  -webkit-hyphens: none; /* disable hyphenation where supported (e.g., iBooks) */
+  word-wrap: break-word; /* break in middle of long word if no other break opportunities are available */
 
   /* avoiding page breaks does not seem to work in Kindle */
   -webkit-column-break-inside: avoid;
@@ -264,36 +258,31 @@ h1, h2, h3, h4, h5, h6 {
 /* We'll just use the stronger rule for all paragraph-related stuff to be sure */
 body p {
   margin: 1em 0 0 0;
-  text-indent: 0;
-
-  font-family: "Noto Serif", serif;
-  color: #333332;
-  line-height: 1.6;
   text-align: justify;
-  /* Signal to iBooks that hypens are okay here */
-  -webkit-hyphens: auto;
+  text-indent: 0;
 
   widows: 2;
   orphans: 2;
 }
 
+body p,
 ul, ol, li, dl, dt, dd, footer,
-div.verse .attribution, table.table th, table.table td {
-  font-family: "Noto Serif", serif;
+div.verse .attribution, table.table th, table.table td,
+figcaption, caption {
   color: #333332;
+  /* NOTE iBooks will forcefully override font-family of text inside div, p and span elements when font other than Original is selected */
+  /* NOTE iBooks honors Original font for prose text if declared in display-options.xml */
+  font-family: "Noto Serif", serif;
 }
 
-li, dt, dd, footer {
+body p, li, dt, dd, footer {
   line-height: 1.6;
 }
 
-figcaption, caption {
-  font-family: "Noto Serif", serif;
-}
-
 code, kbd, pre {
-  font-family: "M+ 1mn", monospace;
   color: #191918;
+  font-family: "M+ 1mn", monospace;
+  -webkit-hyphens: none; /* disable hyphenation where supported (e.g., iBooks) */
 }
 
 /* QUESTION should we kern preformatted text blocks? */
@@ -301,12 +290,11 @@ h1, h2, h3, h4, h5, h6,
 body p, li, dd, blockquote > footer,
 th, td, figcaption, caption {
   /* forward-compatible CSS to enable kerning (if we want ligatures, add "liga" and "dlig") */
-  /* WebKits that doesn't recognize these properties don't kern well, hence why we don't just enable kerning via text-rendering */
-  /*text-rendering: optimizeLegibility;*/
+  /* WebKits that don't recognize these properties don't kern well, hence why we don't simply enable kerning via text-rendering */
   -webkit-font-feature-settings: "kern";
   font-feature-settings: "kern";
   font-kerning: normal;
-  /* NOTE: see Kindle hack in epub3-css3-only.css for additional kerning settings */
+  /* NOTE see Kindle hack in epub3-css3-only.css for additional kerning settings (disabled) */
 }
 
 p.last::after {
@@ -314,7 +302,7 @@ p.last::after {
   display: inline-block;
   font-family: "FontAwesome";
   font-size: 1em;
-  content: "\f121"; /* </> */
+  content: "\f121"; /* i.e., </> */
   margin-left: 0.25em;
 }
 
@@ -383,16 +371,15 @@ div.callout-list ol li {
 }
 
 i.conum {
-  font-family: "M+ 1mn", monospace;
-  /*text-rendering: geometricPrecision;*/
   color: #468C54;
+  font-family: "M+ 1mn", monospace;
   font-style: normal;
 }
 
-pre i.conum {
-  /* don't let it affect line spacing; REVIEW may not need this! */
-  /*line-height: 1;*/
-}
+/* don't let conum affect line spacing; REVIEW may not need this! */
+/*pre i.conum {
+  line-height: 1;
+}*/
 
 div.callout-list li > i.conum {
   float: left;
@@ -416,23 +403,19 @@ div.ordered-list div.description-list {
   margin-top: 0;
 }
 
-/*
-div.description-list div.itemized-list,
+/*div.description-list div.itemized-list,
 div.description-list div.ordered-list,
 div.description-list div.description-list {
-}
-*/
+}*/
 
-div.itemized-list > h3,
-div.ordered-list > h3,
-div.description-list > h3 {
+h3.list-heading {
   font-size: 1em;
   font-family: "Noto Serif", serif;
   font-weight: bold;
   line-height: 1.6;
-  color: #333332;
+  margin-top: 1em;
+  margin-bottom: -0.25em;
   letter-spacing: 0;
-  word-spacing: 0;
 }
 
 div.stack li strong.subject,
@@ -462,9 +445,6 @@ body:first-of-type ul ul ul {
 }
 
 ul > li::before {
-  /*
-  text-rendering: geometricPrecision;
-  */
   float: left;
   margin-left: -1em;
   margin-top: -0.05em;
@@ -546,35 +526,24 @@ ul.references > li > span.principal {
   text-align: left;
 }
 
-h1, h1 code,
-h2, h2 code {
-  color: #333332;
-}
-
 /* sized based on the major third modular scale (4:5, 16px, 24px) */
 h1, h2 {
+  color: #333332;
   font-size: 1.5em;
   word-spacing: -0.075em;
   margin-top: 1em; /* 1.5rem */
   margin-bottom: -0.3333em; /* -0.5rem, 0.5rem to content */
 }
 
-h3, h3 code {
-  color: #333332;
-}
-
 h3 {
+  color: #333332;
   font-size: 1.25em;
-  word-spacing: 0;
   margin-top: 0.84em; /* 1.05rem */
   margin-bottom: -0.5em; /* -0.625rem, 0.375rem to content */
 }
 
-h4, h4 code {
-  color: #4F4F4C;
-}
-
 h4 {
+  color: #4F4F4C;
   font-weight: 200;
 
   font-size: 1.1em;
@@ -588,11 +557,8 @@ h4 {
   margin-bottom: -0.625em; /* -0.75rem, 0.25rem to content */
 }
 
-h5, h5 code {
-  color: #666665;
-}
-
 h5 {
+  color: #666665;
   /*
   font-size: 1em;
   text-transform: uppercase;
@@ -607,6 +573,10 @@ h5 {
   margin-bottom: -0.972em; /* -0.875rem */
 }
 
+h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
+  color: inherit;
+}
+
 h5 code {
   text-transform: none;
 }
@@ -942,10 +912,12 @@ figure.image img {
 }
 
 pre {
+  text-align: left; /* fix for Namo */
   margin-top: 1em; /* 0.85rem */
   /*margin-top: 1.176em;*/ /* 1rem */
   white-space: pre-wrap;
-  word-wrap: break-word;
+  /*word-break: break-all;*/ /* break at the end of the line, no matter what */
+  word-wrap: break-word; /* break in middle of long word if no other break opportunities are available */
   font-size: 0.85em;
   line-height: 1.4; /* matches what Kindle uses and can't go less */
   background-color: #F2F2F2;
@@ -983,6 +955,7 @@ div.verse {
   page-break-inside: avoid;
 }
 
+/* TODO we may want to reenable hyphens here, but not for kf8 */
 div.verse > pre {
   background-color: transparent;
   border: none;
@@ -1291,3 +1264,17 @@ nav#toc ol {
 .icon {
   display: none;
 }
+
+@media amzn-mobi {
+  /* NOTE mobi7 doesn't support custom fonts, so revert to generic ones */
+  body p, ul, ol, li, dl, dt, dd, figcaption, caption, footer,
+  table.table th, table.table td, div.verse .attribution {
+    font-family: serif;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    font-family: sans-serif;
+  }
+  code, kbd, pre, i.conum {
+    font-family: monospace;
+  }
+}

data/lib/asciidoctor-epub3/converter.rb

@@ -149,14 +149,21 @@ class ContentConverter
     content = node.content
 
     # NOTE must run after content is resolved
-    # NOTE pubtree requires icon CSS to be repeated inside <body> (or in a linked stylesheet); perhaps create dynamic CSS file?
-    icon_css = unless @icon_names.empty?
+    # TODO perhaps create dynamic CSS file?
+    if @icon_names.empty?
+      icon_css_head = icon_css_scoped = nil
+    else
       icon_defs = @icon_names.map {|name|
         %(.i-#{name}::before { content: "#{FontIconMap[name.tr('-', '_').to_sym]}"; })
       } * EOL
-      %(<style>
+      icon_css_head = %(<style>
 #{icon_defs}
 </style>
+)
+      # NOTE Namo Pubtree requires icon CSS to be repeated inside <body> (or in a linked stylesheet); wrap in div to hide from Aldiko
+      icon_css_scoped = (node.attr? 'ebook-format', 'kf8') ? nil : %(<div style="display: none" aria-hidden="true"><style scoped="scoped">
+#{icon_defs}
+</style></div>
 )
     end
 
@@ -168,7 +175,7 @@ class ContentConverter
 <title>#{doctitle_sanitized}</title>
 <link rel="stylesheet" type="text/css" href="styles/epub3.css"/>
 <link rel="stylesheet" type="text/css" href="styles/epub3-css3-only.css" media="(min-device-width: 0px)"/>
-#{icon_css}<script type="text/javascript">
+#{icon_css_head}<script type="text/javascript">
 document.addEventListener('DOMContentLoaded', function(event) {
   var epubReader = navigator.epubReadingSystem;
   if (!epubReader) {
@@ -182,7 +189,7 @@ document.addEventListener('DOMContentLoaded', function(event) {
 </head>
 <body>
 <section class="chapter" title="#{doctitle_sanitized.gsub '"', '&quot;'}" epub:type="chapter" id="#{docid}">
-#{icon_css && (icon_css.sub '<style>', '<style scoped="scoped">')}<header>
+#{icon_css_scoped}<header>
 <div class="chapter-header">
 <p class="byline"><img src="#{imagesdir}avatars/#{username}.jpg"/> <b class="author">#{author}</b></p>
 <h1 class="chapter-title">#{title_upper}#{subtitle ? %[ <small class="subtitle">#{subtitle_formatted_upper}</small>] : nil}</h1>
@@ -333,7 +340,7 @@ document.addEventListener('DOMContentLoaded', function(event) {
     # patches conums to fix extra or missing leading space
     # TODO apply this patch upstream to Asciidoctor
     %(<figure class="#{figure_classes * ' '}">
-#{title_div}<pre class="#{pre_classes * ' '}"><code>#{node.content.gsub(/(?<! )<i class="conum"| +<i class="conum"/, ' <i class="conum"')}</code></pre>
+#{title_div}<pre class="#{pre_classes * ' '}"><code>#{(node.content || '').gsub(/(?<! )<i class="conum"| +<i class="conum"/, ' <i class="conum"')}</code></pre>
 </figure>)
   end
 
@@ -562,7 +569,7 @@ document.addEventListener('DOMContentLoaded', function(event) {
             lines << %(<span class="principal">#{dd.text}</span>) if dd.text?
             lines << dd.content
           else
-            lines << dd.text
+            lines << %(<span class="principal">#{dd.text}</span>)
           end
           lines << '</dd>'
         end
@@ -581,7 +588,7 @@ document.addEventListener('DOMContentLoaded', function(event) {
     ol_class_attr = ol_classes.empty? ? nil : %( class="#{ol_classes * ' '}")
     id_attribute = node.id ? %( id="#{node.id}") : nil
     lines = [%(<div#{id_attribute} class="#{div_classes * ' '}">)]
-    lines << %(<h3>#{node.title}</h3>) if node.title?
+    lines << %(<h3 class="list-heading">#{node.title}</h3>) if node.title?
     lines << %(<ol#{ol_class_attr}#{(node.option? 'reversed') ? ' reversed="reversed"' : nil}>)
     node.items.each do |item|
       lines << %(<li>
@@ -609,7 +616,7 @@ document.addEventListener('DOMContentLoaded', function(event) {
     ul_class_attr = ul_classes.empty? ? nil : %( class="#{ul_classes * ' '}")
     id_attribute = node.id ? %( id="#{node.id}") : nil
     lines = [%(<div#{id_attribute} class="#{div_classes * ' '}">)]
-    lines << %(<h3>#{node.title}</h3>) if node.title?
+    lines << %(<h3 class="list-heading">#{node.title}</h3>) if node.title?
     lines << %(<ul#{ul_class_attr}>)
     node.items.each do |item|
       lines << %(<li>