From 1e67159021a131bd1e6fcd3a6ea734ebb22d2d99 Mon Sep 17 00:00:00 2001 From: "L.P.T." Date: Sat, 9 Nov 2024 21:14:07 +0100 Subject: [PATCH] Make SCCS files pass validators (3/4) Further changes in sequence: Moved
down just after
Moved ul, ul ul, ..., ol, ol ol, ... further up to the other
    definition Moved further up before <.chapter-header p.byline img> Moved pre> before figcaption + pre> Had to split and from their existing block to move them before and Tested and verified my changes with Calibre and my ancient Kobo GloHD device. Only 12 errors remaining now. --- data/styles/epub3.scss | 183 +++++++++++++++++++++-------------------- 1 file changed, 96 insertions(+), 87 deletions(-) diff --git a/data/styles/epub3.scss b/data/styles/epub3.scss index 639e142..508691f 100644 --- a/data/styles/epub3.scss +++ b/data/styles/epub3.scss @@ -195,6 +195,15 @@ body p { orphans: 2; } +th, td { + /* forward-compatible CSS to enable kerning (if we want ligatures, add "liga" and "dlig") */ + /* 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 (disabled) */ +} + body p, ul, ol, li, dl, dt, dd, footer, div.verse .attribution, table.table th, table.table td, @@ -217,7 +226,7 @@ code, kbd, pre { /* QUESTION should we kern preformatted text blocks? */ h1, h2, h3, h4, h5, h6, body p, li, dd, blockquote > footer, -th, td, figcaption, caption { +figcaption, caption { /* forward-compatible CSS to enable kerning (if we want ligatures, add "liga" and "dlig") */ /* 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"; @@ -240,6 +249,58 @@ ul li, ol li { margin-top: 0.4em; } +ul { + /* QUESTION do we need important here? */ + margin-left: 1em !important; + + > li::before { + float: left; + margin-left: -1em; + margin-top: -0.05em; + padding-left: 0.25em; + /* guarantee it's out of the flow */ + width: 0; + display: block; + + content: "▪"; + color: $list-lvl1; + } + + ul { + > li::before { + content: "◦"; + color: $list-lvl2; + } + + ul { + > li::before { + content: "•"; + color: $list-lvl3; + } + + ul { + > li::before { + content: "▫"; + color: $list-lvl4; + } + } + } + } +} + +ol { + list-style-type: decimal; + margin-left: 1.75em !important; + + ol { + list-style-type: lower-alpha; + + ol { + list-style-type: lower-roman; + } + } +} + /* use paragraph-size gaps between list items */ .complex > ul > li, .complex > ol > li { @@ -264,11 +325,6 @@ dt > span.term > code.literal { } */ -dl dd { - /* minimum margin in case there is no paragraph content */ - margin-top: 0.25em; -} - td.hdlist1 { font-weight: bold; padding-right: 0.625em; @@ -342,63 +398,16 @@ div.stack-subject li strong.subject { display: block; } -ul { - /* QUESTION do we need important here? */ - margin-left: 1em !important; - - > li::before { - float: left; - margin-left: -1em; - margin-top: -0.05em; - padding-left: 0.25em; - /* guarantee it's out of the flow */ - width: 0; - display: block; - - content: "▪"; - color: $list-lvl1; - } - - ul { - > li::before { - content: "◦"; - color: $list-lvl2; - } - - ul { - > li::before { - content: "•"; - color: $list-lvl3; - } - - ul { - > li::before { - content: "▫"; - color: $list-lvl4; - } - } - } - } -} - -ol { - list-style-type: decimal; - margin-left: 1.75em !important; - - ol { - list-style-type: lower-alpha; - - ol { - list-style-type: lower-roman; - } - } -} - /* REVIEW */ dd { margin-left: 1.5rem !important; } +dl dd { + /* minimum margin in case there is no paragraph content */ + margin-top: 0.25em; +} + /* Kindle does not justify list-item element, must wrap in nested block element */ li > span.principal, dd > span.principal { display: block; @@ -430,6 +439,16 @@ ul.references > li > span.principal { text-align: left; } +figure.image { + -webkit-column-break-inside: avoid; + page-break-inside: avoid; +} + +figure.image img { + display: block; + margin: 0 auto; +} + /* sized based on the major third modular scale (4:5, 16px, 24px) */ h1, h2 { font-size: 1.5em; @@ -725,6 +744,25 @@ th.valign-middle, td.valign-middle, th.valign-middle > p, td.valign-middle > p { vertical-align: middle; } +div.verse { + -webkit-column-break-inside: avoid; + page-break-inside: avoid; +} + +/* TODO we may want to reenable hyphens here */ +div.verse > pre { + font-family: "M+ 1p", sans-serif; + background-color: transparent; + border: none; + font-size: 1.2em; + text-align: center; +} + +div.verse .attribution { + display: block; + margin-top: 1.4em; +} + figure, aside.sidebar { margin-top: 1em; @@ -739,16 +777,6 @@ aside.sidebar { } */ -figure.image { - -webkit-column-break-inside: avoid; - page-break-inside: avoid; -} - -figure.image img { - display: block; - margin: 0 auto; -} - figure.coalesce { -webkit-column-break-inside: avoid; page-break-inside: avoid; @@ -836,25 +864,6 @@ aside.sidebar > div.content > div.itemized-list > ul { margin-left: 0.5em !important; } -div.verse { - -webkit-column-break-inside: avoid; - page-break-inside: avoid; -} - -/* TODO we may want to reenable hyphens here */ -div.verse > pre { - font-family: "M+ 1p", sans-serif; - background-color: transparent; - border: none; - font-size: 1.2em; - text-align: center; -} - -div.verse .attribution { - display: block; - margin-top: 1.4em; -} - aside.admonition { margin-top: 1em; padding: 1em;