Style your webpage like Edward Tufte’s handouts.

  • By null
  • Last update: Nov 23, 2022
  • Comments: 16

Tufte CSS

Edward Tufte uses a distinctive style in his handouts: simple, with well-set typography, extensive sidenotes, and tight integration of graphics and charts. tufte-css brings that style to HTML documents.

This project is directly inspired by and based on Tufte-LaTeX and the R Markdown Tufte Handout.

Getting Started

The file index.html is a self-describing demonstration document that walks through the features of Tufte CSS. The live version at https://edwardtufte.github.io/tufte-css/ is the best overview of the project.

To use Tufte CSS, just copy tufte.css and the et-book font directory to your project and add the following to your HTML doc's head block:

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

All other files in the repository can be ignored, as they are merely used by the demonstration document.

Project Scope and Status

Tufte CSS is specifically a CSS-only solution for styling HTML for the web.

That means that JavaScript solutions, although often superior to pure CSS, are out of scope for this project and will not be used. Also out of scope are handling printed versions of web pages and integration with static site generators or other formats. Thankfully, all these useful applications can be well served by separate work that builds on top of Tufte CSS.

This project is maintained but not under active development. It is considered essentially feature-complete. Refactoring and new functionality are a very low priority. However, contributions are still welcome to fix bugs or add functionality.

Deploying

  1. Make changes
  2. From shell, invoke clean-css-cli: cleancss -o tufte.min.css tufte.css
  3. Bump version in package.json
  4. From shell: npm publish

Contributing

If you notice something wrong or broken, let us know by opening an issue, or better yet, a pull request with how you think it should be fixed.

Please document your issues and fixes thoroughly. This means a clear description of the concern, steps on how to reproduce it, and (if possible) before and after screenshots and links to prior discussions or commits. Please keep pull requests to one change at a time.

Fixes and new functionality should be tested against index.html on screens as small as an iPhone 4 and as big as, well, as big as you use normally. (If you don't have a mobile device handy, fake different devices with your browser's developer tools.)

See the Issues page, especially Help Wanted, for opportunities to contribute.

Contributors

License

Released under the MIT license. See LICENSE.

Github

https://github.com/edwardtufte/tufte-css

Comments(16)

  • 1

    CSS formatting

    @daveliepmann After working on c15070ca84f19cfa994dd38bb92adccb1d4fbed7 to close the loop on #90, I discovered the odd indentation/formatting used in this project. Surprisingly I guess I’d never actually looked at the CSS source. How would you feel about using standard indentation for tufte.css?

  • 2

    ET Bembo font licensing

    Hi!

    As far as I understand, ET Bembo is not licensed for free distribution. If it is, I doubt it will be licensed under the MIT license. Could you add a paragraph about that? The font has also been added to Edward Tufte's own project without any word about this. For example, in https://github.com/edwardtufte/presenter/commit/2be716427f52c34f4d89684b5409890cb5c54235.

  • 3

    Info: Jekyll version of tufte-css

    I have just finished modifying my tufte-jekyll repo to incorporate all the recent changes in the tufte-css.

    This Jekyll blog version allows a content creator to get all this yummy tufte-css look without having to write a bunch of complicated html. Instead, content is created using Markdown and some custom Liquid tags for the cool Tufte stuff.

    There is a demo version here if anyone would like to compare. I have made some modifications to the CSS to bring the typography into more of a Bringhurst-ian vertical scale.

    Any suggestions or help are welcome.

  • 4

    button element support

    Great mini-framework. Beautiful results. Still, I'm coding interactive pages with it and wish there were... button elements. Would this be straying too far from original intent to ask for -- or possibly contrib -- such things?

  • 5

    Marginnotes don't appear in margin when in a list

    I have a marginnote in an unordered list, it looks like this:

    <ul>
      <li>Tufte-inspired stylesheet by <a href="https://edwardtufte.github.io/tufte-css/">tufte-css</a><label for="mn-6" class="margin-toggle">⊕</label><input type="checkbox" id="mn-6" class="margin-toggle"><span class="marginnote">Seriously, check out <a href="https://en.wikipedia.org/wiki/Edward_Tufte">Edward Tufte</a> and his work on information design</span></li>
    </ul>
    

    Unfortunately, the note text does not appear in the margin. Oddly, when the viewport is shrunk, I can click the "expand" icon and see the note inline, but when I restore the viewport to the original size, the marginnote disappears.

    This is the same for sidenotes and unordered lists as well.

  • 6

    Table doesn't appear in sidenote

    spec-html.txt G'day,

    I am trying to use this rather nice style for some annotated stories. I want to place a small table in a side note, but it appears far to the right of the margin (or if the span is before the closing P then it appears in the text). Is there any special reason for this? And is there any way to stop it happening?

    Francis P.S. Here is a a minimum not-really working example (attached as text):

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>The Adventure of the Speckled Band</title> <link rel="stylesheet" href="tufte.css"/> <meta name="viewport" content="width=device-width, initial-scale=1"> </head>

    <body> <article> <h1 id="tufte-css">The Adventure of the Speckled Band</h1> <p class="subtitle">A. Conan Doyle <label for="sn-spec-data" class="margin-toggle sidenote-number"></label> </p> <input type="checkbox" id="sn-spec-data" class="margin-toggle"/> <span class="sidenote"> <table> <tr><th align='left'>First published:</th><td>1982</td></tr> <tr><th align='left'>Set in:</th><td>1883</td></tr> <tr><th align='left'>Client:</th><td>Helen Stoner</td></tr> <tr><th align='left'>Villain:</th><td>Dr. Grimesby Roylott</td></tr> </table> </span> </article> </body> </html>

  • 7

    Can you add a page break tag?

    I would like to force pagebreaks when I print a web page with this style. I tried a few suggestions, e.g. http://www.htmlgoodies.com/beyond/css/article.php/3470341/CSS-and-Printing.htm

    But I could not make any of these work. Could you consider adding such a style tag?

  • 8

    css3 hyphens

    Hi,

    very nice work. In case I don't get around to making a pull-request -- this should probably enable css3 hyphens, in order to reduce the ragged-right on columns (and behave more like TeX/LaTeX):

    https://css-tricks.com/almanac/properties/h/hyphenate/

    I'd also like to see (do) some work on how the design respons to small screens -- the side-bar should collapse some how things like the Note 3. It's not immediately clear what the best way to do this is, though.

  • 9

    Underlines missing at certain zoom levels

    I have a few more custom settings so in case you can't repro this, I'd be happy to add them here.

    This is at 90% zoom: image

    100% zoom: image

    Strangely, it's back on 80% zoom: image

  • 10

    figcaption pulled to right margin for wide browser window

    With the following HTML,

            <figure>
              <img src="img/tomato.png" class="webfeedsFeaturedVisual"/>
              <figcaption>Test caption (inside).</figcaption>
            </figure>
    

    If I make the browser wide enough, the caption moves from right justified with the image to right justified with the full width.

    The following patch fixes this behavior.

    --- tufte.css
    +++ /dev/null
    @@ -125,7 +125,6 @@ figure { padding: 0;
    
     figcaption { float: right;
                  clear: right;
    -             margin-right: -48%;
                  margin-top: 0;
                  margin-bottom: 0;
                  font-size: 1.1rem;
    
  • 11

    Unnecessary Horizontal Scroll Bars

    On the latest desktop releases of Firefox, Chrome, and Opera - horizontal scroll bars are shown, even when no scrolling is possible.

    overflow

    This is caused by the use of overflow-x: scroll;

    I would suggest changing it to overflow-x: auto; to ensure that the scroll bars are only displayed when needed.

    Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x

  • 12

    .margin-toggle:checked + .sidenote ... {vertical-align: ...}

    Visual Studio Code reports error:

    "Property (vertical-align) is ignored due to display. With 'display: block', vertical align should not be used."

  • 13

    Embedding superscripts breaks line height.

    Hi again Dave.

    I've been messing around with the CSS and tried embedding some <sup>s. The line height is broken similar to #167 and I'm currently using a hacky fix (a negative top margin). I'd appreciate it if you could address this.

    image image

    The 4 on "greater" is a superscript that I added in by changing the HTML.

  • 14

    Apply section style to header and footer elements, too

    It would help in the creation of semantically-correct HTML if the header and footer elements had the same spacing that the section element does. Currently, one has to wrap the header and footer elements in the section element, which seems like tag overkill.

  • 15

    Figcaption text overlays the image on fullwidth iframe-wrapper

    This code results in the text in the figcaption overlaying the video image, instead of appearing below it. I've struggled with this for some time now, but have no suggestions on how to fix it except that it is tied to the iframe-wrapper CSS.

    Beautiful
  • 16

    Lists in sidenotes have body-sized fonts.

    screenshot

    I think, while unusual, there are cases where having a list in a sidenote is a perfectly reasonable thing to want, so this should be supported. I imagine it's a pretty easy fix, but I haven't played with the CSS for it yet.