2 <html xmlns=
"http://www.w3.org/1999/xhtml" xml:
lang=
"en" lang=
"en">
4 <meta charset=
"utf-8" />
5 <meta name=
"generator" content=
"Docutils 0.20: 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" />
12 <main id=
"special-features-of-the-tuftig-css-stylesheet">
13 <h1 class=
"title">Special Features of the
<cite>tuftig.css
</cite> Stylesheet
</h1>
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>
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>
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>
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>
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>
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;" />
57 <p>A numbered fullwidth figure.
</p>
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;" />
69 <p>This is a marginal figure.
</p>
71 <p>This is the legend.
</p>
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;" />
79 <p>Marginal objects are placed to the right of the preceding main text
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>
85 <p>This is a silly text that is only there to
86 demonstrate line wrapping.
</p>
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>
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,
103 <table class=
"booktabs numbered captionbelow marginal">
104 <caption>A marginal table
</caption>
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>
112 <tr><td><p>False
</p></td>
113 <td><p>False
</p></td>
114 <td><p>False
</p></td>
116 <tr><td><p>True
</p></td>
117 <td><p>False
</p></td>
120 <tr><td><p>False
</p></td>
124 <tr><td><p>True
</p></td>
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>
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>