Can CSS recreate Tufte's designs?

CSS was inspired by Edward Tufte's book designs in 1994. But can it faithfully recreate them today?

#1about 5 minutes

The origins of CSS and typographic inspiration

The web's early visual limitations led to the creation of CSS, which borrowed concepts from the rich history of typography exemplified by Edward Tufte's books.

#2about 4 minutes

Recreating basic book layouts with paged media

CSS for paged media allows for defining page size, margins, page numbers, and running headers to establish a book's fundamental structure.

#3about 7 minutes

Proposing new CSS for advanced page floats

New CSS float properties like `top`, `bottom`, and `right-note` are proposed to handle complex layouts with figures and sidenotes in paged media.

#4about 4 minutes

Creating full-spread layouts across two pages

A technique involving duplicate elements with oversized widths allows a single image or heading to seamlessly span across a two-page spread.

#5about 2 minutes

The role of human craft in optical alignment

While CSS can automate much of the layout, achieving perfect optical alignment often requires human judgment to adjust elements so they look correct.

#6about 3 minutes

Adapting print designs for responsive screens

JavaScript can enhance the user experience on small screens by transforming sidenotes into interactive, collapsible elements and ensuring baseline alignment for images.

#7about 2 minutes

Enhancing typography with CSS text replacement

The `text-replace` property allows for automatically substituting character sequences with proper typographic symbols like em-dashes and correct spacing.

#8about 1 minute