docutils/test/functional/expected/rst_html5_tuftig.html

   1 <!DOCTYPE html>
   2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   3 <head>
   4 <meta charset="utf-8" />
   5 <meta name="generator" content="Docutils 0.22b.dev: https://docutils.sourceforge.io/" />
   6 <meta name="viewport" content="width=device-width, initial-scale=1" />
   7 <title>Special Features of the tuftig.css Stylesheet</title>
   8 <link rel="stylesheet" href="../input/data/minimal.css" type="text/css" />
   9 <link rel="stylesheet" href="../input/data/tuftig.css" type="text/css" />
  10 </head>
  11 <body>
  12 <main id="special-features-of-the-tuftig-css-stylesheet">
  13 <h1 class="title">Special Features of the <cite>tuftig.css</cite> Stylesheet</h1>
  14
  15 <p><span class="docutils literal">tuftig.css</span> is a <a class="reference external" href="http://www.w3.org/TR/CSS3">CSS3</a> style sheet for the output of Docutils’
  16 HTML5 writer. The rules are inspired by <a class="citation-reference" href="#tufte-css" id="citation-reference-1" role="doc-biblioref">[tufte.css]</a> and
  17 <a class="citation-reference" href="#tufte-latex" id="citation-reference-2" role="doc-biblioref">[tufte-latex]</a> going back to Edward Tufte’s layout design.</p>
  18 <div role="list" class="citation-list">
  19 <div class="citation" id="tufte-css" role="doc-biblioentry">
  20 <span class="label"><span class="fn-bracket">[</span><a role="doc-backlink" href="#citation-reference-1">tufte.css</a><span class="fn-bracket">]</span></span>
  21 <p>Dave Liepmann, <cite>Tufte CSS</cite>,
  22 <a class="reference external" href="https://edwardtufte.github.io/tufte-css/">https://edwardtufte.github.io/tufte-css/</a>.</p>
  23 </div>
  24 <div class="citation" id="tufte-latex" role="doc-biblioentry">
  25 <span class="label"><span class="fn-bracket">[</span><a role="doc-backlink" href="#citation-reference-2">tufte-latex</a><span class="fn-bracket">]</span></span>
  26 <p>Bil Kleb, Bill Wood and Kevin Godby,
  27 <cite>A Tufte-Style Book</cite>,
  28 <a class="reference external" href="https://www.ctan.org/pkg/tufte-latex">https://www.ctan.org/pkg/tufte-latex</a>.</p>
  29 </div>
  30 </div>
  31 <section id="fullwidth-and-margin-objects">
  32 <h2>Fullwidth and Margin Objects</h2>
  33 <p class="fullwidth">Block elements (paragraphs, admonitions, topics, figures, tables, …)
  34 with the “fullwidth” class argument use full text width.</p>
  35 <table class="booktabs numbered captionbelow fullwidth">
  36 <caption>A fullwidth table with LaTeX math commands</caption>
  37 <tbody>
  38 <tr><td><p><cite>arccos</cite></p></td>
  39 <td><p><span class="docutils literal">\arccos</span></p></td>
  40 <td><p><cite>gcd</cite></p></td>
  41 <td><p><span class="docutils literal">\gcd</span></p></td>
  42 <td><p><cite>Pr</cite></p></td>
  43 <td><p><span class="docutils literal">\Pr</span></p></td>
  44 </tr>
  45 <tr><td><p><cite>arcsin</cite></p></td>
  46 <td><p><span class="docutils literal">\arcsin</span></p></td>
  47 <td><p><cite>hom</cite></p></td>
  48 <td><p><span class="docutils literal">\hom</span></p></td>
  49 <td><p><cite>projlim</cite></p></td>
  50 <td><p><span class="docutils literal">\projlim</span></p></td>
  51 </tr>
  52 </tbody>
  53 </table>
  54 <figure class="numbered fullwidth">
  55 <img alt="reStructuredText, the markup syntax" src="../../../docs/user/rst/images/title.svg" style="width: 90%; height: 1.5em;" />
  56 <figcaption>
  57 <p>A numbered fullwidth figure.</p>
  58 </figcaption>
  59 </figure>
  60 <p>Block elements (admonitions, figures, tables, …) with the
  61 “marginal” class argument are set in the right margin (if place permits).</p>
  62 <p class="marginal">An ordinary paragraph with the “marginal” class argument.</p>
  63 <p>Tight integration of graphics with text is central to Tufte’s work
  64 even when those graphics are ancillary to the main body of a text. In
  65 many of those cases, a margin figure may be most appropriate.</p>
  66 <figure class="marginal numbered">
  67 <img alt="../../../docs/user/rst/images/biohazard.png" src="../../../docs/user/rst/images/biohazard.png" style="width: 2em;" />
  68 <figcaption>
  69 <p>This is a marginal figure.</p>
  70 <div class="legend">
  71 <p>This is the legend.</p>
  72 </div>
  73 </figcaption>
  74 </figure>
  75 <p>To place an image in the margin, use a marginal figure without caption.</p>
  76 <figure class="marginal">
  77 <img alt="../../../docs/user/rst/images/biohazard.png" src="../../../docs/user/rst/images/biohazard.png" style="width: 2em;" />
  78 </figure>
  79 <p>Marginal objects are placed to the right of the preceding main text
  80 block.</p>
  81 <aside class="admonition marginal note">
  82 <p class="admonition-title">Note</p>
  83 <p>This is a “note” type admonition with a block-quote inside.</p>
  84 <blockquote>
  85 <p>This is a silly text that is only there to
  86 demonstrate line wrapping.</p>
  87 </blockquote>
  88 </aside>
  89 <p>By default, citations and footnotes are set in the margin.
  90 To have them in the main text area (like <a class="citation-reference" href="#testbook" id="citation-reference-3" role="doc-biblioref">[Testbook]</a> and <a class="citation-reference" href="#tb98" id="citation-reference-4" role="doc-biblioref">[tb98]</a> here),
  91 use the “align-left” class value.</p>
  92 <div role="list" class="citation-list">
  93 <div class="citation align-left" id="testbook" role="doc-biblioentry">
  94 <span class="label"><span class="fn-bracket">[</span><a role="doc-backlink" href="#citation-reference-3">Testbook</a><span class="fn-bracket">]</span></span>
  95 <p>John Ex Ample, <cite>How to test web pages</cite>, Ontario, 1978.</p>
  96 </div>
  97 <div class="citation align-left" id="tb98" lang="de" role="doc-biblioentry">
  98 <span class="label"><span class="fn-bracket">[</span><a role="doc-backlink" href="#citation-reference-4">tb98</a><span class="fn-bracket">]</span></span>
  99 <p>Horst Schramm, <cite>Docutils 0.5</cite>, in Testberichte III,
 100 Leipzig, 1998.</p>
 101 </div>
 102 </div>
 103 <table class="booktabs numbered captionbelow marginal">
 104 <caption>A marginal table</caption>
 105 <thead>
 106 <tr><th class="head"><p>A</p></th>
 107 <th class="head"><p>B</p></th>
 108 <th class="head"><p>A or B</p></th>
 109 </tr>
 110 </thead>
 111 <tbody>
 112 <tr><td><p>False</p></td>
 113 <td><p>False</p></td>
 114 <td><p>False</p></td>
 115 </tr>
 116 <tr><td><p>True</p></td>
 117 <td><p>False</p></td>
 118 <td><p>True</p></td>
 119 </tr>
 120 <tr><td><p>False</p></td>
 121 <td><p>True</p></td>
 122 <td><p>True</p></td>
 123 </tr>
 124 <tr><td><p>True</p></td>
 125 <td><p>True</p></td>
 126 <td><p>True</p></td>
 127 </tr>
 128 </tbody>
 129 </table>
 130 <aside class="footnote-list superscript">
 131 <aside class="footnote superscript align-left" id="not-in-margin" role="doc-footnote">
 132 <span class="label"><span class="fn-bracket">[</span>1<span class="fn-bracket">]</span></span>
 133 <p>The “align-left” class value ensures this footnote is set
 134 in the main text area.</p>
 135 </aside>
 136 </aside>
 137 </section>
 138 </main>
 139 <footer>
 140 <p><a class="reference external image-reference" href="http://www.w3.org/TR/html5/"><img alt="Conforms to HTML 5" src="http://www.w3.org/html/logo/badge/html5-badge-h-css3-semantics.png" style="width: 88px; height: 31px;" /></a> <a class="reference external image-reference" href="http://validator.w3.org/check?uri=referer"><img alt="Check validity!" src="https://www.w3.org/Icons/ValidatorSuite/vs-blue-190.png" style="width: 88px; height: 31px;" /></a> <a class="reference external image-reference" href="http://jigsaw.w3.org/css-validator/check/referer"><img alt="Valid CSS 2.1!" src="http://jigsaw.w3.org/css-validator/images/vcss" style="width: 88px; height: 31px;" /></a></p>
 141 </footer>
 142 </body>
 143 </html>