├── docs ├── .nojekyll ├── tufte-md │ ├── img │ │ ├── rhino.png │ │ ├── exports-imports.png │ │ ├── napoleons-march.png │ │ ├── imagequilt-animal-sounds.png │ │ ├── table-example-be-page-159.png │ │ └── imagequilt-chinese-calligraphy.png │ ├── et-book │ │ ├── et-book-bold-line-figures │ │ │ ├── et-book-bold-line-figures.eot │ │ │ ├── et-book-bold-line-figures.ttf │ │ │ └── et-book-bold-line-figures.woff │ │ ├── et-book-roman-line-figures │ │ │ ├── et-book-roman-line-figures.eot │ │ │ ├── et-book-roman-line-figures.ttf │ │ │ └── et-book-roman-line-figures.woff │ │ ├── et-book-roman-old-style-figures │ │ │ ├── et-book-roman-old-style-figures.eot │ │ │ ├── et-book-roman-old-style-figures.ttf │ │ │ └── et-book-roman-old-style-figures.woff │ │ ├── et-book-semi-bold-old-style-figures │ │ │ ├── et-book-semi-bold-old-style-figures.eot │ │ │ ├── et-book-semi-bold-old-style-figures.ttf │ │ │ └── et-book-semi-bold-old-style-figures.woff │ │ └── et-book-display-italic-old-style-figures │ │ │ ├── et-book-display-italic-old-style-figures.eot │ │ │ ├── et-book-display-italic-old-style-figures.ttf │ │ │ └── et-book-display-italic-old-style-figures.woff │ ├── latex.css │ ├── tufte-extra.css │ ├── pandoc.css │ ├── pandoc-solarized.css │ ├── tufte.css │ ├── index.md │ └── index.html ├── et-book │ ├── et-book-bold-line-figures │ │ ├── et-book-bold-line-figures.eot │ │ ├── et-book-bold-line-figures.ttf │ │ └── et-book-bold-line-figures.woff │ ├── et-book-roman-line-figures │ │ ├── et-book-roman-line-figures.eot │ │ ├── et-book-roman-line-figures.ttf │ │ └── et-book-roman-line-figures.woff │ ├── et-book-roman-old-style-figures │ │ ├── et-book-roman-old-style-figures.eot │ │ ├── et-book-roman-old-style-figures.ttf │ │ └── et-book-roman-old-style-figures.woff │ ├── et-book-semi-bold-old-style-figures │ │ ├── et-book-semi-bold-old-style-figures.eot │ │ ├── et-book-semi-bold-old-style-figures.ttf │ │ └── et-book-semi-bold-old-style-figures.woff │ └── et-book-display-italic-old-style-figures │ │ ├── et-book-display-italic-old-style-figures.eot │ │ ├── et-book-display-italic-old-style-figures.ttf │ │ └── et-book-display-italic-old-style-figures.woff ├── tufte-extra.css ├── pandoc.css ├── pandoc-solarized.css ├── index.md ├── tufte.css └── index.html ├── .gitignore ├── .gitmodules ├── latex.css ├── Makefile ├── tufte-extra.css ├── tufte.html5 ├── pandoc-solarized.css ├── pandoc.css └── README.md /docs/.nojekyll: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .*.sw[nop] 2 | tags 3 | -------------------------------------------------------------------------------- /docs/tufte-md/img/rhino.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jez/tufte-pandoc-css/HEAD/docs/tufte-md/img/rhino.png -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "tufte-css"] 2 | path = tufte-css 3 | url = https://github.com/edwardtufte/tufte-css.git 4 | -------------------------------------------------------------------------------- /docs/tufte-md/img/exports-imports.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jez/tufte-pandoc-css/HEAD/docs/tufte-md/img/exports-imports.png -------------------------------------------------------------------------------- /docs/tufte-md/img/napoleons-march.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jez/tufte-pandoc-css/HEAD/docs/tufte-md/img/napoleons-march.png -------------------------------------------------------------------------------- /docs/tufte-md/img/imagequilt-animal-sounds.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jez/tufte-pandoc-css/HEAD/docs/tufte-md/img/imagequilt-animal-sounds.png -------------------------------------------------------------------------------- /docs/tufte-md/img/table-example-be-page-159.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jez/tufte-pandoc-css/HEAD/docs/tufte-md/img/table-example-be-page-159.png -------------------------------------------------------------------------------- /docs/tufte-md/img/imagequilt-chinese-calligraphy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jez/tufte-pandoc-css/HEAD/docs/tufte-md/img/imagequilt-chinese-calligraphy.png -------------------------------------------------------------------------------- /docs/et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jez/tufte-pandoc-css/HEAD/docs/et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot -------------------------------------------------------------------------------- /docs/et-book/et-book-bold-line-figures/et-book-bold-line-figures.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jez/tufte-pandoc-css/HEAD/docs/et-book/et-book-bold-line-figures/et-book-bold-line-figures.ttf -------------------------------------------------------------------------------- /docs/et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jez/tufte-pandoc-css/HEAD/docs/et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff -------------------------------------------------------------------------------- /docs/et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jez/tufte-pandoc-css/HEAD/docs/et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot -------------------------------------------------------------------------------- /docs/et-book/et-book-roman-line-figures/et-book-roman-line-figures.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jez/tufte-pandoc-css/HEAD/docs/et-book/et-book-roman-line-figures/et-book-roman-line-figures.ttf -------------------------------------------------------------------------------- /docs/et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jez/tufte-pandoc-css/HEAD/docs/et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff -------------------------------------------------------------------------------- /docs/tufte-md/et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jez/tufte-pandoc-css/HEAD/docs/tufte-md/et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot -------------------------------------------------------------------------------- /docs/tufte-md/et-book/et-book-bold-line-figures/et-book-bold-line-figures.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jez/tufte-pandoc-css/HEAD/docs/tufte-md/et-book/et-book-bold-line-figures/et-book-bold-line-figures.ttf -------------------------------------------------------------------------------- /docs/tufte-md/et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jez/tufte-pandoc-css/HEAD/docs/tufte-md/et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff -------------------------------------------------------------------------------- /docs/et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jez/tufte-pandoc-css/HEAD/docs/et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.eot -------------------------------------------------------------------------------- /docs/et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jez/tufte-pandoc-css/HEAD/docs/et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.ttf -------------------------------------------------------------------------------- /docs/et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jez/tufte-pandoc-css/HEAD/docs/et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.woff -------------------------------------------------------------------------------- /docs/tufte-md/et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jez/tufte-pandoc-css/HEAD/docs/tufte-md/et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot -------------------------------------------------------------------------------- /docs/tufte-md/et-book/et-book-roman-line-figures/et-book-roman-line-figures.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jez/tufte-pandoc-css/HEAD/docs/tufte-md/et-book/et-book-roman-line-figures/et-book-roman-line-figures.ttf -------------------------------------------------------------------------------- /docs/tufte-md/et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jez/tufte-pandoc-css/HEAD/docs/tufte-md/et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff -------------------------------------------------------------------------------- /docs/et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jez/tufte-pandoc-css/HEAD/docs/et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.eot -------------------------------------------------------------------------------- /docs/et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jez/tufte-pandoc-css/HEAD/docs/et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.ttf -------------------------------------------------------------------------------- /docs/et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jez/tufte-pandoc-css/HEAD/docs/et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.woff -------------------------------------------------------------------------------- /docs/tufte-md/et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jez/tufte-pandoc-css/HEAD/docs/tufte-md/et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.eot -------------------------------------------------------------------------------- /docs/tufte-md/et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jez/tufte-pandoc-css/HEAD/docs/tufte-md/et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.ttf -------------------------------------------------------------------------------- /docs/tufte-md/et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jez/tufte-pandoc-css/HEAD/docs/tufte-md/et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.woff -------------------------------------------------------------------------------- /docs/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jez/tufte-pandoc-css/HEAD/docs/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot -------------------------------------------------------------------------------- /docs/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jez/tufte-pandoc-css/HEAD/docs/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.ttf -------------------------------------------------------------------------------- /docs/tufte-md/et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jez/tufte-pandoc-css/HEAD/docs/tufte-md/et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.eot -------------------------------------------------------------------------------- /docs/tufte-md/et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jez/tufte-pandoc-css/HEAD/docs/tufte-md/et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.ttf -------------------------------------------------------------------------------- /docs/tufte-md/et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jez/tufte-pandoc-css/HEAD/docs/tufte-md/et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.woff -------------------------------------------------------------------------------- /docs/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jez/tufte-pandoc-css/HEAD/docs/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff -------------------------------------------------------------------------------- /docs/tufte-md/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jez/tufte-pandoc-css/HEAD/docs/tufte-md/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot -------------------------------------------------------------------------------- /docs/tufte-md/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jez/tufte-pandoc-css/HEAD/docs/tufte-md/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.ttf -------------------------------------------------------------------------------- /docs/tufte-md/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jez/tufte-pandoc-css/HEAD/docs/tufte-md/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff -------------------------------------------------------------------------------- /latex.css: -------------------------------------------------------------------------------- 1 | .latex-sub, .latex-sup { text-transform: uppercase; 2 | font-size: smaller; 3 | position: relative; } 4 | 5 | .latex-sub { top: 0.2rem; 6 | margin-left: -0.1667rem; 7 | margin-right: -0.125rem; } 8 | 9 | .latex-sup { top: -0.2rem; 10 | margin-left: -0.36rem; 11 | margin-right: -0.15rem; 12 | text-shadow: none; } 13 | 14 | .latex::selection, .latex span:not(.latex-sup)::selection { text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, -0.15em 0 #b4d5fe; 15 | background: #b4d5fe; } 16 | 17 | .latex::-moz-selection, .latex span:not(.latex-sup)::-moz-selection { text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, -0.15em 0 #b4d5fe; 18 | background: #b4d5fe; } 19 | -------------------------------------------------------------------------------- /docs/tufte-md/latex.css: -------------------------------------------------------------------------------- 1 | .latex-sub, .latex-sup { text-transform: uppercase; 2 | font-size: smaller; 3 | position: relative; } 4 | 5 | .latex-sub { top: 0.2rem; 6 | margin-left: -0.1667rem; 7 | margin-right: -0.125rem; } 8 | 9 | .latex-sup { top: -0.2rem; 10 | margin-left: -0.36rem; 11 | margin-right: -0.15rem; 12 | text-shadow: none; } 13 | 14 | .latex::selection, .latex span:not(.latex-sup)::selection { text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, -0.15em 0 #b4d5fe; 15 | background: #b4d5fe; } 16 | 17 | .latex::-moz-selection, .latex span:not(.latex-sup)::-moz-selection { text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, -0.15em 0 #b4d5fe; 18 | background: #b4d5fe; } 19 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | # What to compile by default? 2 | SOURCES := docs/index.md \ 3 | docs/tufte-md/index.md 4 | TARGETS := $(patsubst %.md,%.html,$(SOURCES)) 5 | 6 | STYLES := tufte-css/tufte.css \ 7 | pandoc.css \ 8 | pandoc-solarized.css \ 9 | tufte-extra.css 10 | 11 | .PHONY: all 12 | all: $(TARGETS) 13 | 14 | # Note: you will need pandoc 2 or greater for this to work 15 | 16 | ## Generalized rule: how to build a .html file from each .md 17 | %.html: %.md tufte.html5 $(STYLES) 18 | pandoc \ 19 | --katex \ 20 | --section-divs \ 21 | --from markdown+tex_math_single_backslash \ 22 | --lua-filter pandoc-sidenote.lua \ 23 | --to html5+smart \ 24 | --template=tufte \ 25 | $(foreach style,$(STYLES),--css $(notdir $(style))) \ 26 | --output $@ \ 27 | $< 28 | 29 | .PHONY: clean 30 | clean: 31 | rm $(TARGETS) 32 | 33 | # The default tufte.css file expects all the assets to be in the same folder. 34 | # In real life, instead of duplicating the files you'd want to put them in a 35 | # shared "css/" folder or something, and adjust the `--css` flags to the pandoc 36 | # command to give the correct paths to each CSS file. 37 | .PHONY: docs 38 | docs: 39 | cp -r $(STYLES) tufte-css/et-book/ docs/ 40 | cp -r $(STYLES) tufte-css/et-book/ tufte-css/img/ tufte-css/latex.css docs/tufte-md/ 41 | -------------------------------------------------------------------------------- /tufte-extra.css: -------------------------------------------------------------------------------- 1 | /* The default x-height for code is slightly too large in side notes */ 2 | .marginnote code, .sidenote code { 3 | font-size: 0.9rem; 4 | } 5 | 6 | /* ... and slightly too small in body text */ 7 | code { 8 | font-size: 1.05rem; 9 | } 10 | 11 | /* Also make the sidenote numbers hang */ 12 | .sidenote { 13 | text-indent: -0.4rem; 14 | } 15 | .sidenote:before { 16 | /* removes trailing space from the counter content */ 17 | content: counter(sidenote-counter); 18 | left: -0.4rem; 19 | } 20 | 21 | /* To get spacing between lists, use paragraphs. 22 | * 0.25rem of spacing between list elements looks bad. */ 23 | li:not(:first-child) { 24 | margin-top: initial; 25 | } 26 | 27 | /* Prevent superscripts and subscripts from affecting line-height */ 28 | sup, sub { 29 | vertical-align: baseline; 30 | position: relative; 31 | top: -0.4em; 32 | } 33 | sub { 34 | top: 0.4em; 35 | } 36 | 37 | /* Replicate styling from sidenote numbers to footnote numbers */ 38 | a.footnote-ref { 39 | background: unset; 40 | text-shadow: unset; 41 | font-size: 1rem; 42 | position: relative; 43 | top: -0.1rem; 44 | left: 0.1rem; 45 | display: inline; 46 | } 47 | .footnote-ref sup { 48 | font-family: et-book-roman-old-style; 49 | font-size: inherit; 50 | vertical-align: inherit; 51 | line-height: inherit; 52 | } 53 | -------------------------------------------------------------------------------- /tufte.html5: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | $for(author-meta)$ 8 | 9 | $endfor$ 10 | $if(date-meta)$ 11 | 12 | $endif$ 13 | $if(keywords)$ 14 | 15 | $endif$ 16 | $if(title-prefix)$$title-prefix$ – $endif$$pagetitle$ 17 | 18 | $if(quotes)$ 19 | 20 | $endif$ 21 | $if(highlighting-css)$ 22 | 25 | $endif$ 26 | $for(css)$ 27 | 28 | $endfor$ 29 | $if(math)$ 30 | $math$ 31 | $endif$ 32 | 35 | $for(header-includes)$ 36 | $header-includes$ 37 | $endfor$ 38 | 39 | 40 | $for(include-before)$ 41 | $include-before$ 42 | $endfor$ 43 |
44 | $if(title)$ 45 |
46 |

$title$

47 | $if(subtitle)$ 48 |

$subtitle$

49 | $endif$ 50 | $if(date)$ 51 |

$date$$if(author)$ – $author$$endif$

52 | $else$ 53 | $if(author)$ 54 |

$author$

55 | $endif$ 56 | $endif$ 57 |
58 | $endif$ 59 | $if(toc)$ 60 | 63 | $endif$ 64 | $body$ 65 |
66 | $for(include-after)$ 67 | $include-after$ 68 | $endfor$ 69 | 70 | 71 | -------------------------------------------------------------------------------- /docs/tufte-extra.css: -------------------------------------------------------------------------------- 1 | /* The default x-height for code is slightly too large in side notes */ 2 | .marginnote code, .sidenote code { 3 | font-size: 0.9rem; 4 | } 5 | 6 | /* ... and slightly too small in body text */ 7 | code { 8 | font-size: 1.05rem; 9 | } 10 | 11 | /* Also make the sidenote numbers hang */ 12 | .sidenote { 13 | text-indent: -0.4rem; 14 | } 15 | .sidenote:before { 16 | /* removes trailing space from the counter content */ 17 | content: counter(sidenote-counter); 18 | left: -0.4rem; 19 | } 20 | 21 | /* To get spacing between lists, use paragraphs. 22 | * 0.25rem of spacing between list elements looks bad. */ 23 | li:not(:first-child) { 24 | margin-top: initial; 25 | } 26 | 27 | /* To get the pandoc-generated bibliography to match style, define csl classes. */ 28 | div.csl-bib-body { 29 | width: 55%; 30 | } 31 | div.csl-entry { 32 | clear: both; 33 | margin-top: .5rem; 34 | } 35 | .hanging div.csl-entry { 36 | margin-left: 2rem; 37 | text-indent: -2rem; 38 | } 39 | div.csl-left-margin { 40 | min-width: 2rem; 41 | float: left; 42 | } 43 | div.csl-right-inline { 44 | margin-left: 2rem; 45 | padding-left: 1rem; 46 | } 47 | div.csl-indent { 48 | margin-left: 2rem; 49 | } 50 | div.hanging-indent{ 51 | margin-left: 1.5rem; 52 | text-indent: -1.5rem; 53 | } 54 | 55 | @media (max-width: 760px) { 56 | div.csl-bib-body { 57 | width: 100%; 58 | } 59 | } 60 | 61 | /* Prevent superscripts and subscripts from affecting line-height */ 62 | sup, sub { 63 | vertical-align: baseline; 64 | position: relative; 65 | top: -0.4em; 66 | } 67 | sub { 68 | top: 0.4em; 69 | } 70 | 71 | /* Replicate styling from sidenote numbers to footnote numbers */ 72 | a.footnote-ref { 73 | background: unset; 74 | text-shadow: unset; 75 | font-size: 1rem; 76 | position: relative; 77 | top: -0.1rem; 78 | left: 0.1rem; 79 | display: inline; 80 | } 81 | .footnote-ref sup { 82 | font-family: et-book-roman-old-style; 83 | font-size: inherit; 84 | vertical-align: inherit; 85 | line-height: inherit; 86 | } 87 | -------------------------------------------------------------------------------- /docs/tufte-md/tufte-extra.css: -------------------------------------------------------------------------------- 1 | /* The default x-height for code is slightly too large in side notes */ 2 | .marginnote code, .sidenote code { 3 | font-size: 0.9rem; 4 | } 5 | 6 | /* ... and slightly too small in body text */ 7 | code { 8 | font-size: 1.05rem; 9 | } 10 | 11 | /* Also make the sidenote numbers hang */ 12 | .sidenote { 13 | text-indent: -0.4rem; 14 | } 15 | .sidenote:before { 16 | /* removes trailing space from the counter content */ 17 | content: counter(sidenote-counter); 18 | left: -0.4rem; 19 | } 20 | 21 | /* To get spacing between lists, use paragraphs. 22 | * 0.25rem of spacing between list elements looks bad. */ 23 | li:not(:first-child) { 24 | margin-top: initial; 25 | } 26 | 27 | /* To get the pandoc-generated bibliography to match style, define csl classes. */ 28 | div.csl-bib-body { 29 | width: 55%; 30 | } 31 | div.csl-entry { 32 | clear: both; 33 | margin-top: .5rem; 34 | } 35 | .hanging div.csl-entry { 36 | margin-left: 2rem; 37 | text-indent: -2rem; 38 | } 39 | div.csl-left-margin { 40 | min-width: 2rem; 41 | float: left; 42 | } 43 | div.csl-right-inline { 44 | margin-left: 2rem; 45 | padding-left: 1rem; 46 | } 47 | div.csl-indent { 48 | margin-left: 2rem; 49 | } 50 | div.hanging-indent{ 51 | margin-left: 1.5rem; 52 | text-indent: -1.5rem; 53 | } 54 | 55 | @media (max-width: 760px) { 56 | div.csl-bib-body { 57 | width: 100%; 58 | } 59 | } 60 | 61 | /* Prevent superscripts and subscripts from affecting line-height */ 62 | sup, sub { 63 | vertical-align: baseline; 64 | position: relative; 65 | top: -0.4em; 66 | } 67 | sub { 68 | top: 0.4em; 69 | } 70 | 71 | /* Replicate styling from sidenote numbers to footnote numbers */ 72 | a.footnote-ref { 73 | background: unset; 74 | text-shadow: unset; 75 | font-size: 1rem; 76 | position: relative; 77 | top: -0.1rem; 78 | left: 0.1rem; 79 | display: inline; 80 | } 81 | .footnote-ref sup { 82 | font-family: et-book-roman-old-style; 83 | font-size: inherit; 84 | vertical-align: inherit; 85 | line-height: inherit; 86 | } 87 | -------------------------------------------------------------------------------- /docs/pandoc.css: -------------------------------------------------------------------------------- 1 | 2 | /* For smart quotes */ 3 | q { quotes: "“" "”" "‘" "’"; } 4 | 5 | /* Override section behavior. 6 | * We only want the top-level
to have padding. 7 | * This makes it easier to work with --section-divs. */ 8 | section { 9 | padding-top: initial; 10 | padding-bottom: initial; 11 | } 12 | article > section { 13 | padding-top: 1rem; 14 | padding-bottom: 1rem; 15 | } 16 | 17 | /* Make byline (date and/or author) small */ 18 | p.byline { font-size: 1.2rem; } 19 | 20 | 21 | /* Simulate Pandoc's table output styles */ 22 | table { 23 | border-top: 2px solid black; 24 | border-bottom: 2px solid black; 25 | } 26 | th { 27 | border-bottom: 1px solid black; 28 | } 29 | td, th { 30 | font-size: 1.4rem; 31 | padding: 10px; 32 | text-align: left; 33 | } 34 | 35 | /* Allow tables to be full width 36 | * if they're wrapped in a figure.fullwidth 37 | * (Easier to insert from Pandoc than manually adding table) */ 38 | figure.fullwidth table { 39 | width: 90%; 40 | } 41 | 42 | @media (max-width: 760px) { 43 | figure.fullwidth table { 44 | width: 100%; 45 | } 46 | } 47 | 48 | /* Code blocks 49 | * 50 | * Code blocks with a language look like div.sourceCode > pre.sourceCode 51 | * Otherwise, it's just a pre (without .sourceCode) */ 52 | 53 | /* Unset the tufte-css defaults that we'd like to overwrite */ 54 | pre > code { 55 | margin-left: initial; 56 | overflow-x: initial; 57 | display: initial; 58 | } 59 | 60 | .sourceCode.numberLines a:link { 61 | text-decoration: initial; 62 | background: initial; 63 | text-shadow: initial; 64 | } 65 | 66 | div.sourceCode, 67 | pre:not(.sourceCode) { 68 | padding: 1.4rem; 69 | margin: -0.7rem -1.4rem; 70 | width: 55%; 71 | overflow-x: auto; 72 | } 73 | 74 | .fullwidth div.sourceCode, 75 | .fullwidth pre:not(.sourceCode) { 76 | width: 100%; 77 | } 78 | 79 | @media (max-width: 760px) { 80 | div.sourceCode, 81 | pre:not(.sourceCode) { 82 | padding: 1.4rem 8vw; 83 | margin: -0.7rem -8vw; 84 | width: 100%; 85 | } 86 | 87 | .fullwidth { 88 | max-width: 100%; 89 | } 90 | } 91 | 92 | /* Math formatting */ 93 | .katex { 94 | font-size: inherit !important; 95 | } 96 | 97 | /* Wrap long URLs in references */ 98 | #refs a { 99 | word-wrap: break-word; 100 | overflow-wrap: break-word; 101 | } 102 | -------------------------------------------------------------------------------- /docs/tufte-md/pandoc.css: -------------------------------------------------------------------------------- 1 | 2 | /* For smart quotes */ 3 | q { quotes: "“" "”" "‘" "’"; } 4 | 5 | /* Override section behavior. 6 | * We only want the top-level
to have padding. 7 | * This makes it easier to work with --section-divs. */ 8 | section { 9 | padding-top: initial; 10 | padding-bottom: initial; 11 | } 12 | article > section { 13 | padding-top: 1rem; 14 | padding-bottom: 1rem; 15 | } 16 | 17 | /* Make byline (date and/or author) small */ 18 | p.byline { font-size: 1.2rem; } 19 | 20 | 21 | /* Simulate Pandoc's table output styles */ 22 | table { 23 | border-top: 2px solid black; 24 | border-bottom: 2px solid black; 25 | } 26 | th { 27 | border-bottom: 1px solid black; 28 | } 29 | td, th { 30 | font-size: 1.4rem; 31 | padding: 10px; 32 | text-align: left; 33 | } 34 | 35 | /* Allow tables to be full width 36 | * if they're wrapped in a figure.fullwidth 37 | * (Easier to insert from Pandoc than manually adding table) */ 38 | figure.fullwidth table { 39 | width: 90%; 40 | } 41 | 42 | @media (max-width: 760px) { 43 | figure.fullwidth table { 44 | width: 100%; 45 | } 46 | } 47 | 48 | /* Code blocks 49 | * 50 | * Code blocks with a language look like div.sourceCode > pre.sourceCode 51 | * Otherwise, it's just a pre (without .sourceCode) */ 52 | 53 | /* Unset the tufte-css defaults that we'd like to overwrite */ 54 | pre > code { 55 | margin-left: initial; 56 | overflow-x: initial; 57 | display: initial; 58 | } 59 | 60 | .sourceCode.numberLines a:link { 61 | text-decoration: initial; 62 | background: initial; 63 | text-shadow: initial; 64 | } 65 | 66 | div.sourceCode, 67 | pre:not(.sourceCode) { 68 | padding: 1.4rem; 69 | margin: -0.7rem -1.4rem; 70 | width: 55%; 71 | overflow-x: auto; 72 | } 73 | 74 | .fullwidth div.sourceCode, 75 | .fullwidth pre:not(.sourceCode) { 76 | width: 100%; 77 | } 78 | 79 | @media (max-width: 760px) { 80 | div.sourceCode, 81 | pre:not(.sourceCode) { 82 | padding: 1.4rem 8vw; 83 | margin: -0.7rem -8vw; 84 | width: 100%; 85 | } 86 | 87 | .fullwidth { 88 | max-width: 100%; 89 | } 90 | } 91 | 92 | /* Math formatting */ 93 | .katex { 94 | font-size: inherit !important; 95 | } 96 | 97 | /* Wrap long URLs in references */ 98 | #refs a { 99 | word-wrap: break-word; 100 | overflow-wrap: break-word; 101 | } 102 | -------------------------------------------------------------------------------- /pandoc-solarized.css: -------------------------------------------------------------------------------- 1 | div.sourceCode, pre:not(.sourceCode) { background: #FDF6E3; } 2 | pre code { color: #657B83; } 3 | code span.kw { color: #859900; font-weight: normal; font-style: normal; } /* Keyword */ 4 | code span.dt { color: #B58900; font-weight: normal; font-style: normal; } /* DataType */ 5 | code span.dv { color: #2AA198; font-weight: normal; font-style: normal; } /* DecVal */ 6 | code span.bn { color: #2AA198; font-weight: normal; font-style: normal; } /* BaseN */ 7 | code span.fl { color: #2AA198; font-weight: normal; font-style: normal; } /* Float */ 8 | code span.ch { color: #2AA198; font-weight: normal; font-style: normal; } /* Char */ 9 | code span.st { color: #2AA198; font-weight: normal; font-style: normal; } /* String */ 10 | code span.co { color: #93A1A1; font-weight: normal; font-style: italic; } /* Comment */ 11 | code span.ot { color: #268BD2; font-weight: normal; font-style: normal; } /* Other */ 12 | code span.al { color: #DC322F; font-weight: normal; font-style: normal; } /* Alert */ 13 | code span.fu { color: #268BD2; font-weight: normal; font-style: normal; } /* Function */ 14 | code span.er { color: #DC322F; font-weight: normal; font-style: normal; } /* Error */ 15 | code span.wa { color: #CB4B16; font-weight: normal; font-style: italic; } /* Warning */ 16 | code span.cn { color: #2AA198; font-weight: normal; font-style: normal; } /* Constant */ 17 | code span.sc { color: #DC322F; font-weight: normal; font-style: normal; } /* SpecialChar */ 18 | code span.vs { color: #657B83; font-weight: normal; font-style: normal; } /* VerbatimString */ 19 | code span.ss { color: #DC322F; font-weight: normal; font-style: normal; } /* SpecialString */ 20 | code span.im { color: #657B83; font-weight: normal; font-style: normal; } /* Import */ 21 | code span.va { color: #268BD2; font-weight: normal; font-style: normal; } /* Variable */ 22 | code span.cf { color: #859900; font-weight: normal; font-style: normal; } /* ControlFlow */ 23 | code span.op { color: #859900; font-weight: normal; font-style: normal; } /* Operator */ 24 | code span.bu { color: #657B83; font-weight: normal; font-style: normal; } /* BuiltIn */ 25 | code span.ex { color: #657B83; font-weight: normal; font-style: normal; } /* Extension */ 26 | code span.pp { color: #CB4B16; font-weight: normal; font-style: normal; } /* Preprocessor */ 27 | code span.at { color: #657B83; font-weight: normal; font-style: normal; } /* Attribute */ 28 | code span.do { color: #93A1A1; font-weight: normal; font-style: italic; } /* Documentation */ 29 | code span.an { color: #93A1A1; font-weight: normal; font-style: italic; } /* Annotation */ 30 | code span.cv { color: #93A1A1; font-weight: normal; font-style: italic; } /* CommentVar */ 31 | code span.in { color: #93A1A1; font-weight: normal; font-style: italic; } /* Information */ 32 | a.sourceLine::before { text-decoration: none; } 33 | -------------------------------------------------------------------------------- /docs/pandoc-solarized.css: -------------------------------------------------------------------------------- 1 | div.sourceCode, pre:not(.sourceCode) { background: #FDF6E3; } 2 | pre code { color: #657B83; } 3 | code span.kw { color: #859900; font-weight: normal; font-style: normal; } /* Keyword */ 4 | code span.dt { color: #B58900; font-weight: normal; font-style: normal; } /* DataType */ 5 | code span.dv { color: #2AA198; font-weight: normal; font-style: normal; } /* DecVal */ 6 | code span.bn { color: #2AA198; font-weight: normal; font-style: normal; } /* BaseN */ 7 | code span.fl { color: #2AA198; font-weight: normal; font-style: normal; } /* Float */ 8 | code span.ch { color: #2AA198; font-weight: normal; font-style: normal; } /* Char */ 9 | code span.st { color: #2AA198; font-weight: normal; font-style: normal; } /* String */ 10 | code span.co { color: #93A1A1; font-weight: normal; font-style: italic; } /* Comment */ 11 | code span.ot { color: #268BD2; font-weight: normal; font-style: normal; } /* Other */ 12 | code span.al { color: #DC322F; font-weight: normal; font-style: normal; } /* Alert */ 13 | code span.fu { color: #268BD2; font-weight: normal; font-style: normal; } /* Function */ 14 | code span.er { color: #DC322F; font-weight: normal; font-style: normal; } /* Error */ 15 | code span.wa { color: #CB4B16; font-weight: normal; font-style: italic; } /* Warning */ 16 | code span.cn { color: #2AA198; font-weight: normal; font-style: normal; } /* Constant */ 17 | code span.sc { color: #DC322F; font-weight: normal; font-style: normal; } /* SpecialChar */ 18 | code span.vs { color: #657B83; font-weight: normal; font-style: normal; } /* VerbatimString */ 19 | code span.ss { color: #DC322F; font-weight: normal; font-style: normal; } /* SpecialString */ 20 | code span.im { color: #657B83; font-weight: normal; font-style: normal; } /* Import */ 21 | code span.va { color: #268BD2; font-weight: normal; font-style: normal; } /* Variable */ 22 | code span.cf { color: #859900; font-weight: normal; font-style: normal; } /* ControlFlow */ 23 | code span.op { color: #859900; font-weight: normal; font-style: normal; } /* Operator */ 24 | code span.bu { color: #657B83; font-weight: normal; font-style: normal; } /* BuiltIn */ 25 | code span.ex { color: #657B83; font-weight: normal; font-style: normal; } /* Extension */ 26 | code span.pp { color: #CB4B16; font-weight: normal; font-style: normal; } /* Preprocessor */ 27 | code span.at { color: #657B83; font-weight: normal; font-style: normal; } /* Attribute */ 28 | code span.do { color: #93A1A1; font-weight: normal; font-style: italic; } /* Documentation */ 29 | code span.an { color: #93A1A1; font-weight: normal; font-style: italic; } /* Annotation */ 30 | code span.cv { color: #93A1A1; font-weight: normal; font-style: italic; } /* CommentVar */ 31 | code span.in { color: #93A1A1; font-weight: normal; font-style: italic; } /* Information */ 32 | a.sourceLine::before { text-decoration: none; } 33 | -------------------------------------------------------------------------------- /docs/tufte-md/pandoc-solarized.css: -------------------------------------------------------------------------------- 1 | div.sourceCode, pre:not(.sourceCode) { background: #FDF6E3; } 2 | pre code { color: #657B83; } 3 | code span.kw { color: #859900; font-weight: normal; font-style: normal; } /* Keyword */ 4 | code span.dt { color: #B58900; font-weight: normal; font-style: normal; } /* DataType */ 5 | code span.dv { color: #2AA198; font-weight: normal; font-style: normal; } /* DecVal */ 6 | code span.bn { color: #2AA198; font-weight: normal; font-style: normal; } /* BaseN */ 7 | code span.fl { color: #2AA198; font-weight: normal; font-style: normal; } /* Float */ 8 | code span.ch { color: #2AA198; font-weight: normal; font-style: normal; } /* Char */ 9 | code span.st { color: #2AA198; font-weight: normal; font-style: normal; } /* String */ 10 | code span.co { color: #93A1A1; font-weight: normal; font-style: italic; } /* Comment */ 11 | code span.ot { color: #268BD2; font-weight: normal; font-style: normal; } /* Other */ 12 | code span.al { color: #DC322F; font-weight: normal; font-style: normal; } /* Alert */ 13 | code span.fu { color: #268BD2; font-weight: normal; font-style: normal; } /* Function */ 14 | code span.er { color: #DC322F; font-weight: normal; font-style: normal; } /* Error */ 15 | code span.wa { color: #CB4B16; font-weight: normal; font-style: italic; } /* Warning */ 16 | code span.cn { color: #2AA198; font-weight: normal; font-style: normal; } /* Constant */ 17 | code span.sc { color: #DC322F; font-weight: normal; font-style: normal; } /* SpecialChar */ 18 | code span.vs { color: #657B83; font-weight: normal; font-style: normal; } /* VerbatimString */ 19 | code span.ss { color: #DC322F; font-weight: normal; font-style: normal; } /* SpecialString */ 20 | code span.im { color: #657B83; font-weight: normal; font-style: normal; } /* Import */ 21 | code span.va { color: #268BD2; font-weight: normal; font-style: normal; } /* Variable */ 22 | code span.cf { color: #859900; font-weight: normal; font-style: normal; } /* ControlFlow */ 23 | code span.op { color: #859900; font-weight: normal; font-style: normal; } /* Operator */ 24 | code span.bu { color: #657B83; font-weight: normal; font-style: normal; } /* BuiltIn */ 25 | code span.ex { color: #657B83; font-weight: normal; font-style: normal; } /* Extension */ 26 | code span.pp { color: #CB4B16; font-weight: normal; font-style: normal; } /* Preprocessor */ 27 | code span.at { color: #657B83; font-weight: normal; font-style: normal; } /* Attribute */ 28 | code span.do { color: #93A1A1; font-weight: normal; font-style: italic; } /* Documentation */ 29 | code span.an { color: #93A1A1; font-weight: normal; font-style: italic; } /* Annotation */ 30 | code span.cv { color: #93A1A1; font-weight: normal; font-style: italic; } /* CommentVar */ 31 | code span.in { color: #93A1A1; font-weight: normal; font-style: italic; } /* Information */ 32 | a.sourceLine::before { text-decoration: none; } 33 | -------------------------------------------------------------------------------- /pandoc.css: -------------------------------------------------------------------------------- 1 | 2 | /* For smart quotes */ 3 | q { quotes: "“" "”" "‘" "’"; } 4 | 5 | /* Override section behavior. 6 | * We only want the top-level
to have padding. 7 | * This makes it easier to work with --section-divs. */ 8 | section { 9 | padding-top: initial; 10 | padding-bottom: initial; 11 | } 12 | article > section { 13 | padding-top: 1rem; 14 | padding-bottom: 1rem; 15 | } 16 | 17 | /* Make byline (date and/or author) small */ 18 | p.byline { font-size: 1.2rem; } 19 | 20 | 21 | /* Simulate Pandoc's table output styles */ 22 | table { 23 | border-top: 2px solid black; 24 | border-bottom: 2px solid black; 25 | } 26 | th { 27 | border-bottom: 1px solid black; 28 | } 29 | td, th { 30 | font-size: 1.4rem; 31 | padding: 10px; 32 | text-align: left; 33 | } 34 | 35 | /* Allow tables to be full width 36 | * if they're wrapped in a figure.fullwidth 37 | * (Easier to insert from Pandoc than manually adding table) */ 38 | figure.fullwidth table { 39 | width: 90%; 40 | } 41 | 42 | @media (max-width: 760px) { 43 | figure.fullwidth table { 44 | width: 100%; 45 | } 46 | } 47 | 48 | /* Code blocks 49 | * 50 | * Code blocks with a language look like div.sourceCode > pre.sourceCode 51 | * Otherwise, it's just a pre (without .sourceCode) */ 52 | 53 | /* Unset the tufte-css defaults that we'd like to overwrite */ 54 | pre > code { 55 | margin-left: initial; 56 | overflow-x: initial; 57 | display: initial; 58 | } 59 | 60 | .sourceCode.numberLines a:link { 61 | text-decoration: initial; 62 | background: initial; 63 | text-shadow: initial; 64 | } 65 | 66 | div.sourceCode, 67 | pre:not(.sourceCode) { 68 | padding: 1.4rem; 69 | margin: -0.7rem -1.4rem; 70 | width: 55%; 71 | overflow-x: auto; 72 | } 73 | 74 | .fullwidth div.sourceCode, 75 | .fullwidth pre:not(.sourceCode) { 76 | width: 100%; 77 | } 78 | 79 | @media (max-width: 760px) { 80 | div.sourceCode, 81 | pre:not(.sourceCode) { 82 | padding: 1.4rem 8vw; 83 | margin: -0.7rem -8vw; 84 | width: 100%; 85 | } 86 | 87 | .fullwidth { 88 | max-width: 100%; 89 | } 90 | } 91 | 92 | /* Math formatting */ 93 | .katex { 94 | font-size: inherit !important; 95 | } 96 | 97 | /* Wrap long URLs in references */ 98 | #refs a { 99 | word-wrap: break-word; 100 | overflow-wrap: break-word; 101 | } 102 | 103 | /* To get the pandoc-generated bibliography to match style, define csl classes. */ 104 | div.csl-bib-body { 105 | width: 55%; 106 | } 107 | div.csl-entry { 108 | clear: both; 109 | margin-top: .5rem; 110 | } 111 | .hanging div.csl-entry { 112 | margin-left: 2rem; 113 | text-indent: -2rem; 114 | } 115 | div.csl-left-margin { 116 | min-width: 2rem; 117 | float: left; 118 | } 119 | div.csl-right-inline { 120 | margin-left: 2rem; 121 | padding-left: 1rem; 122 | } 123 | div.csl-indent { 124 | margin-left: 2rem; 125 | } 126 | div.hanging-indent{ 127 | margin-left: 1.5rem; 128 | text-indent: -1.5rem; 129 | } 130 | 131 | @media (max-width: 760px) { 132 | div.csl-bib-body { 133 | width: 100%; 134 | } 135 | } 136 | 137 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Tufte Pandoc CSS 2 | 3 | > Starter files for using Pandoc Markdown with Tufte CSS 4 | 5 | This project aims to provide a standard set of project starter files for working 6 | with [Pandoc] and [Tufte CSS]. It features: 7 | 8 | - extra CSS styles for things like tables and syntax highlighted code 9 | - tweaks to the CSS to get HTML produced by Pandoc to play nicely with Tufte CSS 10 | - an optional Solarized light color scheme for code blocks 11 | - a modular separation of these components--you can select which you want 12 | - an HTML5 template file that sets up the document the way Tufte CSS expects 13 | - support for lots of Pandoc markdown features, including 14 | - footnotes as side notes 15 | - footnotes as margin notes 16 | - metadata like `title`, `subtitle`, `date`, and `author` 17 | - LaTeX using MathJax or KaTeX 18 | 19 | Apart from projects like Tufte CSS & Pandoc, the main project that enables this 20 | project is [`pandoc-sidenote`], a project which converts Pandoc Markdown-style 21 | footnotes (`[^1]`) into side notes. 22 | 23 | > ### Looking to use this with Jekyll? 24 | > 25 | > You might be interested in [Tufte Pandoc Jekyll], which wraps the files 26 | > distributed here into a Jekyll gem-based theme. 27 | > 28 | > ### Looking for the same features, but a different look? 29 | > 30 | > You might be interested in [Pandoc Markdown CSS Theme], a theme with much of 31 | > the same features as this theme, but with a more easily customizable look. 32 | 33 | 34 | 35 | ## Table of Contents 36 | 37 | - [Background](#background) 38 | - [Installation](#installation) 39 | - [Usage](#usage) 40 | - [License](#license) 41 | 42 | 43 | 44 | 45 | ## Background 46 | 47 | If you haven't already, I encourage you to explore the projects that have been 48 | built on top of here: 49 | 50 | - [Pandoc] - a universal document converter 51 | - [Tufte CSS] - style your webpage like Edward Tufte's handouts 52 | - [`pandoc-sidenote`] - convert Pandoc Markdown-style footnotes into sidenotes 53 | 54 | 55 | ## Installation 56 | 57 | > ### Dependencies 58 | > 59 | > This project is always tested relative to: 60 | > 61 | > - the most recent `master` commit of [`tufte-css`]. 62 | > - the latest release version of pandoc 63 | > 64 | > In particular, you'll need at least Pandoc version 2.0. 65 | 66 | This project is meant to be a set of *starter* files for your next project. What 67 | that ultimately means is that you should use these files however your heart sees 68 | fit. In practice, here are some tips for some things you may want to do to get 69 | set up. 70 | 71 | First, install `pandoc-sidenote`. 72 | 73 | - This lets `pandoc` compile footnotes into sidenotes. 74 | - Instructions are on the [`pandoc-sidenote`] homepage. 75 | 76 | Second, download `tufte.css` and the `et-book/` font folder. 77 | 78 | - Head over to [`tufte-css`] to download these. 79 | - You should be able to work with any version of Tufte CSS, assuming things 80 | haven't changed too much. 81 | - If things don't seem to be working, try using the version stashed in the 82 | `tufte-css/` folder in this repo (it's a submodule). 83 | 84 | Third, there are a number of static files you can download and place where you 85 | see fit: 86 | 87 | - `tufte.html5` 88 | - This is an HTML5 compatible template for use with Pandoc's `--template` 89 | flag. 90 | - It sets up the document structure in a way Tufte CSS expects. 91 | - `pandoc.css` 92 | - This CSS file has styles for things like sections, author & date 93 | information, highlighted code blocks, and tables. 94 | - `pandoc-solarized.css` (optional) 95 | - This sets up highlighted code blocks to use the Solarized Light color theme 96 | - `tufte-extra.css` (optional) 97 | - This makes some "personal preference" tweaks to Tufte CSS. It is NOT 98 | required. 99 | 100 | Finally, you'll want the `Makefile`. 101 | 102 | - The Makefile usage is explained below. 103 | 104 | 105 | ## Usage 106 | 107 | The best way to learn to use this project is to read the documentation--both 108 | online and in the source code. You'll probably want to look through things in 109 | this order 110 | 111 | 1. The [re-implementation of the Tufte CSS][tufte-md] homepage in Pandoc Markdown 112 | - Remember to read the [source][tufte-md-src]! 113 | 1. The [Tufte Pandoc CSS homepage], which documents the additional features 114 | specific to this project. 115 | - Remember to read the [source][homepage-src]! 116 | 1. The included [Makefile], which compiles `*.md` files into `*.html` files 117 | using `pandoc` with the correct options. 118 | 1. The [Pandoc] homepage. Not everything you see here will work with this 119 | project, but if you think something should work that doesn't, open an issue. 120 | - You'll probably want to just skim this... it's lengthy! 121 | 122 | Once you have an understanding of what Markdown features are available, you can 123 | use the Makefile to compile your Markdown files. 124 | 125 | For example, this is how we build the homepage for this site: 126 | 127 | ``` 128 | make docs/index.md 129 | ``` 130 | 131 | and here's how we build all the site files: 132 | 133 | ``` 134 | make docs 135 | make 136 | ``` 137 | 138 | Assuming you've laid out your directory identically to this repo, you can pass 139 | the name of any `*.md` file to convert it into an appropriately named `*.html` 140 | file. 141 | 142 | ``` 143 | make my-pandoc-markdown-file.md 144 | ``` 145 | 146 | 147 | ## License 148 | 149 | [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://jez.io/MIT-LICENSE.txt) 150 | 151 | 152 | [Pandoc]: http://pandoc.org 153 | [Tufte CSS]: https://edwardtufte.github.io/tufte-css/ 154 | [`tufte-css`]: https://github.com/edwardtufte/tufte-css 155 | [`pandoc-sidenote`]: https://github.com/jez/pandoc-sidenote 156 | [tufte-md]: https://jez.io/tufte-pandoc-css/tufte-md/ 157 | [Tufte Pandoc CSS homepage]: https://jez.io/tufte-pandoc-css/ 158 | [Tufte Pandoc Jekyll]: https://github.com/jez/tufte-pandoc-jekyll 159 | [Pandoc Markdown CSS Theme]: https://github.com/jez/pandoc-markdown-css-theme 160 | [tufte-md-src]: docs/tufte-md/index.md 161 | [homepage-src]: docs/index.md 162 | [`Makefile`]: Makefile 163 | -------------------------------------------------------------------------------- /docs/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Tufte Pandoc CSS 3 | subtitle: Starter files for Pandoc Markdown with Tufte CSS 4 | author: Jake Zimmerman 5 | date: 'November 3, 2016' 6 | --- 7 | 8 |
9 | 10 | Tufte Pandoc CSS is an attempt to make it as easy as possible to get started 11 | using [Tufte CSS][^tufte-css] to write content. It does this by leveraging 12 | Pandoc Markdown's existing features, along with a few new ones implemented as 13 | a [JSON filter]. 14 | 15 | [^tufte-css]: 16 | {-} If you've never heard of Tufte CSS before, take a second to check it out! 17 | 18 |
19 | 20 | 21 | ## Sidenotes in Markdown 22 | 23 |
24 | > Tufte CSS provides tools to style web articles using the ideas demonstrated by 25 | > Edward Tufte's books and handouts. Tufte's style is known for its simplicity, 26 | > extensive use of sidenotes, tight integration of graphics with text, and 27 | > carefully chosen typography. 28 | > 29 | >
30 | > Dave Liepmann, [Tufte CSS] 31 | >
32 |
33 | 34 | Tufte Pandoc CSS aims to be a set of *starter files* for your next project. What 35 | that means is that it provides a number of CSS files, a Pandoc template, a 36 | Makefile, and more to make it as easy as possible to write Markdown using Tufte 37 | CSS. 38 | 39 | The biggest barrier that this project overcomes is that Pandoc Markdown doesn't 40 | support side notes nor margin notes by default. This project adds that 41 | functionality.[^pdsn] Here's how you can use them: 42 | 43 | [^pdsn]: In particular, a separate library called [`pandoc-sidenote`] handles 44 | the transformation of footnotes into sidenotes. 45 | 46 | ```markdown 47 | ... In print, Tufte has used the proprietary Monotype 48 | Bembo[^note] font. ... 49 | 50 | [^note]: 51 | See Tufte's comment in the Tufte book fonts thread. 52 | ``` 53 | 54 | By default, if you use the normal Pandoc syntax for creating footnotes, they'll 55 | become Tufte CSS-style side notes. To get margin notes (i.e., side notes without 56 | numbers), just include `{-}` at the beginning of the note: 57 | 58 |
59 | ```markdown 60 | ... If you want a sidenote without footnote-style numberings, then you want a 61 | margin note.[^mn] On large screens, ... 62 | 63 | [^mn]: 64 | {-} This is a margin note. Notice there isn't a number preceding the note. 65 | ``` 66 |
67 | 68 | 69 | ## Syntax-Highlighted Codeblocks 70 | 71 | Pandoc Markdown is excellent for styling code blocks. Indeed, you've already 72 | seen their effect in this document. You can use any of the methods for creating 73 | syntax highlighted code blocks Pandoc permits. For example: 74 | 75 | ~~~python 76 | # Compute elements of the mandelbrot set 77 | def mandelbrot(a): 78 | return reduce(lambda z, _: z * z + a, range(50), 0) 79 | 80 | def step(start, step, iterations): 81 | return (start + (i * step) for i in range(iterations)) 82 | 83 | rows = (("*" if abs(mandelbrot(complex(x, y))) < 2 else " " 84 | for x in step(-2.0, .0315, 80)) 85 | for y in step(1, -.05, 41)) 86 | ~~~ 87 | 88 | In this document, you're also seeing the effect of the Solarized color scheme. 89 | You can use any of the color schemes Pandoc ships with by default, or this one. 90 | 91 | Another feature Pandoc allows that Tufte Pandoc CSS supports is generating line 92 | numbers to accompany a code sample: 93 | 94 | ```{.haskell .numberLines} 95 | merge [] ys = ys 96 | merge xs [] = xs 97 | merge xs@(x:xt) ys@(y:yt) | x <= y = x : merge xt ys 98 | | otherwise = y : merge xs yt 99 | 100 | split (x:y:zs) = let (xs,ys) = split zs in (x:xs,y:ys) 101 | split [x] = ([x],[]) 102 | split [] = ([],[]) 103 | 104 | mergeSort [] = [] 105 | mergeSort [x] = [x] 106 | mergeSort xs = let (as,bs) = split xs 107 | in merge (mergeSort as) (mergeSort bs) 108 | ``` 109 | 110 | 111 | ## Figures & Sections 112 | 113 | Unfortunately, HTML figures and sections don't have special Markdown syntax. To 114 | include them in your document, you'll have to use the raw HTML. On the bright 115 | side, this usually ends up being pretty painless. 116 | 117 | In particular for sections, if you're satisfied with the top-most headings being 118 | wrapped in `
` tags, you can use the `--section-divs` flag to `pandoc` 119 | to automatically wrap sections in divs. This is already enabled in the Makefile 120 | we ship with this project. Regardless, if you have any leading text before your 121 | first heading, you will need to wrap this text in a `
` tag. 122 | 123 | Tufte Pandoc CSS improves support for full-width tables and code blocks. Special 124 | attention has been given to ensure that they're fully responsive at all 125 | viewports, just like normal full-width figures. Here's a sample full-width 126 | table: 127 | 128 |
129 | 130 | | Talk | Speaker | Time | 131 | | ---- | ------- | ---- | 132 | | HTML/CSS Primer | Scott Krulcik | 1:30 p.m. -- 3:00 p.m. | 133 | | JavaScript Primer | Jake Zimmerman | 3:00 p.m. -- 4:30 p.m. | 134 | | UX Prototyping with Framer.js | Lois Yang | 4:30 p.m. -- 6:00 p.m. | 135 | | Frontend Development with Angular.js | Sandra Sajeev | 6:30 p.m. -- 8:00 p.m. | 136 | 137 |
138 | 139 | As one last quick note: the original Tufte CSS recommends that you always wrap 140 | images in `
` tags for optimal responsiveness and layout. Depending on 141 | your tastes, you **can** choose to omit this. The differences will only take 142 | effect on mobile, where the width of the image will be slightly different from 143 | what it would be if it were properly wrapped. Try it both ways and see whether 144 | you value the convenience of no wrapping or the proper layout that a `
` 145 | provides. 146 | 147 | 148 | ## Installation & Usage 149 | 150 | As mentioned above, Tufte Pandoc CSS is designed to be a collection of starter 151 | files to help you with your next Markdown project. You can learn what files and 152 | tools are available on the [GitHub repository]. 153 | 154 | As for usage, you are strongly encouraged to look at the [source of this 155 | document][this-md]. There's also an HTML-to-Markdown port of [the original 156 | Tufte CSS page] along with the accompanying [source][original-md]. 157 | 158 | One goal of this project is to support as many of the features you'd "expect" to 159 | work that are available in Pandoc. If your favorite feature doesn't work, let us 160 | know [with an issue]. 161 | 162 | 163 | 164 | 165 | [Tufte CSS]: https://edwardtufte.github.io/tufte-css/ 166 | [JSON filter]: http://pandoc.org/scripting.html#json-filters 167 | [`pandoc-sidenote`]: https://github.com/jez/pandoc-sidenote 168 | [GitHub repository]: https://github.com/jez/tufte-pandoc-css 169 | [this-md]: https://raw.githubusercontent.com/jez/tufte-pandoc-css/master/docs/index.md 170 | [the original Tufte CSS page]: tufte-md/ 171 | [original-md]: https://raw.githubusercontent.com/jez/tufte-pandoc-css/master/docs/tufte-md/index.md 172 | [with an issue]: https://github.com/jez/tufte-pandoc-css/issues 173 | -------------------------------------------------------------------------------- /docs/tufte.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /* Import ET Book styles 4 | adapted from https://github.com/edwardtufte/et-book/blob/gh-pages/et-book.css */ 5 | 6 | @font-face { 7 | font-family: "et-book"; 8 | src: url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot"); 9 | src: url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot?#iefix") format("embedded-opentype"), url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff") format("woff"), url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.ttf") format("truetype"), url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.svg#etbookromanosf") format("svg"); 10 | font-weight: normal; 11 | font-style: normal; 12 | font-display: swap; 13 | } 14 | 15 | @font-face { 16 | font-family: "et-book"; 17 | src: url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot"); 18 | src: url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot?#iefix") format("embedded-opentype"), url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff") format("woff"), url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.ttf") format("truetype"), url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.svg#etbookromanosf") format("svg"); 19 | font-weight: normal; 20 | font-style: italic; 21 | font-display: swap; 22 | } 23 | 24 | @font-face { 25 | font-family: "et-book"; 26 | src: url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot"); 27 | src: url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot?#iefix") format("embedded-opentype"), url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff") format("woff"), url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.ttf") format("truetype"), url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.svg#etbookromanosf") format("svg"); 28 | font-weight: bold; 29 | font-style: normal; 30 | font-display: swap; 31 | } 32 | 33 | @font-face { 34 | font-family: "et-book-roman-old-style"; 35 | src: url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.eot"); 36 | src: url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.eot?#iefix") format("embedded-opentype"), url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.woff") format("woff"), url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.ttf") format("truetype"), url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.svg#etbookromanosf") format("svg"); 37 | font-weight: normal; 38 | font-style: normal; 39 | font-display: swap; 40 | } 41 | 42 | /* Tufte CSS styles */ 43 | html { 44 | font-size: 15px; 45 | } 46 | 47 | body { 48 | width: 87.5%; 49 | margin-left: auto; 50 | margin-right: auto; 51 | padding-left: 12.5%; 52 | font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif; 53 | background-color: #fffff8; 54 | color: #111; 55 | max-width: 1400px; 56 | counter-reset: sidenote-counter; 57 | } 58 | 59 | h1 { 60 | font-weight: 400; 61 | margin-top: 4rem; 62 | margin-bottom: 1.5rem; 63 | font-size: 3.2rem; 64 | line-height: 1; 65 | } 66 | 67 | h2 { 68 | font-style: italic; 69 | font-weight: 400; 70 | margin-top: 2.1rem; 71 | margin-bottom: 1.4rem; 72 | font-size: 2.2rem; 73 | line-height: 1; 74 | } 75 | 76 | h3 { 77 | font-style: italic; 78 | font-weight: 400; 79 | font-size: 1.7rem; 80 | margin-top: 2rem; 81 | margin-bottom: 1.4rem; 82 | line-height: 1; 83 | } 84 | 85 | hr { 86 | display: block; 87 | height: 1px; 88 | width: 55%; 89 | border: 0; 90 | border-top: 1px solid #ccc; 91 | margin: 1em 0; 92 | padding: 0; 93 | } 94 | 95 | p.subtitle { 96 | font-style: italic; 97 | margin-top: 1rem; 98 | margin-bottom: 1rem; 99 | font-size: 1.8rem; 100 | display: block; 101 | line-height: 1; 102 | } 103 | 104 | .numeral { 105 | font-family: et-book-roman-old-style; 106 | } 107 | 108 | .danger { 109 | color: red; 110 | } 111 | 112 | article { 113 | padding: 5rem 0rem; 114 | } 115 | 116 | section { 117 | padding-top: 1rem; 118 | padding-bottom: 1rem; 119 | } 120 | 121 | p, 122 | dl, 123 | ol, 124 | ul { 125 | font-size: 1.4rem; 126 | line-height: 2rem; 127 | } 128 | 129 | p { 130 | margin-top: 1.4rem; 131 | margin-bottom: 1.4rem; 132 | padding-right: 0; 133 | vertical-align: baseline; 134 | } 135 | 136 | /* Chapter Epigraphs */ 137 | div.epigraph { 138 | margin: 5em 0; 139 | } 140 | 141 | div.epigraph > blockquote { 142 | margin-top: 3em; 143 | margin-bottom: 3em; 144 | } 145 | 146 | div.epigraph > blockquote, 147 | div.epigraph > blockquote > p { 148 | font-style: italic; 149 | } 150 | 151 | div.epigraph > blockquote > footer { 152 | font-style: normal; 153 | } 154 | 155 | div.epigraph > blockquote > footer > cite { 156 | font-style: italic; 157 | } 158 | /* end chapter epigraphs styles */ 159 | 160 | blockquote { 161 | font-size: 1.4rem; 162 | } 163 | 164 | blockquote p { 165 | width: 55%; 166 | margin-right: 40px; 167 | } 168 | 169 | blockquote footer { 170 | width: 55%; 171 | font-size: 1.1rem; 172 | text-align: right; 173 | } 174 | 175 | section > p, 176 | section > footer, 177 | section > table { 178 | width: 55%; 179 | } 180 | 181 | /* 50 + 5 == 55, to be the same width as paragraph */ 182 | section > dl, 183 | section > ol, 184 | section > ul { 185 | width: 50%; 186 | -webkit-padding-start: 5%; 187 | } 188 | 189 | dt:not(:first-child), 190 | li:not(:first-child) { 191 | margin-top: 0.25rem; 192 | } 193 | 194 | figure { 195 | padding: 0; 196 | border: 0; 197 | font-size: 100%; 198 | font: inherit; 199 | vertical-align: baseline; 200 | max-width: 55%; 201 | -webkit-margin-start: 0; 202 | -webkit-margin-end: 0; 203 | margin: 0 0 3em 0; 204 | } 205 | 206 | figcaption { 207 | float: right; 208 | clear: right; 209 | margin-top: 0; 210 | margin-bottom: 0; 211 | font-size: 1.1rem; 212 | line-height: 1.6; 213 | vertical-align: baseline; 214 | position: relative; 215 | max-width: 40%; 216 | } 217 | 218 | figure.fullwidth figcaption { 219 | margin-right: 24%; 220 | } 221 | 222 | /* Links: replicate underline that clears descenders */ 223 | a:link, 224 | a:visited { 225 | color: inherit; 226 | } 227 | 228 | .no-tufte-underline:link { 229 | background: unset; 230 | text-shadow: unset; 231 | } 232 | 233 | a:link, .tufte-underline, .hover-tufte-underline:hover { 234 | text-decoration: none; 235 | background: -webkit-linear-gradient(#fffff8, #fffff8), -webkit-linear-gradient(#fffff8, #fffff8), -webkit-linear-gradient(currentColor, currentColor); 236 | background: linear-gradient(#fffff8, #fffff8), linear-gradient(#fffff8, #fffff8), linear-gradient(currentColor, currentColor); 237 | -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px; 238 | -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px; 239 | background-size: 0.05em 1px, 0.05em 1px, 1px 1px; 240 | background-repeat: no-repeat, no-repeat, repeat-x; 241 | text-shadow: 0.03em 0 #fffff8, -0.03em 0 #fffff8, 0 0.03em #fffff8, 0 -0.03em #fffff8, 0.06em 0 #fffff8, -0.06em 0 #fffff8, 0.09em 0 #fffff8, -0.09em 0 #fffff8, 0.12em 0 #fffff8, -0.12em 0 #fffff8, 0.15em 0 #fffff8, -0.15em 0 #fffff8; 242 | background-position: 0% 93%, 100% 93%, 0% 93%; 243 | } 244 | 245 | @media screen and (-webkit-min-device-pixel-ratio: 0) { 246 | a:link, .tufte-underline, .hover-tufte-underline:hover { 247 | background-position-y: 87%, 87%, 87%; 248 | } 249 | } 250 | 251 | a:link::selection, 252 | a:link::-moz-selection { 253 | text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, -0.15em 0 #b4d5fe; 254 | background: #b4d5fe; 255 | } 256 | 257 | /* Sidenotes, margin notes, figures, captions */ 258 | img { 259 | max-width: 100%; 260 | } 261 | 262 | .sidenote, 263 | .marginnote { 264 | float: right; 265 | clear: right; 266 | margin-right: -60%; 267 | width: 50%; 268 | margin-top: 0.3rem; 269 | margin-bottom: 0; 270 | font-size: 1.1rem; 271 | line-height: 1.3; 272 | vertical-align: baseline; 273 | position: relative; 274 | } 275 | 276 | .sidenote-number { 277 | counter-increment: sidenote-counter; 278 | } 279 | 280 | .sidenote-number:after, 281 | .sidenote:before { 282 | font-family: et-book-roman-old-style; 283 | position: relative; 284 | vertical-align: baseline; 285 | } 286 | 287 | .sidenote-number:after { 288 | content: counter(sidenote-counter); 289 | font-size: 1rem; 290 | top: -0.5rem; 291 | left: 0.1rem; 292 | } 293 | 294 | .sidenote:before { 295 | content: counter(sidenote-counter) " "; 296 | font-size: 1rem; 297 | top: -0.5rem; 298 | } 299 | 300 | blockquote .sidenote, 301 | blockquote .marginnote { 302 | margin-right: -82%; 303 | min-width: 59%; 304 | text-align: left; 305 | } 306 | 307 | div.fullwidth, 308 | table.fullwidth { 309 | width: 100%; 310 | } 311 | 312 | div.table-wrapper { 313 | overflow-x: auto; 314 | font-family: "Trebuchet MS", "Gill Sans", "Gill Sans MT", sans-serif; 315 | } 316 | 317 | .sans { 318 | font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif; 319 | letter-spacing: .03em; 320 | } 321 | 322 | code, pre > code { 323 | font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; 324 | font-size: 1.0rem; 325 | line-height: 1.42; 326 | -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. See https://github.com/edwardtufte/tufte-css/issues/81#issuecomment-261953409 */ 327 | } 328 | 329 | .sans > code { 330 | font-size: 1.2rem; 331 | } 332 | 333 | h1 > code, 334 | h2 > code, 335 | h3 > code { 336 | font-size: 0.80em; 337 | } 338 | 339 | .marginnote > code, 340 | .sidenote > code { 341 | font-size: 1rem; 342 | } 343 | 344 | pre > code { 345 | font-size: 0.9rem; 346 | width: 52.5%; 347 | margin-left: 2.5%; 348 | overflow-x: auto; 349 | display: block; 350 | } 351 | 352 | pre.fullwidth > code { 353 | width: 90%; 354 | } 355 | 356 | .fullwidth { 357 | max-width: 90%; 358 | clear:both; 359 | } 360 | 361 | span.newthought { 362 | font-variant: small-caps; 363 | font-size: 1.2em; 364 | } 365 | 366 | input.margin-toggle { 367 | display: none; 368 | } 369 | 370 | label.sidenote-number { 371 | display: inline; 372 | } 373 | 374 | label.margin-toggle:not(.sidenote-number) { 375 | display: none; 376 | } 377 | 378 | .iframe-wrapper { 379 | position: relative; 380 | padding-bottom: 56.25%; /* 16:9 */ 381 | padding-top: 25px; 382 | height: 0; 383 | } 384 | 385 | .iframe-wrapper iframe { 386 | position: absolute; 387 | top: 0; 388 | left: 0; 389 | width: 100%; 390 | height: 100%; 391 | } 392 | 393 | @media (max-width: 760px) { 394 | body { 395 | width: 84%; 396 | padding-left: 8%; 397 | padding-right: 8%; 398 | } 399 | 400 | hr, 401 | section > p, 402 | section > footer, 403 | section > table { 404 | width: 100%; 405 | } 406 | 407 | pre > code { 408 | width: 97%; 409 | } 410 | 411 | section > dl, 412 | section > ol, 413 | section > ul { 414 | width: 90%; 415 | } 416 | 417 | figure { 418 | max-width: 90%; 419 | } 420 | 421 | figcaption, 422 | figure.fullwidth figcaption { 423 | margin-right: 0%; 424 | max-width: none; 425 | } 426 | 427 | blockquote { 428 | margin-left: 1.5em; 429 | margin-right: 0em; 430 | } 431 | 432 | blockquote p, 433 | blockquote footer { 434 | width: 100%; 435 | } 436 | 437 | label.margin-toggle:not(.sidenote-number) { 438 | display: inline; 439 | } 440 | 441 | .sidenote, 442 | .marginnote { 443 | display: none; 444 | } 445 | 446 | .margin-toggle:checked + .sidenote, 447 | .margin-toggle:checked + .marginnote { 448 | display: block; 449 | float: left; 450 | left: 1rem; 451 | clear: both; 452 | width: 95%; 453 | margin: 1rem 2.5%; 454 | vertical-align: baseline; 455 | position: relative; 456 | } 457 | 458 | label { 459 | cursor: pointer; 460 | } 461 | 462 | div.table-wrapper, 463 | table { 464 | width: 85%; 465 | } 466 | 467 | img { 468 | width: 100%; 469 | } 470 | } 471 | -------------------------------------------------------------------------------- /docs/tufte-md/tufte.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /* Import ET Book styles 4 | adapted from https://github.com/edwardtufte/et-book/blob/gh-pages/et-book.css */ 5 | 6 | @font-face { 7 | font-family: "et-book"; 8 | src: url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot"); 9 | src: url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot?#iefix") format("embedded-opentype"), url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff") format("woff"), url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.ttf") format("truetype"), url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.svg#etbookromanosf") format("svg"); 10 | font-weight: normal; 11 | font-style: normal; 12 | font-display: swap; 13 | } 14 | 15 | @font-face { 16 | font-family: "et-book"; 17 | src: url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot"); 18 | src: url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot?#iefix") format("embedded-opentype"), url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff") format("woff"), url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.ttf") format("truetype"), url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.svg#etbookromanosf") format("svg"); 19 | font-weight: normal; 20 | font-style: italic; 21 | font-display: swap; 22 | } 23 | 24 | @font-face { 25 | font-family: "et-book"; 26 | src: url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot"); 27 | src: url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot?#iefix") format("embedded-opentype"), url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff") format("woff"), url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.ttf") format("truetype"), url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.svg#etbookromanosf") format("svg"); 28 | font-weight: bold; 29 | font-style: normal; 30 | font-display: swap; 31 | } 32 | 33 | @font-face { 34 | font-family: "et-book-roman-old-style"; 35 | src: url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.eot"); 36 | src: url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.eot?#iefix") format("embedded-opentype"), url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.woff") format("woff"), url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.ttf") format("truetype"), url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.svg#etbookromanosf") format("svg"); 37 | font-weight: normal; 38 | font-style: normal; 39 | font-display: swap; 40 | } 41 | 42 | /* Tufte CSS styles */ 43 | html { 44 | font-size: 15px; 45 | } 46 | 47 | body { 48 | width: 87.5%; 49 | margin-left: auto; 50 | margin-right: auto; 51 | padding-left: 12.5%; 52 | font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif; 53 | background-color: #fffff8; 54 | color: #111; 55 | max-width: 1400px; 56 | counter-reset: sidenote-counter; 57 | } 58 | 59 | h1 { 60 | font-weight: 400; 61 | margin-top: 4rem; 62 | margin-bottom: 1.5rem; 63 | font-size: 3.2rem; 64 | line-height: 1; 65 | } 66 | 67 | h2 { 68 | font-style: italic; 69 | font-weight: 400; 70 | margin-top: 2.1rem; 71 | margin-bottom: 1.4rem; 72 | font-size: 2.2rem; 73 | line-height: 1; 74 | } 75 | 76 | h3 { 77 | font-style: italic; 78 | font-weight: 400; 79 | font-size: 1.7rem; 80 | margin-top: 2rem; 81 | margin-bottom: 1.4rem; 82 | line-height: 1; 83 | } 84 | 85 | hr { 86 | display: block; 87 | height: 1px; 88 | width: 55%; 89 | border: 0; 90 | border-top: 1px solid #ccc; 91 | margin: 1em 0; 92 | padding: 0; 93 | } 94 | 95 | p.subtitle { 96 | font-style: italic; 97 | margin-top: 1rem; 98 | margin-bottom: 1rem; 99 | font-size: 1.8rem; 100 | display: block; 101 | line-height: 1; 102 | } 103 | 104 | .numeral { 105 | font-family: et-book-roman-old-style; 106 | } 107 | 108 | .danger { 109 | color: red; 110 | } 111 | 112 | article { 113 | padding: 5rem 0rem; 114 | } 115 | 116 | section { 117 | padding-top: 1rem; 118 | padding-bottom: 1rem; 119 | } 120 | 121 | p, 122 | dl, 123 | ol, 124 | ul { 125 | font-size: 1.4rem; 126 | line-height: 2rem; 127 | } 128 | 129 | p { 130 | margin-top: 1.4rem; 131 | margin-bottom: 1.4rem; 132 | padding-right: 0; 133 | vertical-align: baseline; 134 | } 135 | 136 | /* Chapter Epigraphs */ 137 | div.epigraph { 138 | margin: 5em 0; 139 | } 140 | 141 | div.epigraph > blockquote { 142 | margin-top: 3em; 143 | margin-bottom: 3em; 144 | } 145 | 146 | div.epigraph > blockquote, 147 | div.epigraph > blockquote > p { 148 | font-style: italic; 149 | } 150 | 151 | div.epigraph > blockquote > footer { 152 | font-style: normal; 153 | } 154 | 155 | div.epigraph > blockquote > footer > cite { 156 | font-style: italic; 157 | } 158 | /* end chapter epigraphs styles */ 159 | 160 | blockquote { 161 | font-size: 1.4rem; 162 | } 163 | 164 | blockquote p { 165 | width: 55%; 166 | margin-right: 40px; 167 | } 168 | 169 | blockquote footer { 170 | width: 55%; 171 | font-size: 1.1rem; 172 | text-align: right; 173 | } 174 | 175 | section > p, 176 | section > footer, 177 | section > table { 178 | width: 55%; 179 | } 180 | 181 | /* 50 + 5 == 55, to be the same width as paragraph */ 182 | section > dl, 183 | section > ol, 184 | section > ul { 185 | width: 50%; 186 | -webkit-padding-start: 5%; 187 | } 188 | 189 | dt:not(:first-child), 190 | li:not(:first-child) { 191 | margin-top: 0.25rem; 192 | } 193 | 194 | figure { 195 | padding: 0; 196 | border: 0; 197 | font-size: 100%; 198 | font: inherit; 199 | vertical-align: baseline; 200 | max-width: 55%; 201 | -webkit-margin-start: 0; 202 | -webkit-margin-end: 0; 203 | margin: 0 0 3em 0; 204 | } 205 | 206 | figcaption { 207 | float: right; 208 | clear: right; 209 | margin-top: 0; 210 | margin-bottom: 0; 211 | font-size: 1.1rem; 212 | line-height: 1.6; 213 | vertical-align: baseline; 214 | position: relative; 215 | max-width: 40%; 216 | } 217 | 218 | figure.fullwidth figcaption { 219 | margin-right: 24%; 220 | } 221 | 222 | /* Links: replicate underline that clears descenders */ 223 | a:link, 224 | a:visited { 225 | color: inherit; 226 | } 227 | 228 | .no-tufte-underline:link { 229 | background: unset; 230 | text-shadow: unset; 231 | } 232 | 233 | a:link, .tufte-underline, .hover-tufte-underline:hover { 234 | text-decoration: none; 235 | background: -webkit-linear-gradient(#fffff8, #fffff8), -webkit-linear-gradient(#fffff8, #fffff8), -webkit-linear-gradient(currentColor, currentColor); 236 | background: linear-gradient(#fffff8, #fffff8), linear-gradient(#fffff8, #fffff8), linear-gradient(currentColor, currentColor); 237 | -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px; 238 | -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px; 239 | background-size: 0.05em 1px, 0.05em 1px, 1px 1px; 240 | background-repeat: no-repeat, no-repeat, repeat-x; 241 | text-shadow: 0.03em 0 #fffff8, -0.03em 0 #fffff8, 0 0.03em #fffff8, 0 -0.03em #fffff8, 0.06em 0 #fffff8, -0.06em 0 #fffff8, 0.09em 0 #fffff8, -0.09em 0 #fffff8, 0.12em 0 #fffff8, -0.12em 0 #fffff8, 0.15em 0 #fffff8, -0.15em 0 #fffff8; 242 | background-position: 0% 93%, 100% 93%, 0% 93%; 243 | } 244 | 245 | @media screen and (-webkit-min-device-pixel-ratio: 0) { 246 | a:link, .tufte-underline, .hover-tufte-underline:hover { 247 | background-position-y: 87%, 87%, 87%; 248 | } 249 | } 250 | 251 | a:link::selection, 252 | a:link::-moz-selection { 253 | text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, -0.15em 0 #b4d5fe; 254 | background: #b4d5fe; 255 | } 256 | 257 | /* Sidenotes, margin notes, figures, captions */ 258 | img { 259 | max-width: 100%; 260 | } 261 | 262 | .sidenote, 263 | .marginnote { 264 | float: right; 265 | clear: right; 266 | margin-right: -60%; 267 | width: 50%; 268 | margin-top: 0.3rem; 269 | margin-bottom: 0; 270 | font-size: 1.1rem; 271 | line-height: 1.3; 272 | vertical-align: baseline; 273 | position: relative; 274 | } 275 | 276 | .sidenote-number { 277 | counter-increment: sidenote-counter; 278 | } 279 | 280 | .sidenote-number:after, 281 | .sidenote:before { 282 | font-family: et-book-roman-old-style; 283 | position: relative; 284 | vertical-align: baseline; 285 | } 286 | 287 | .sidenote-number:after { 288 | content: counter(sidenote-counter); 289 | font-size: 1rem; 290 | top: -0.5rem; 291 | left: 0.1rem; 292 | } 293 | 294 | .sidenote:before { 295 | content: counter(sidenote-counter) " "; 296 | font-size: 1rem; 297 | top: -0.5rem; 298 | } 299 | 300 | blockquote .sidenote, 301 | blockquote .marginnote { 302 | margin-right: -82%; 303 | min-width: 59%; 304 | text-align: left; 305 | } 306 | 307 | div.fullwidth, 308 | table.fullwidth { 309 | width: 100%; 310 | } 311 | 312 | div.table-wrapper { 313 | overflow-x: auto; 314 | font-family: "Trebuchet MS", "Gill Sans", "Gill Sans MT", sans-serif; 315 | } 316 | 317 | .sans { 318 | font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif; 319 | letter-spacing: .03em; 320 | } 321 | 322 | code, pre > code { 323 | font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; 324 | font-size: 1.0rem; 325 | line-height: 1.42; 326 | -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. See https://github.com/edwardtufte/tufte-css/issues/81#issuecomment-261953409 */ 327 | } 328 | 329 | .sans > code { 330 | font-size: 1.2rem; 331 | } 332 | 333 | h1 > code, 334 | h2 > code, 335 | h3 > code { 336 | font-size: 0.80em; 337 | } 338 | 339 | .marginnote > code, 340 | .sidenote > code { 341 | font-size: 1rem; 342 | } 343 | 344 | pre > code { 345 | font-size: 0.9rem; 346 | width: 52.5%; 347 | margin-left: 2.5%; 348 | overflow-x: auto; 349 | display: block; 350 | } 351 | 352 | pre.fullwidth > code { 353 | width: 90%; 354 | } 355 | 356 | .fullwidth { 357 | max-width: 90%; 358 | clear:both; 359 | } 360 | 361 | span.newthought { 362 | font-variant: small-caps; 363 | font-size: 1.2em; 364 | } 365 | 366 | input.margin-toggle { 367 | display: none; 368 | } 369 | 370 | label.sidenote-number { 371 | display: inline; 372 | } 373 | 374 | label.margin-toggle:not(.sidenote-number) { 375 | display: none; 376 | } 377 | 378 | .iframe-wrapper { 379 | position: relative; 380 | padding-bottom: 56.25%; /* 16:9 */ 381 | padding-top: 25px; 382 | height: 0; 383 | } 384 | 385 | .iframe-wrapper iframe { 386 | position: absolute; 387 | top: 0; 388 | left: 0; 389 | width: 100%; 390 | height: 100%; 391 | } 392 | 393 | @media (max-width: 760px) { 394 | body { 395 | width: 84%; 396 | padding-left: 8%; 397 | padding-right: 8%; 398 | } 399 | 400 | hr, 401 | section > p, 402 | section > footer, 403 | section > table { 404 | width: 100%; 405 | } 406 | 407 | pre > code { 408 | width: 97%; 409 | } 410 | 411 | section > dl, 412 | section > ol, 413 | section > ul { 414 | width: 90%; 415 | } 416 | 417 | figure { 418 | max-width: 90%; 419 | } 420 | 421 | figcaption, 422 | figure.fullwidth figcaption { 423 | margin-right: 0%; 424 | max-width: none; 425 | } 426 | 427 | blockquote { 428 | margin-left: 1.5em; 429 | margin-right: 0em; 430 | } 431 | 432 | blockquote p, 433 | blockquote footer { 434 | width: 100%; 435 | } 436 | 437 | label.margin-toggle:not(.sidenote-number) { 438 | display: inline; 439 | } 440 | 441 | .sidenote, 442 | .marginnote { 443 | display: none; 444 | } 445 | 446 | .margin-toggle:checked + .sidenote, 447 | .margin-toggle:checked + .marginnote { 448 | display: block; 449 | float: left; 450 | left: 1rem; 451 | clear: both; 452 | width: 95%; 453 | margin: 1rem 2.5%; 454 | vertical-align: baseline; 455 | position: relative; 456 | } 457 | 458 | label { 459 | cursor: pointer; 460 | } 461 | 462 | div.table-wrapper, 463 | table { 464 | width: 85%; 465 | } 466 | 467 | img { 468 | width: 100%; 469 | } 470 | } 471 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Tufte Pandoc CSS 10 | 11 | 76 | 77 | 78 | 79 | 80 | 83 | 84 | 85 |
86 |
87 |

Tufte Pandoc CSS

88 |

Starter files for Pandoc Markdown with Tufte CSS

89 |

November 3, 2016 – Jake Zimmerman

90 |
91 |
92 |

Tufte Pandoc CSS is an attempt to make it as easy as possible to get started using Tufte CSSIf you’ve never heard of Tufte CSS before, take a second to check it out!
93 |
94 | to write content. It does this by leveraging Pandoc Markdown’s existing features, along with a few new ones implemented as a JSON filter.

95 |
96 |
97 |

Sidenotes in Markdown

98 |
99 |
100 |

Tufte CSS provides tools to style web articles using the ideas demonstrated by Edward Tufte’s books and handouts. Tufte’s style is known for its simplicity, extensive use of sidenotes, tight integration of graphics with text, and carefully chosen typography.

101 | 104 |
105 |
106 |

Tufte Pandoc CSS aims to be a set of starter files for your next project. What that means is that it provides a number of CSS files, a Pandoc template, a Makefile, and more to make it as easy as possible to write Markdown using Tufte CSS.

107 |

The biggest barrier that this project overcomes is that Pandoc Markdown doesn’t support side notes nor margin notes by default. This project adds that functionality.In particular, a separate library called pandoc-sidenote handles the transformation of footnotes into sidenotes.
108 |
109 | Here’s how you can use them:

110 | 
... In print, Tufte has used the proprietary Monotype
111 | Bembo[^note] font. ...
112 | 
113 | [^note]:
114 |   See Tufte's comment in the Tufte book fonts thread.
115 |

By default, if you use the normal Pandoc syntax for creating footnotes, they’ll become Tufte CSS-style side notes. To get margin notes (i.e., side notes without numbers), just include {-} at the beginning of the note:

116 |
117 | 
... If you want a sidenote without footnote-style numberings, then you want a
118 | margin note.[^mn] On large screens, ...
119 | 
120 | [^mn]:
121 |   {-} This is a margin note. Notice there isn't a number preceding the note.
122 |
123 |
124 |
125 |

Syntax-Highlighted Codeblocks

126 |

Pandoc Markdown is excellent for styling code blocks. Indeed, you’ve already seen their effect in this document. You can use any of the methods for creating syntax highlighted code blocks Pandoc permits. For example:

127 | 
# Compute elements of the mandelbrot set
128 | def mandelbrot(a):
129 |     return reduce(lambda z, _: z * z + a, range(50), 0)
130 | 
131 | def step(start, step, iterations):
132 |     return (start + (i * step) for i in range(iterations))
133 | 
134 | rows = (("*" if abs(mandelbrot(complex(x, y))) < 2 else " "
135 |         for x in step(-2.0, .0315, 80))
136 |         for y in step(1, -.05, 41))
137 |

In this document, you’re also seeing the effect of the Solarized color scheme. You can use any of the color schemes Pandoc ships with by default, or this one.

138 |

Another feature Pandoc allows that Tufte Pandoc CSS supports is generating line numbers to accompany a code sample:

139 | 
merge []         ys                   = ys
140 | merge xs         []                   = xs
141 | merge xs@(x:xt) ys@(y:yt) | x <= y    = x : merge xt ys
142 |                           | otherwise = y : merge xs yt
143 | 
144 | split (x:y:zs) = let (xs,ys) = split zs in (x:xs,y:ys)
145 | split [x]      = ([x],[])
146 | split []       = ([],[])
147 | 
148 | mergeSort []  = []
149 | mergeSort [x] = [x]
150 | mergeSort xs  = let (as,bs) = split xs
151 |                 in merge (mergeSort as) (mergeSort bs)
152 |
153 |
154 |

Figures & Sections

155 |

Unfortunately, HTML figures and sections don’t have special Markdown syntax. To include them in your document, you’ll have to use the raw HTML. On the bright side, this usually ends up being pretty painless.

156 |

In particular for sections, if you’re satisfied with the top-most headings being wrapped in <section> tags, you can use the --section-divs flag to pandoc to automatically wrap sections in divs. This is already enabled in the Makefile we ship with this project. Regardless, if you have any leading text before your first heading, you will need to wrap this text in a <section> tag.

157 |

Tufte Pandoc CSS improves support for full-width tables and code blocks. Special attention has been given to ensure that they’re fully responsive at all viewports, just like normal full-width figures. Here’s a sample full-width table:

158 |
159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 |
TalkSpeakerTime
HTML/CSS PrimerScott Krulcik1:30 p.m. – 3:00 p.m.
JavaScript PrimerJake Zimmerman3:00 p.m. – 4:30 p.m.
UX Prototyping with Framer.jsLois Yang4:30 p.m. – 6:00 p.m.
Frontend Development with Angular.jsSandra Sajeev6:30 p.m. – 8:00 p.m.
190 |
191 |

As one last quick note: the original Tufte CSS recommends that you always wrap images in <figure> tags for optimal responsiveness and layout. Depending on your tastes, you can choose to omit this. The differences will only take effect on mobile, where the width of the image will be slightly different from what it would be if it were properly wrapped. Try it both ways and see whether you value the convenience of no wrapping or the proper layout that a <figure> provides.

192 |
193 |
194 |

Installation & Usage

195 |

As mentioned above, Tufte Pandoc CSS is designed to be a collection of starter files to help you with your next Markdown project. You can learn what files and tools are available on the GitHub repository.

196 |

As for usage, you are strongly encouraged to look at the source of this document. There’s also an HTML-to-Markdown port of the original Tufte CSS page along with the accompanying source.

197 |

One goal of this project is to support as many of the features you’d “expect” to work that are available in Pandoc. If your favorite feature doesn’t work, let us know with an issue.

198 |
199 |
200 | 201 | 202 | -------------------------------------------------------------------------------- /docs/tufte-md/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Tufte CSS 3 | subtitle: Dave Liepmann 4 | header-includes: 5 | - '' 6 | --- 7 | 8 |
9 | 10 | Tufte CSS provides tools to style web articles using the ideas demonstrated by 11 | Edward Tufte's books and handouts. Tufte's style is known for its simplicity, 12 | extensive use of sidenotes, tight integration of graphics with text, and 13 | carefully chosen typography. 14 | 15 | Tufte CSS was created by [Dave Liepmann][dl] and is now an Edward Tufte project. 16 | The original idea was cribbed from 17 | [Tufte-LaTeX][tufte-latex] and [R Markdown's Tufte Handout 19 | format][r-markdown]. We give hearty thanks to all the people who have 20 | contributed to those projects. 21 | 22 | [dl]: http://www.daveliepmann.com 23 | [tufte-latex]: https://tufte-latex.github.io/tufte-latex/ 24 | [r-markdown]: http://rmarkdown.rstudio.com/tufte_handout_format.html 25 | 26 | If you see anything that Tufte CSS could improve, we welcome your contribution 27 | in the form of an issue or pull request on the GitHub project: [tufte-css]. 28 | Please note the [contribution guidelines][contrib]. 29 | 30 | [tufte-css]: https://github.com/edwardtufte/tufte-css 31 | [contrib]: https://github.com/edwardtufte/tufte-css#contributing 32 | 33 | Finally, a reminder about the goal of this project. The web is not print. 34 | Webpages are not books. Therefore, the goal of Tufte CSS is not to say 35 | "websites should look like this interpretation of Tufte's books" but rather 36 | "here are some techniques Tufte developed that we've found useful in print; 37 | maybe you can find a way to make them useful on the web". Tufte CSS is merely 38 | a sketch of one way to implement this particular set of ideas. It should be a 39 | starting point, not a design goal, because any project should present their 40 | information as best suits their particular circumstances. 41 | 42 |
43 | 44 | 45 | ## Getting Started 46 | 47 | To use Tufte CSS, copy `tufte.css` and the `et-book` directory of font files to 48 | your project directory, then add the following to your HTML document's `head` 49 | block: 50 | 51 | ``` 52 | 53 | ``` 54 | 55 | Now you just have to use the provided CSS rules, and the Tufte CSS conventions 56 | described in this document. For best results, View Source and Inspect Element 57 | frequently. 58 | 59 | 60 | ## Fundamentals 61 | 62 | ### Sections and Headings 63 | 64 | Organize your document with an `article` element inside your `body` tag. Inside 65 | that, use `section` tags around each logical grouping of text and headings. 66 | 67 | Tufte CSS uses `h1` for the document title, `p` with class `subtitle` for the 68 | document subtitle, `h2` for section headings, and `h3` for low-level headings. 69 | More specific headings are not supported. If you feel the urge to reach for a 70 | heading of level 4 or greater, consider redesigning your document: 71 | 72 | > [It is] notable that the Feynman lectures (3 volumes) write about all of 73 | > physics in 1800 pages, using only 2 levels of hierarchical headings: chapters 74 | > and A-level heads in the text. It also uses the methodology of 75 | > sentences which then cumulate sequentially into paragraphs, 76 | > rather than the grunts of bullet points. Undergraduate Caltech physics is very 77 | > complicated material, but it didn't require an elaborate hierarchy to 78 | > organize. 79 | > 80 | >
81 | > [Edward Tufte, forum post, 'Book design: advice and examples' thread][quote-cite] 82 | >
83 | 84 | [quote-cite]: http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0000hB 85 | 86 | As a bonus, this excerpt regarding the use of headings provides an example of 87 | block quotes. In Tufte CSS they are just lightly styled, semantically correct 88 | HTML using `blockquote` and `footer` elements. See page 20 of [The Visual 89 | Display of Quantitative Information][vdqi] for an example in print. 90 | 91 | [vdqi]: https://www.edwardtufte.com/tufte/books_vdqi 92 | 93 | In his later books[^1], Tufte starts each 94 | section with a bit of vertical space, a non-indented paragraph, and the first 95 | few words of the sentence set in small caps. For this we use a span with the 96 | class `newthought`, as demonstrated at the beginning of this paragraph. Vertical 97 | spacing is accomplished separately through `
` tags. Be consistent: 98 | though we do so in this paragraph for the purpose of demonstration, do not 99 | alternate use of header elements and the `newthought` technique. Pick one 100 | approach and stick to it. 101 | 102 | [^1]: [Beautiful Evidence](http://www.edwardtufte.com/tufte/books_be) 103 | 104 | ### Text 105 | 106 | Although paper handouts obviously have a pure white background, the web is 107 | better served by the use of slightly off-white and off-black colors. Tufte CSS 108 | uses `#fffff8` and `#111111` because they are nearly indistinguishable from 109 | their 'pure' cousins, but dial down the harsh contrast. We stick to the 110 | greyscale for text, reserving color for specific, careful use in figures and 111 | images. 112 | 113 | In print, Tufte has used the proprietary Monotype Bembo[^2] font. A similar 114 | effect is achieved in digital formats with the now open-source 115 | [ETBook][et-book], which Tufte CSS supplies with a `@font-face` 116 | reference to a .ttf file. In case ETBook somehow doesn't work, Tufte CSS shifts 117 | gracefully to other serif fonts like Palatino and Georgia. 118 | 119 | [^2]: 120 | See Tufte's comment in the [Tufte book fonts][bembo-thread] thread. 121 | 122 | [bembo-thread]: http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0000Vt 123 | [et-book]: https://github.com/edwardtufte/et-book 124 | 125 | Also notice how Tufte CSS includes separate font files for bold (strong) and 126 | italic (emphasis), instead of relying on the browser to mechanically transform 127 | the text. This is typographic best practice. 128 | 129 |

130 | If you prefer sans-serifs, use the `sans` class. It relies on Gill Sans, 131 | Tufte's sans-serif font of choice. 132 |

133 | 134 | Links in Tufte CSS match the body text in color and do not change on mouseover 135 | or when clicked. Here is a [dummy example](#) that goes nowhere. 136 | These links are underlined, since this is the most widely recognized indicator 137 | of clickable text. [^blue] However, because most browsers' default underlining 138 | does not clear descenders and is so thick and distracting, the underline effect 139 | is instead achieved using CSS trickery involving background gradients instead of 140 | standard `text-decoration`. Credit goes to Adam Schwartz for that technique. 141 | 142 | [^blue]: 143 | {-} Blue text, while also a widely recognizable clickable-text indicator, is 144 | crass and distracting. Luckily, it is also rendered unnecessary by the use of 145 | underlining. 146 | 147 | As always, these design choices are merely one approach that Tufte CSS provides 148 | by default. Other approaches, such as changing color on click or mouseover, or 149 | using highlighting or color instead of underlining to denote links, could also 150 | be made to work. The goal is to make sentences readable without interference 151 | from links, as well as to make links immediately identifiable even by casual web 152 | users. 153 | 154 | 155 | ## Epigraphs 156 | 157 |
158 | 159 | > The English language . . . becomes ugly and inaccurate because our thoughts 160 | > are foolish, but the slovenliness of our language makes it easier for us to 161 | > have foolish thoughts. 162 | > 163 | >
George Orwell, "Politics and the English Language"
164 | 165 | 166 | 167 | > For a successful technology, reality must take precedence over public 168 | > relations, for Nature cannot be fooled. 169 | > 170 | >
171 | > Richard P. Feynman, "What Do You Care What Other People Think?" 172 | >
173 | 174 | 175 | 176 | > I do not paint things, I paint only the differences between things. 177 | > 178 | >
179 | > Henri Matisse, Henri Matisse Dessins: thèmes et variations 180 | > (Paris, 1943), 37 181 | >
182 | 183 |
184 | 185 | If you'd like to introduce your page or a section of your page with some quotes, 186 | use epigraphs. Modeled after chapter epigraphs in Tufte's books (particularly 187 | *Beautiful Evidence*), these are `blockquote` elements with a bit of specialized 188 | styling. Quoted text is italicized. The source goes in a `footer` element inside 189 | the `blockquote`. We have provided three examples in the epigraph of this 190 | section, demonstrating shorter and longer quotes, with and without a paragraph 191 | tag, and showing how multiple quotes within an epigraph fit together with the 192 | use of a wrapper class. 193 | 194 | ## Sidenotes: Footnotes and Marginal Notes 195 | 196 | One of the most distinctive features of Tufte's style is his extensive use of 197 | sidenotes.[^3] Sidenotes are like footnotes, except they don't force the reader 198 | to jump their eye to the bottom of the page, but instead display off to the side 199 | in the margin. Perhaps you have noticed their use in this document already. You 200 | are very astute. 201 | 202 | [^3]: This is a sidenote. 203 | 204 | Sidenotes are a great example of the web not being like print. On sufficiently 205 | large viewports, Tufte CSS uses the margin for sidenotes, margin notes, and 206 | small figures. On smaller viewports, elements that would go in the margin are 207 | hidden until the user toggles them into view. The goal is to present related 208 | but not necessary information such as asides or citations *as close as possible* 209 | to the text that references them. At the same time, this secondary information 210 | should stay out of the way of the eye, not interfering with the progression of 211 | ideas in the main text. 212 | 213 | Sidenotes consist of two elements: a superscript reference number that goes 214 | inline with the text, and a sidenote with content. To add the former, just put 215 | a label and dummy checkbox into the text where you want the reference to go, 216 | like so: 217 | 218 | ``` 219 | 222 | 225 | ``` 226 | 227 | You must manually assign a reference `id` to each side or margin note, replacing 228 | "sn-demo" in the `for` and the `id` attribute values with an appropriate 229 | descriptor. It is useful to use prefixes like `sn-` for sidenotes and `mn-` for 230 | margin notes. 231 | 232 | Immediately adjacent to that sidenote reference in the main text goes the 233 | sidenote content itself, in a `span` with class `sidenote`. This tag is also 234 | inserted directly in the middle of the body text, but is either pushed into the 235 | margin or hidden by default. Make sure to position your sidenotes correctly by 236 | keeping the sidenote-number label close to the sidenote itself. 237 | 238 | If you want a sidenote without footnote-style numberings, then you want a margin 239 | note.[^mn] On large screens, a margin note is just a sidenote that omits the 240 | reference number. This lessens the distracting effect taking away from the flow 241 | of the main text, but can increase the cognitive load of matching a margin note 242 | to its referent text. However, on small screens, a margin note is like a 243 | sidenote except its viewability-toggle is a symbol rather than a reference 244 | number. This document currently uses the symbol ⊕ (`&\#8853;`), but it's up to 245 | you. 246 | 247 | [^mn]: 248 | {-} This is a margin note. Notice there isn't a number preceding the note. 249 | 250 | Margin notes are created just like sidenotes, but with the `marginnote` class 251 | for the content and the `margin-toggle` class for the label and dummy checkbox. 252 | For instance, here is the code for the margin note used in the previous 253 | paragraph: 254 | 255 | ``` 256 | 257 | 258 | 259 | This is a margin note. Notice there isn’t a number preceding the note. 260 | 261 | ``` 262 | 263 | Figures in the margin are created as margin notes, as demonstrated in the next 264 | section. 265 | 266 | 267 | ## Figures 268 | 269 | Tufte emphasizes tight integration of graphics with text. Data, graphs, and 270 | figures are kept with the text that discusses them. In print, this means they 271 | are not relegated to a separate page. On the web, that means readability of 272 | graphics and their accompanying text without extra clicks, tab-switching, or 273 | scrolling. 274 | 275 | Figures should try to use the `figure` element, which by default are constrained 276 | to the main column. Don't wrap figures in a paragraph tag. Any label or margin 277 | note goes in a regular margin note inside the figure. For example, most of the 278 | time one should introduce a figure directly into the main flow of discussion, 279 | like so: 280 | 281 | 282 |
283 | ^[{-} From Edward Tufte, *Visual Display of Quantitative Information*, page 92.] 284 | ![Exports and Imports to and from Denmark & Norway from 1700 to 1780](img/exports-imports.png) 285 |
286 | 287 | [^rhino] But tight integration of graphics with text is central to Tufte's work 288 | even when those graphics are ancillary to the main body of a text. In many of 289 | those cases, a margin figure may be most appropriate. To place figures in the 290 | margin, just wrap an image (or whatever) in a margin note inside a 291 | p tag, as seen to the right of this paragraph. 292 | 293 | [^rhino]: 294 | {-} ![Image of a Rhinoceros](img/rhino.png) F.J. Cole, "The History of Albrecht 295 | Dürer's Rhinoceros in Zooological Literature," *Science, Medicine, and 296 | History: Essays on the Evolution of Scientific Thought and Medical Practice* 297 | (London, 1953), ed. E. Ashworth Underwood, 337-356. From page 71 of Edward 298 | Tufte's *Visual Explanations*. 299 | 300 | If you need a full-width figure, give it the `fullwidth` class. Make sure that's 301 | inside an `article`, and it will take up (almost) the full width of the screen. 302 | This approach is demonstrated below using Edward Tufte's English translation of 303 | the Napoleon's March data visualization. From *Beautiful Evidence*, page 304 | 122-124. 305 | 306 |
307 | ![Figurative map of the successive losses of the French Army in the Russian 308 | campaign, 1812-1813](img/napoleons-march.png) 309 |
310 | 311 | 312 | ## Code 313 | 314 | Technical jargon, programming language terms, and code samples are denoted with 315 | the `code` class, as I've been using in this document to denote 316 | HTML. Code needs to be monospace for formatting purposes and to aid in code 317 | analysis, but it must maintain its readability. To those ends, Tufte CSS 318 | follows GitHub's font selection, which shifts gracefully along the monospace 319 | spectrum from the elegant but rare Consolas all the way to good old reliable 320 | Courier. 321 | 322 | Extended code examples should use a `pre` tag with class 323 | `code`. This adds control over indentation and overflow as well: 324 | 325 | ``` 326 | ;; Some code examples in Clojure. This is a comment. 327 | 328 | ;; applying a function to every item in the collection 329 | (map tufte-css blog-posts) 330 | ;;;; if unfamiliar, see http://www.lispcast.com/annotated-map 331 | 332 | ;; side-effecty loop (unformatted, causing text overflow) - from https://clojuredocs.org/clojure.core/doseq 333 | (doseq [[[a b] [c d]] (map list (sorted-map :1 1 :2 2) (sorted-map :3 3 :4 4))] (prn (* b d))) 334 | 335 | ;; that same side-effecty loop, formatted 336 | (doseq [[[a b] [c d]] (map list 337 | (sorted-map :1 1 :2 2) 338 | (sorted-map :3 3 :4 4))] 339 | (prn (* b d))) 340 | 341 | ;; If this proselytizing has worked, check out: 342 | ;; http://howistart.org/posts/clojure/1 343 | ``` 344 | 345 | 346 | ## ImageQuilts 347 | 348 | Tufte CSS provides support for Edward Tufte and Adam Schwartz's 349 | [ImageQuilts]. See the [ET forum announcement thread][quilts-thread] for more on 350 | quilts. Some have ragged edges, others straight. Include these images just as 351 | you would any other `figure`. 352 | 353 | [ImageQuilts]: http://imagequilts.com/ 354 | [quilts-thread]: http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0003wk 355 | 356 | This is an ImageQuilt surveying Chinese calligraphy, placed in a full-width 357 | figure to accomodate its girth: 358 | 359 |
360 | ![Image of Chinese Calligraphy](img/imagequilt-chinese-calligraphy.png) 361 |
362 | 363 | Here is an ImageQuilt of 47 animal sounds over and over, in a figure constrained 364 | to the main text region. This quilt has ragged edges, but the image itself is of 365 | course still rectangular. 366 | 367 |
368 | ![Image of animal sounds](img/imagequilt-animal-sounds.png) 369 |
370 | 371 | 372 | ## Epilogue 373 | 374 | Many thanks go to Edward Tufte for leading the way with his work. It is only 375 | through his kind and careful editing that this project accomplishes what it 376 | does. All errors of implementation are of course mine. 377 | -------------------------------------------------------------------------------- /docs/tufte-md/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tufte CSS 8 | 9 | 10 | 11 | 12 | 13 | 16 | 17 | 18 | 19 |
20 |
21 |

Tufte CSS

22 |

Dave Liepmann

23 |
24 |
25 |

Tufte CSS provides tools to style web articles using the ideas demonstrated by Edward Tufte’s books and handouts. Tufte’s style is known for its simplicity, extensive use of sidenotes, tight integration of graphics with text, and carefully chosen typography.

26 |

Tufte CSS was created by Dave Liepmann and is now an Edward Tufte project. The original idea was cribbed from Tufte-LaTeX and R Markdown’s Tufte Handout format. We give hearty thanks to all the people who have contributed to those projects.

27 |

If you see anything that Tufte CSS could improve, we welcome your contribution in the form of an issue or pull request on the GitHub project: tufte-css. Please note the contribution guidelines.

28 |

Finally, a reminder about the goal of this project. The web is not print. Webpages are not books. Therefore, the goal of Tufte CSS is not to say “websites should look like this interpretation of Tufte’s books” but rather “here are some techniques Tufte developed that we’ve found useful in print; maybe you can find a way to make them useful on the web”. Tufte CSS is merely a sketch of one way to implement this particular set of ideas. It should be a starting point, not a design goal, because any project should present their information as best suits their particular circumstances.

29 |
30 |
31 |

Getting Started

32 |

To use Tufte CSS, copy tufte.css and the et-book directory of font files to your project directory, then add the following to your HTML document’s head block:

33 | 
<link rel="stylesheet" href="tufte.css"/>
34 |

Now you just have to use the provided CSS rules, and the Tufte CSS conventions described in this document. For best results, View Source and Inspect Element frequently.

35 |
36 |
37 |

Fundamentals

38 |
39 |

Sections and Headings

40 |

Organize your document with an article element inside your body tag. Inside that, use section tags around each logical grouping of text and headings.

41 |

Tufte CSS uses h1 for the document title, p with class subtitle for the document subtitle, h2 for section headings, and h3 for low-level headings. More specific headings are not supported. If you feel the urge to reach for a heading of level 4 or greater, consider redesigning your document:

42 |
43 |

[It is] notable that the Feynman lectures (3 volumes) write about all of physics in 1800 pages, using only 2 levels of hierarchical headings: chapters and A-level heads in the text. It also uses the methodology of sentences which then cumulate sequentially into paragraphs, rather than the grunts of bullet points. Undergraduate Caltech physics is very complicated material, but it didn’t require an elaborate hierarchy to organize.

44 | 47 |
48 |

As a bonus, this excerpt regarding the use of headings provides an example of block quotes. In Tufte CSS they are just lightly styled, semantically correct HTML using blockquote and footer elements. See page 20 of The Visual Display of Quantitative Information for an example in print.

49 |

In his later booksBeautiful Evidence
50 |
51 | , Tufte starts each section with a bit of vertical space, a non-indented paragraph, and the first few words of the sentence set in small caps. For this we use a span with the class newthought, as demonstrated at the beginning of this paragraph. Vertical spacing is accomplished separately through <section> tags. Be consistent: though we do so in this paragraph for the purpose of demonstration, do not alternate use of header elements and the newthought technique. Pick one approach and stick to it.

52 |
53 |
54 |

Text

55 |

Although paper handouts obviously have a pure white background, the web is better served by the use of slightly off-white and off-black colors. Tufte CSS uses #fffff8 and #111111 because they are nearly indistinguishable from their ‘pure’ cousins, but dial down the harsh contrast. We stick to the greyscale for text, reserving color for specific, careful use in figures and images.

56 |

In print, Tufte has used the proprietary Monotype BemboSee Tufte’s comment in the Tufte book fonts thread.
57 |
58 | font. A similar effect is achieved in digital formats with the now open-source ETBook, which Tufte CSS supplies with a @font-face reference to a .ttf file. In case ETBook somehow doesn’t work, Tufte CSS shifts gracefully to other serif fonts like Palatino and Georgia.

59 |

Also notice how Tufte CSS includes separate font files for bold (strong) and italic (emphasis), instead of relying on the browser to mechanically transform the text. This is typographic best practice.

60 |

61 | If you prefer sans-serifs, use the sans class. It relies on Gill Sans, Tufte’s sans-serif font of choice. 62 |

63 |

Links in Tufte CSS match the body text in color and do not change on mouseover or when clicked. Here is a dummy example that goes nowhere. These links are underlined, since this is the most widely recognized indicator of clickable text. Blue text, while also a widely recognizable clickable-text indicator, is crass and distracting. Luckily, it is also rendered unnecessary by the use of underlining.
64 |
65 | However, because most browsers’ default underlining does not clear descenders and is so thick and distracting, the underline effect is instead achieved using CSS trickery involving background gradients instead of standard text-decoration. Credit goes to Adam Schwartz for that technique.

66 |

As always, these design choices are merely one approach that Tufte CSS provides by default. Other approaches, such as changing color on click or mouseover, or using highlighting or color instead of underlining to denote links, could also be made to work. The goal is to make sentences readable without interference from links, as well as to make links immediately identifiable even by casual web users.

67 |
68 |
69 |
70 |

Epigraphs

71 |
72 |
73 |

The English language . . . becomes ugly and inaccurate because our thoughts are foolish, but the slovenliness of our language makes it easier for us to have foolish thoughts.

74 |
75 | George Orwell, “Politics and the English Language” 76 |
77 |
78 | 79 |
80 |

For a successful technology, reality must take precedence over public relations, for Nature cannot be fooled.

81 |
82 | Richard P. Feynman, “What Do You Care What Other People Think?” 83 |
84 |
85 | 86 |
87 |

I do not paint things, I paint only the differences between things.

88 |
89 | Henri Matisse, Henri Matisse Dessins: thèmes et variations (Paris, 1943), 37 90 |
91 |
92 |
93 |

If you’d like to introduce your page or a section of your page with some quotes, use epigraphs. Modeled after chapter epigraphs in Tufte’s books (particularly Beautiful Evidence), these are blockquote elements with a bit of specialized styling. Quoted text is italicized. The source goes in a footer element inside the blockquote. We have provided three examples in the epigraph of this section, demonstrating shorter and longer quotes, with and without a paragraph tag, and showing how multiple quotes within an epigraph fit together with the use of a wrapper class.

94 |
95 |
96 |

Sidenotes: Footnotes and Marginal Notes

97 |

One of the most distinctive features of Tufte’s style is his extensive use of sidenotes.This is a sidenote.
98 |
99 | Sidenotes are like footnotes, except they don’t force the reader to jump their eye to the bottom of the page, but instead display off to the side in the margin. Perhaps you have noticed their use in this document already. You are very astute.

100 |

Sidenotes are a great example of the web not being like print. On sufficiently large viewports, Tufte CSS uses the margin for sidenotes, margin notes, and small figures. On smaller viewports, elements that would go in the margin are hidden until the user toggles them into view. The goal is to present related but not necessary information such as asides or citations as close as possible to the text that references them. At the same time, this secondary information should stay out of the way of the eye, not interfering with the progression of ideas in the main text.

101 |

Sidenotes consist of two elements: a superscript reference number that goes inline with the text, and a sidenote with content. To add the former, just put a label and dummy checkbox into the text where you want the reference to go, like so:

102 | 
<label for="sn-demo"
103 |        class="margin-toggle sidenote-number">
104 | </label>
105 | <input type="checkbox"
106 |        id="sn-demo"
107 |        class="margin-toggle"/>
108 |

You must manually assign a reference id to each side or margin note, replacing “sn-demo” in the for and the id attribute values with an appropriate descriptor. It is useful to use prefixes like sn- for sidenotes and mn- for margin notes.

109 |

Immediately adjacent to that sidenote reference in the main text goes the sidenote content itself, in a span with class sidenote. This tag is also inserted directly in the middle of the body text, but is either pushed into the margin or hidden by default. Make sure to position your sidenotes correctly by keeping the sidenote-number label close to the sidenote itself.

110 |

If you want a sidenote without footnote-style numberings, then you want a margin note.This is a margin note. Notice there isn’t a number preceding the note.
111 |
112 | On large screens, a margin note is just a sidenote that omits the reference number. This lessens the distracting effect taking away from the flow of the main text, but can increase the cognitive load of matching a margin note to its referent text. However, on small screens, a margin note is like a sidenote except its viewability-toggle is a symbol rather than a reference number. This document currently uses the symbol ⊕ (&\#8853;), but it’s up to you.

113 |

Margin notes are created just like sidenotes, but with the marginnote class for the content and the margin-toggle class for the label and dummy checkbox. For instance, here is the code for the margin note used in the previous paragraph:

114 | 
<label for="mn-demo" class="margin-toggle">&#8853;</label>
115 | <input type="checkbox" id="mn-demo" class="margin-toggle"/>
116 | <span class="marginnote">
117 |   This is a margin note. Notice there isn’t a number preceding the note.
118 | </span>
119 |

Figures in the margin are created as margin notes, as demonstrated in the next section.

120 |
121 |
122 |

Figures

123 |

Tufte emphasizes tight integration of graphics with text. Data, graphs, and figures are kept with the text that discusses them. In print, this means they are not relegated to a separate page. On the web, that means readability of graphics and their accompanying text without extra clicks, tab-switching, or scrolling.

124 |

Figures should try to use the figure element, which by default are constrained to the main column. Don’t wrap figures in a paragraph tag. Any label or margin note goes in a regular margin note inside the figure. For example, most of the time one should introduce a figure directly into the main flow of discussion, like so:

125 |
126 | From Edward Tufte, Visual Display of Quantitative Information, page 92.
127 |
128 | Exports and Imports to and from Denmark & Norway from 1700 to 1780 129 |
130 |

Image of a Rhinoceros F.J. Cole, “The History of Albrecht Dürer’s Rhinoceros in Zooological Literature,” Science, Medicine, and History: Essays on the Evolution of Scientific Thought and Medical Practice (London, 1953), ed. E. Ashworth Underwood, 337-356. From page 71 of Edward Tufte’s Visual Explanations.
131 |
132 | But tight integration of graphics with text is central to Tufte’s work even when those graphics are ancillary to the main body of a text. In many of those cases, a margin figure may be most appropriate. To place figures in the margin, just wrap an image (or whatever) in a margin note inside a p tag, as seen to the right of this paragraph.

133 |

If you need a full-width figure, give it the fullwidth class. Make sure that’s inside an article, and it will take up (almost) the full width of the screen. This approach is demonstrated below using Edward Tufte’s English translation of the Napoleon’s March data visualization. From Beautiful Evidence, page 122-124.

134 |
135 | Figurative map of the successive losses of the French Army in the Russian campaign, 1812-1813 136 |
137 |
138 |
139 |

Code

140 |

Technical jargon, programming language terms, and code samples are denoted with the code class, as I’ve been using in this document to denote HTML. Code needs to be monospace for formatting purposes and to aid in code analysis, but it must maintain its readability. To those ends, Tufte CSS follows GitHub’s font selection, which shifts gracefully along the monospace spectrum from the elegant but rare Consolas all the way to good old reliable Courier.

141 |

Extended code examples should use a pre tag with class code. This adds control over indentation and overflow as well:

142 | 
;; Some code examples in Clojure. This is a comment.
143 | 
144 | ;; applying a function to every item in the collection
145 | (map tufte-css blog-posts)
146 | ;;;; if unfamiliar, see http://www.lispcast.com/annotated-map
147 | 
148 | ;; side-effecty loop (unformatted, causing text overflow) - from https://clojuredocs.org/clojure.core/doseq
149 | (doseq [[[a b] [c d]] (map list (sorted-map :1 1 :2 2) (sorted-map :3 3 :4 4))] (prn (* b d)))
150 | 
151 | ;; that same side-effecty loop, formatted
152 | (doseq [[[a b] [c d]] (map list
153 |                    (sorted-map :1 1 :2 2)
154 |                    (sorted-map :3 3 :4 4))]
155 | (prn (* b d)))
156 | 
157 | ;; If this proselytizing has worked, check out:
158 | ;; http://howistart.org/posts/clojure/1
159 |
160 |
161 |

ImageQuilts

162 |

Tufte CSS provides support for Edward Tufte and Adam Schwartz’s ImageQuilts. See the ET forum announcement thread for more on quilts. Some have ragged edges, others straight. Include these images just as you would any other figure.

163 |

This is an ImageQuilt surveying Chinese calligraphy, placed in a full-width figure to accomodate its girth:

164 |
165 | Image of Chinese Calligraphy 166 |
167 |

Here is an ImageQuilt of 47 animal sounds over and over, in a figure constrained to the main text region. This quilt has ragged edges, but the image itself is of course still rectangular.

168 |
169 | Image of animal sounds 170 |
171 |
172 |
173 |

Epilogue

174 |

Many thanks go to Edward Tufte for leading the way with his work. It is only through his kind and careful editing that this project accomplishes what it does. All errors of implementation are of course mine.

175 |
176 |
177 | 178 | 179 | --------------------------------------------------------------------------------