From 9a30baffbfec896b98c4278ecc0e80f0f6230224 Mon Sep 17 00:00:00 2001 From: milde Date: Fri, 19 Mar 2021 00:23:19 +0000 Subject: HTML5 stylesheet update and cleanup. Class value for documents with ToC. * Improve the page layout for responsive design, especially for documents without ToC. * Cleanup, small fixes, and re-organisation. git-svn-id: https://svn.code.sf.net/p/docutils/code/trunk@8635 929543f6-e4f2-0310-98a6-ba3bd3dd1d04 --- .../docutils/writers/html5_polyglot/__init__.py | 14 ++ .../docutils/writers/html5_polyglot/minimal.css | 170 ++++++++++----------- docutils/docutils/writers/html5_polyglot/plain.css | 89 +++-------- .../docutils/writers/html5_polyglot/responsive.css | 157 ++++++++++--------- .../docutils/writers/html5_polyglot/tuftig.css | 17 +-- .../functional/expected/standalone_rst_html5.html | 2 +- 6 files changed, 207 insertions(+), 242 deletions(-) (limited to 'docutils') diff --git a/docutils/docutils/writers/html5_polyglot/__init__.py b/docutils/docutils/writers/html5_polyglot/__init__.py index 4e052d929..42c411b43 100644 --- a/docutils/docutils/writers/html5_polyglot/__init__.py +++ b/docutils/docutils/writers/html5_polyglot/__init__.py @@ -408,3 +408,17 @@ class HTMLTranslator(writers._html_base.HTMLTranslator): def depart_sidebar(self, node): self.body.append('\n') self.in_sidebar = False + + # Add class value to , if there is a ToC in the document + # (see responsive.css how this is used for sidebar navigation). + # TODO: use the new HTML5 element

? + def visit_topic(self, node): + if ('contents' in node['classes'] + and isinstance(node.parent, nodes.document)): + self.body_prefix[0] = '\n\n' + self.body.append(self.starttag(node, 'div', CLASS='topic')) + self.topic_classes = node['classes'] # TODO: remove? + + def depart_topic(self, node): + self.body.append('\n') + self.topic_classes = [] diff --git a/docutils/docutils/writers/html5_polyglot/minimal.css b/docutils/docutils/writers/html5_polyglot/minimal.css index 70bafb4a5..7ed9d5a43 100644 --- a/docutils/docutils/writers/html5_polyglot/minimal.css +++ b/docutils/docutils/writers/html5_polyglot/minimal.css @@ -21,23 +21,18 @@ /* .. _validates: http://jigsaw.w3.org/css-validator/validator$link */ /* titles */ -h1.title, -p.subtitle { - text-align: center; -} p.topic-title, -p.sidebar-title, -p.rubric, p.admonition-title, p.system-message-title { font-weight: bold; } -h1 + p.subtitle { - font-size: 1.6em; +p.sidebar-title, +p.rubric { + font-weight: bold; + font-size: larger; } -h2 + p.section-subtitle, -p.sidebar-title { - font-size: 1.2em; +p.rubric { + color: maroon; } p.subtitle, p.section-subtitle, @@ -45,45 +40,47 @@ p.sidebar-subtitle { font-weight: bold; margin-top: -0.5em; } -p.rubric { - font-size: larger; - color: maroon; +h1 + p.subtitle { + font-size: 1.6em; } -a.toc-backref { +h2 + p.section-subtitle, a.toc-backref { color: black; text-decoration: none; } /* Warnings, Errors */ -div.system-messages h2, -span.problematic, -p.system-message-title { +.system-messages h2, +.system-message-title, +span.problematic { color: red; } /* Inline Literals */ -span.docutils.literal { +.docutils.literal { font-family: monospace; white-space: pre-wrap; } -/* do not wraph at hyphens and similar: */ +/* do not wrap at hyphens and similar: */ .literal > span.pre { white-space: nowrap; } /* Lists */ /* compact and simple lists: no margin between items */ -.simple li, .compact li, -.simple ul, .compact ul, -.simple ol, .compact ol, -.simple > li p, .compact > li p, -dl.simple > dd, dl.compact > dd { +.simple li, .simple ul, .simple ol, +.compact li, .compact ul, .compact ol, +.simple > li p, dl.simple > dd, +.compact > li p, dl.compact > dd { margin-top: 0; margin-bottom: 0; } +/* Nested Paragraphs */ +p:first-child { margin-top: 0; } +p:last-child { margin-bottom: 0; } +td > p, th > p { margin-bottom: 0; } /* Table of Contents */ -div.topic.contents { margin: 0.5em 0; } -div.topic.contents ul { +.topic.contents { margin: 0.5em 0; } +.topic.contents ul { list-style-type: none; padding-left: 1.5em; } @@ -95,14 +92,14 @@ ol.upperalpha { list-style: upper-alpha } ol.lowerroman { list-style: lower-roman } ol.upperroman { list-style: upper-roman } -dt span.classifier { font-style: italic } -dt span.classifier:before { +/* Definition Lists and Derivatives */ +dt .classifier { font-style: italic } +dt .classifier:before { font-style: normal; margin: 0.5em; content: ":"; } - -/* Field Lists and drivatives */ +/* Field Lists and similar */ /* bold field name, content starts on the same line */ dl.field-list > dt, dl.option-list > dt, @@ -120,7 +117,7 @@ dl.citation > dt { dl.field-list > dd, dl.option-list > dd, dl.docinfo > dd { - margin-left: 9em; /* ca. 14 chars in the test examples */ + margin-left: 9em; /* ca. 14 chars in the test examples, fit all Docinfo fields */ } /* start field-body on a new line after long field names */ dl.field-list > dd > *:first-child, @@ -137,11 +134,11 @@ dl.docinfo > dt:after { } /* Bibliographic Fields (docinfo) */ -pre.address { - font: inherit; +dl.docinfo pre.address { + font: inherit; margin: 0.5em 0; } -dd.authors > p { margin: 0; } +dl.docinfo > dd.authors > p { margin: 0; } /* Option Lists */ dl.option-list > dt { font-weight: normal; } @@ -160,81 +157,73 @@ dl.footnote.superscript > dt.label { vertical-align: super; font-size: small; } -dt.label > span.fn-backref { margin-left: 0.2em; } +dt.label > span.fn-backref { + margin-left: 0.2em; + font-weight: normal; +} dt.label > span.fn-backref > a { font-style: italic; } -/* Alignment inside block objects */ -.align-left { text-align: left; } -.align-right { text-align: right; } -.align-center { clear: both; text-align: center; } -.align-top { vertical-align: top; } -.align-middle { vertical-align: middle; } -.align-bottom { vertical-align: bottom; } - -/* Alignment of block objects */ -figure.align-left, -img.align-left, -object.align-left, -table.align-left { +/* Alignment */ +.align-left { + text-align: left; margin-right: auto; } -figure.align-center, -img.align-center, -object.align-center, -table.align-center { +.align-center { + clear: both; + text-align: center; margin-left: auto; margin-right: auto; } -figure.align-right, -img.align-right, -object.align-right, -table.align-right { +.align-right { + text-align: right; margin-left: auto; } -img.align-center, img.align-right, -object.align-center, object.align-right { - display: block; -} +.align-top { vertical-align: top; } +.align-middle { vertical-align: middle; } +.align-bottom { vertical-align: bottom; } + /* reset inner alignment in figures and tables */ figure.align-left, figure.align-right, table.align-left, table.align-center, table.align-right { text-align: inherit; } -/* Sidebar */ -aside.sidebar { +/* Text Blocks */ +blockquote, +div.topic, +aside.topic { + margin: 1em 2em; +} +.sidebar, +.admonition, +.system-message { + border: thin solid; + margin: 1em 2em; + padding: 0.5em 1em; +} +.sidebar { width: 30%; max-width: 26em; float: right; clear: right; } - -/* Text Blocks */ -blockquote, -div.topic, -div.admonition, -div.system-message { - margin-left: 2em; - margin-right: 2em; -} div.line-block { display: block; } -div.line-block div.line-block { - margin: 0 0 0 2em; -} -pre { margin-left: 2em; } +div.line-block div.line-block, pre { margin-left: 2em; } pre.code .ln { color: gray; } /* line numbers */ - /* Tables */ -table { border-collapse: collapse; } +table { + border-collapse: collapse; +} td, th { - border-style: solid; - border-color: silver; + border: thin solid silver; padding: 0 1ex; - border-width: thin; } -td > p:first-child, th > p:first-child { margin-top: 0; } -td > p, th > p { margin-bottom: 0; } +.borderless td, .borderless th { + border: 0; + padding: 0; + padding-right: 0.5em /* separate table cells */ +} table > caption { text-align: left; @@ -245,17 +234,16 @@ table.captionbelow { caption-side: bottom; } -table.borderless td, table.borderless th { - border: 0; - padding: 0; - padding-right: 0.5em /* separate table cells */ -} - /* Document Header and Footer */ header { border-bottom: 1px solid black; } footer { border-top: 1px solid black; } -/* new HTML5 block elements: set display for older browsers */ -header, section, footer, aside, nav, main, article, figure { +/* Images are block-level by default in Docutils */ +/* New HTML5 block elements: set display for older browsers */ +img, header, section, footer, aside, nav, main, article, figure, video { display: block; } +/* inline images */ +p img, p video, figure img, figure video { + display: inline; +} diff --git a/docutils/docutils/writers/html5_polyglot/plain.css b/docutils/docutils/writers/html5_polyglot/plain.css index e682ae7e6..b1c97fea3 100644 --- a/docutils/docutils/writers/html5_polyglot/plain.css +++ b/docutils/docutils/writers/html5_polyglot/plain.css @@ -25,23 +25,26 @@ body { margin: 0; background-color: #dbdbdb; } -div.document, -main { +main, footer, header { line-height:1.3; - counter-reset: table figure; /* avoid long lines --> better reading */ - /* optimum is 45…75 characters/line */ + /* optimum is 45…75 characters/line */ /* OTOH: lines should not be too short because of missing hyphenation, */ - max-width: 50em; + max-width: 50rem; padding: 1px 2%; /* 1px on top avoids grey bar above title (mozilla) */ margin: auto; +} +main { + counter-reset: table figure; background-color: white; } - -/* Sections */ +footer, header { + font-size: smaller; + padding: 0.5em 2%; + border: none; +} /* Transitions */ - hr.docutils { width: 80%; margin-top: 1em; @@ -50,7 +53,6 @@ hr.docutils { } /* Paragraphs */ -/* ========== */ /* vertical space (parskip) */ p, ol, ul, dl, li, dd, @@ -118,28 +120,16 @@ div.dedication p.topic-title { font-style: normal; } -/* Citations */ -dl.citation dt.label { - font-weight: bold; -} -span.fn-backref { - font-weight: normal; -} - /* Text Blocks */ /* =========== */ /* Literal Blocks */ - -pre.literal-block, -pre.doctest-block, -pre.math, -pre.code { +pre.literal-block, pre.doctest-block, +pre.math, pre.code { font-family: monospace; } /* Block Quotes */ - blockquote > table, div.topic > table { margin-top: 0; @@ -201,26 +191,24 @@ dl.footnote { /* Images and Figures */ /* let content flow to the side of aligned images and figures */ -.figure.align-left, figure.align-left, img.align-left, +video.align-left, object.align-left { - display: block; clear: left; float: left; margin-right: 1em; } -.figure.align-right, figure.align-right, img.align-right, +video.align-right, object.align-right { - display: block; clear: right; float: right; margin-left: 1em; } -/* Stop floating sidebars, images and figures at section level 1,2,3 */ -h1, h2, h3, h4 { clear: both; } +/* Stop floating sidebars, images and figures */ +h1, h2, h3, h4, footer, header { clear: both; } /* Numbered figures */ figure.numbered > figcaption > p:before { @@ -229,32 +217,19 @@ figure.numbered > figcaption > p:before { font-weight: bold; } - /* Admonitions and System Messages */ - -div.admonition, -div.system-message, -aside.sidebar { - border: medium outset; - margin: 1em 1.5em; - padding: 0.5em 1em; -} - -div.caution p.admonition-title, -div.attention p.admonition-title, -div.danger p.admonition-title, -div.error p.admonition-title, -div.warning p.admonition-title, +.caution p.admonition-title, +.attention p.admonition-title, +.danger p.admonition-title, +.error p.admonition-title, +.warning p.admonition-title, div.error { color: red; } - /* Sidebar */ - /* Move right. In a layout with fixed margins, */ /* it can be moved into the margin. */ -div.sidebar, aside.sidebar { width: 30%; max-width: 26em; @@ -264,7 +239,6 @@ aside.sidebar { } /* Code */ - pre.code { padding: 0.7ex } pre.code, code { background-color: #eeeeee } pre.code .ln { color: gray; } /* line numbers */ @@ -286,28 +260,9 @@ pre.code .inserted, code .inserted { background-color: #A3D289} /* Compound Paragraph */ /* Container */ -/* Document Header and Footer */ - -footer, header { - font-size: smaller; - clear: both; - padding: 0.5em 2%; - background-color: #ebebee; - border: none; -} - /* Inline Markup */ /* ============= */ -/* Emphasis */ -/* em */ -/* Strong Emphasis */ -/* strong */ -/* Interpreted Text */ -/* span.interpreted */ -/* Title Reference */ -/* cite */ - /* Inline Literals */ /* possible values: normal, nowrap, pre, pre-wrap, pre-line */ /* span.docutils.literal { white-space: pre-wrap; } */ diff --git a/docutils/docutils/writers/html5_polyglot/responsive.css b/docutils/docutils/writers/html5_polyglot/responsive.css index 92d4d4192..085a667dc 100644 --- a/docutils/docutils/writers/html5_polyglot/responsive.css +++ b/docutils/docutils/writers/html5_polyglot/responsive.css @@ -27,15 +27,18 @@ body { background-color: #fafaf6; margin: auto; + --field-indent: 6.6em; /* indent of fields in field lists */ + --sidebar-margin-right: 0; /* adapted in media queries below */ } main { counter-reset: figure table; } -main, header, footer { +body > * { background-color: white; line-height: 1.6; - /* smooth transition from 5% to 15% (see media queries below) */ - padding: 0.5rem calc(25% - 5.8rem); + padding: 0.5rem calc(29% - 7.2rem); /* go from 5% to 15% (8.15em/54em) */ + margin: auto; + max-width: 100rem; } /* Vertical Space (Parskip) */ @@ -50,13 +53,6 @@ h1, h2, h3, h4, h5, h6, dl > dd { margin-bottom: 0.5em; } -/* exceptions */ -p:first-child { - margin-top: 0; -} -p:last-child { - margin-bottom: 0; -} blockquote > table, div.topic > table { margin-top: 0; @@ -119,11 +115,11 @@ hr { /* Lists */ ul, ol { - padding-left: 1.1em; + padding-left: 1.1em; /* indent by bullet width (Firefox, DejaVu fonts) */ } dl.field-list > dd, dl.docinfo > dd { - margin-left: 6.4em; + margin-left: var(--field-indent); /* adapted in media queries or HTML */ } dl.option-list > dd { margin-left: 20%; @@ -161,6 +157,8 @@ dl.footnote { border-left: solid; border-left-width: thin; } +dt.label > span.fn-backref { +} /* Images, Figures, and Tables */ img { @@ -209,18 +207,16 @@ table.numbered > caption:before { } /* Admonitions and System Messages */ -div.admonition, +.admonition, div.system-message { - border-style: solid; - border-color: silver; - border-width: thin; + border: thin solid silver; margin: 1em 2%; padding: 0.5em; } -div.caution p.admonition-title, -div.attention p.admonition-title, -div.danger p.admonition-title, -div.warning p.admonition-title, +.caution p.admonition-title, +.attention p.admonition-title, +.danger p.admonition-title, +.warning p.admonition-title, div.error { color: maroon; } @@ -242,7 +238,7 @@ pre.code .inserted, code .inserted { background-color: #A3D289} /* Hyperlink References */ a { text-decoration: none; - text-decoration-skip-ink: auto; /* underline that clears descenders (nonstandard) */ + /* text-decoration-skip-ink: auto; !!nonstandard, default in modern browsers */ } /* Wrap links at any place, if this is the only way to prevent overflow */ a:link{ @@ -277,6 +273,7 @@ h1, h2, h3 { } img.align-left, +video.align-left, figure.align-left, table.align-left { margin-left: 0; @@ -286,6 +283,7 @@ table.align-left { float: left; } img.align-right, +video.align-right, figure.align-right, table.align-right { margin-left: 0.5em; @@ -299,9 +297,10 @@ table.align-right { aside.sidebar, .marginal, .admonition.marginal { - max-width: min(40%, 20rem); + max-width: 40%; + border: none; background-color: #efefea; - margin: 0.5em 0 0.5em 1em; + margin: 0.5em var(--sidebar-margin-right) 0.5em 1em; padding: 0.5em; clear: right; float: right; @@ -316,7 +315,7 @@ aside.sidebar { @media (max-width: 30em) { /* Smaller margins and no floating elements for small screens */ /* (main text less than 40 characters/line) */ - main, header, footer { + body > * { padding: 0.5rem 5%; line-height: 1.4 } @@ -331,13 +330,11 @@ aside.sidebar { pre { margin-left: 0; } - dl.field-list > dd { - margin-left: 4em; + body { + --field-indent: 4em; } - dl.field-list.narrow > dd, - dl.docinfo > dd, - dl.option-list > dd { - margin-left: 2.4em; + dl.field-list.narrow, dl.docinfo, dl.option-list { + --field-indent: 2.4em; } pre, pre * { font-size: 0.9em; @@ -348,17 +345,21 @@ aside.sidebar { @media (min-width: 54em) { /* Move ToC to the left */ /* Main text width before: 70% ≙ 35em ≙ 75…95 chrs (Dejavu/Times) */ - /* after: ≳ 30em ≙ 54…70 chrs (Dejavu/Times) */ - main, header, footer { - margin-left: 10%; - padding-left: min(20%, 18rem); + /* after: ≳ 30em ≙ 54…70 chrs (Dejavu/Times) */ + body.with-toc { + padding-left: 8%; + } + body.with-toc > * { + margin-left: 0; + padding-left: 22rem; /* fallback for webkit */ + padding-left: min(22%, 22rem); padding-right: 7%; } - main > div.topic.contents { + main > div.topic.contents { /* exclude local ToCs */ position: fixed; top: 0; left: 0; - width: min(25%, 28em); + width: min(25%, 25em); height: 100vh; margin: 0; background-color: #fafaf6; @@ -377,57 +378,69 @@ aside.sidebar { } @media (min-width: 70em) { - dl.field-list > dd, - dl.docinfo > dd { - margin-left: 9em; + body { + --field-indent: 9em; + } +} + +@media (min-width: 77em) { + /* Move marginalia to 6rem from right border */ + /* aside.sidebar, */ + /* .marginal, */ + /* .admonition.marginal { */ + /* margin-right: calc(6rem - 15%); */ + /* } */ + /* BUG: margin is calculated for break point width */ + /* workaround: variable + many breakpoints */ + body > * { + padding-left: 18%; + padding-right: 28%; /* fallback for webkit */ + padding-right: min(28%, 28rem); + --sidebar-margin-right: -20rem; + } + /* limit main text to ~ 50em ≙ 85…100 characters DejaVu rsp. …120 Times */ + body.with-toc > * { + padding-left: min(22%, 22rem); + padding-right: calc(78% - 50rem); /* fallback for webkit */ + padding-right: min(78% - 50rem, 28rem); + --sidebar-margin-right: 0; } } -@media (min-width: 80em) { - /* limit main text to 50em ≙ 85…100 characters DejaVu rsp. …120 Times */ - main, header, footer { - padding-right: calc(70% - 50em); +@media (min-width: 85em) { + body.with-toc > * { + --sidebar-margin-right: -9rem; } - /* Move marginalia to 6rem from right border */ - /* TODO: why does this fail ?? */ - /* aside.sidebar, */ - /* .marginal, */ - /* .admonition.marginal { */ - /* margin-right: calc(6rem - 15vh); */ - /* } */ } -@media (min-width: 92em) { +@media (min-width: 90em) { /* move marginalia into the margin */ - aside.sidebar, - .admonition.marginal, - .marginal { - margin-right: -12rem; + body > * { + padding-left: min(22%, 22rem); + --sidebar-margin-right: -23rem; + } + body.with-toc > * { + --sidebar-margin-right: -14rem; } } -@media (min-width: 106em) { +@media (min-width: 99em) { /* move marginalia out of main text area */ - aside.sidebar, + body.with-toc > * { + --sidebar-margin-right: -20rem; + } + body > *, body.with-toc > * { /* for webkit */ + padding-left: 22rem; + padding-right: 28rem; + } .admonition.marginal, .marginal { - width: 20rem; - /* background-color: inherit; */ - margin-right: -22rem; + width: 40%; /* make marginal figures, ... "full width" */ } } -@media (min-width: 117em) { - /* maximal sensible width of main area reached */ - main, header, footer { - width: 98rem; - margin-right: 0; - padding-left: 18rem; - padding-right: 30rem; - } - aside.sidebar, - .marginal, - .admonition.marginal { - margin-right: -24rem; /* move into the padding, 6rem from border */ +@media (min-width: 104em) { + body.with-toc > * { + --sidebar-margin-right: -23rem; } } diff --git a/docutils/docutils/writers/html5_polyglot/tuftig.css b/docutils/docutils/writers/html5_polyglot/tuftig.css index de136bcd1..ef6122fb7 100644 --- a/docutils/docutils/writers/html5_polyglot/tuftig.css +++ b/docutils/docutils/writers/html5_polyglot/tuftig.css @@ -25,11 +25,6 @@ /* General Settings */ /* ================ */ -@viewport { - zoom: 1.0; - width: extend-to-zoom; -} - body { font-family: et-book, Palatino, Georgia, serif; background-color: #fafaf6; @@ -281,7 +276,7 @@ table.numbered > caption:before { } /* Admonitions and System Messages */ -div.admonition, +.admonition, div.system-message { border-style: solid; border-color: silver; @@ -289,10 +284,10 @@ div.system-message { margin: 1em 0; padding: 0.5em; } -div.caution p.admonition-title, -div.attention p.admonition-title, -div.danger p.admonition-title, -div.warning p.admonition-title, +.caution p.admonition-title, +.attention p.admonition-title, +.danger p.admonition-title, +.warning p.admonition-title, div.error { color: maroon; } @@ -326,7 +321,7 @@ a { } a:link { text-decoration: underline; - text-decoration-skip-ink: auto; /* nonstandard selector */ + /* text-decoration-skip-ink: auto; nonstandard selector */ } /* undecorated links */ .contents a:link, a.toc-backref:link, a.image-reference:link, diff --git a/docutils/test/functional/expected/standalone_rst_html5.html b/docutils/test/functional/expected/standalone_rst_html5.html index bc864690f..60fe4889c 100644 --- a/docutils/test/functional/expected/standalone_rst_html5.html +++ b/docutils/test/functional/expected/standalone_rst_html5.html @@ -18,7 +18,7 @@ - +

Document header

-- cgit v1.2.1