epub3.css in asciidoctor-epub3-1.5.0.alpha.6

- old
+ new

@@ -1,6 +1,5 @@
-@charset "UTF-8";
 @import url("epub3-fonts.css");
 
 *, *:before, *:after {
   box-sizing: border-box;
 }
@@ -27,11 +26,11 @@
   padding: 0 !important;
   /* add margin to ~ match Kindle's narrow setting */
   /* 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 */
 }
 
 /* disables night mode in Aldiko, hoo-ha! */
@@ -82,10 +81,11 @@
 
 b.button {
   font-weight: normal;
   text-shadow: 1px 0 0 #B3B3B1;
   color: #191918;
+  white-space: nowrap;
 }
 
 b.button .label {
   padding: 0 0.25em;
 }
@@ -197,11 +197,11 @@
   padding: 0;
 }
 
 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 */
   text-decoration: none !important;
   border-bottom: 1px dashed #666665;
@@ -237,23 +237,17 @@
 }
 
 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;
   page-break-inside: avoid;
   -webkit-column-break-after: avoid;
@@ -262,61 +256,55 @@
 
 /* Aldiko requires a higher precedence rule to set margin and text-indent, hence the body prefix */
 /* We'll just use the stronger rule for all paragraph-related stuff to be sure */
 body p {
   margin: 1em 0 0 0;
+  text-align: justify;
   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;
-
   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? */
 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 {
   color: #57AD68;
   display: inline-block;
   font-family: "FontAwesome";
   font-size: 1em;
-  content: "\f121"; /* </> */
+  content: "\f121"; /* i.e., </> */
   margin-left: 0.25em;
 }
 
 ul li, ol li {
   /* minimum margin in case there is no paragraph content */
@@ -381,20 +369,19 @@
 div.callout-list ol li {
   text-align: left;
 }
 
 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;
   margin-left: -1.25em;
   display: block;
@@ -414,27 +401,23 @@
 div.ordered-list div.ordered-list,
 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,
 div.stack-subject li strong.subject {
   display: block;
@@ -460,13 +443,10 @@
 body:first-of-type ul ul ul {
   list-style-type: none;
 }
 
 ul > li::before {
-  /*
-  text-rendering: geometricPrecision;
-  */
   float: left;
   margin-left: -1em;
   margin-top: -0.05em;
   padding-left: 0.25em;
   /* guarantee it's out of the flow */
@@ -544,39 +524,28 @@
 ul.bibliography > li > span.principal,
 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;
   margin-top: 1em; /* 1.1rem */
   margin-bottom: -0.818em; /* -0.9rem, 0.1rem to content */
@@ -586,15 +555,12 @@
   margin-top: 0.875em; /* 1.05rem */
   /*margin-bottom: -0.75em;*/ /* -0.9rem, 0.1rem to content */
   margin-bottom: -0.625em; /* -0.75rem, 0.25rem to content */
 }
 
-h5, h5 code {
-  color: #666665;
-}
-
 h5 {
+  color: #666665;
   /*
   font-size: 1em;
   text-transform: uppercase;
   margin-top: 1em;
   margin-bottom: -1em;
@@ -605,10 +571,14 @@
   text-transform: uppercase;
   margin-top: 1.11em; /* 1rem */
   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;
 }
 
 /* Kindle strips (or unwraps) <header> tags, so we use an inner div to style */
@@ -940,14 +910,16 @@
   /*max-width: 95%;*/
   margin: 0 auto;
 }
 
 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;
   padding: 0.5rem 0.75rem;
   /*
@@ -981,10 +953,11 @@
 div.verse {
   -webkit-column-break-inside: avoid;
   page-break-inside: avoid;
 }
 
+/* TODO we may want to reenable hyphens here, but not for kf8 */
 div.verse > pre {
   background-color: transparent;
   border: none;
   font-size: 1.2em;
   text-align: center;
@@ -1288,6 +1261,20 @@
   list-style-type: none;
 }
 
 .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;
+  }
 }