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
Tools and a call to create your own books
A list of tools for generating PDFs from web technologies is provided, along with encouragement for everyone to write and design their own books.
Related jobs
Jobs that call for the skills explored in this talk.
CSS-Only Scroll-Driven AnimationsScroll-linked animations look slick, but until now it often meant writing a fair amount of JavaScript, scroll event listeners, getBoundingClientRect(), class toggling and so on, with UX benefits often offset by performance downsides.
CSS scroll-drive...
Daniel Cranney
Creating a Spotlight Text Effect with CSS and JavaScriptEvery now and then it’s fun to build something small just to get a better grip on a concept, and this one’s a great example.
We’ll explore how to make a simple spotlight text effect that helps you understand how to follow the cursor, use CSS variable...
Daniel Cranney
Tether Elements Without JavaScript with CSS Anchor PositioningConsidering how powerful CSS is, positioning elements relative to other ones for components like tooltips has often involved JavaScript along the way, revealing a weakness in the CSS spec.
Well, baseline since 2026, CSS anchor positioning makes it mu...
Chris Heilmann
Building a "shoutout" component in plain HTML/CSS/JavaScriptEvery Wednesday we meet at noon to talk about a lot of tech news, tools and resources in something we call WeAreDevelopers Live . We go live on YouTube and afterwards we cut out short videos to post on social media. What we needed was an obvious “sho...
From learning to earning
Jobs that call for the skills explored in this talk.