> Markdown version of [/videos/517-can-css-recreate-tufte-s-designs?t=5](https://www.wearedevelopers.com/videos/517-can-css-recreate-tufte-s-designs?t=5). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Can CSS recreate Tufte's designs?

Can modern CSS replace InDesign for high-end print publishing? Discover how to programmatically recreate Edward Tufte’s famously complex book layouts using just HTML and CSS.

- **Speakers:** Håkon Wium Lie
- **Event:** World Congress 2022
- **Published:** June 15, 2022
- **Duration:** 28:00
- **URL:** https://www.wearedevelopers.com/videos/517-can-css-recreate-tufte-s-designs

## Summary

The web's early visual limitations prompted the creation of CSS to merge structured scientific data with rich typographic traditions. Today, this evolution extends into high-end print publishing. By transitioning away from expensive, specialized desktop publishing software like InDesign, developers can recreate intricate physical book layouts—such as the highly detailed, complex designs of Edward Tufte—using only HTML, CSS, and a touch of JavaScript. As the industry evolves, utilizing common web formats proves to be a highly efficient bridge for professional-grade document generation, proving that "the only way for the book to survive is to start making them from HTML and CSS."\n\nBuilding a coffee table-quality book programmatically relies on the CSS Paged Media module alongside modern page float proposals. Fundamental book elements like custom page sizes, margins, page counters, and running headers are seamlessly handled using standard rules and the string-set property. To achieve Tufte’s signature side notes and wide figures, new layout methodologies introduce intent-rich keywords like float: top and float: right-note. These programmatic additions gracefully manage layout conflicts, ensuring full-width images prioritize space before positioning contextual margin annotations. Clever CSS implementations also accommodate full-bleed image spreads across adjacent pages by purposefully expanding and clipping elements over the document's central fold.\n\nBeyond layout structuring, attaining high-quality typography requires precise alignment and declarative text manipulation. Experimental properties like text-replace allow automated typesetting corrections—such as injecting em-dashes and proper punctuation spacing—without cluttering the underlying HTML markup. While traditional desktop publishing limits content to physical mediums, this web-native approach is fully responsive. Developers can output perfect PDFs for print while using minimal JavaScript to convert those same static layouts into mobile-friendly web pages where side notes collapse into interactive toggles. Ultimately, while meticulous optical margin alignment still heavily relies on human craft, CSS provides a comprehensive toolkit for advanced, maintainable book production.

**Keywords:** css paged media, edward tufte web design, html-to-pdf generation, css page floats, side note positioning, typography layout patterns, print stylesheet development, responsive book design, desktop publishing alternatives, string-set property usage, optical margin alignment, baseline alignment typography, page formatting css, running headers css, css text-replace usage

## Chapters

1. **Recreating complex print layouts with CSS technologies** (00:05) — How standard web formats can replace expensive design software for generating high-quality printed publications.
1. **Bridging scientific structure and typography with CSS** (01:19) — The historical evolution from early unstyled web pages to the adoption of print-inspired cascading style sheets.
1. **Establishing physical book layouts with CSS paged media** (05:11) — Using CSS rules to define physical document dimensions, margin scales, and dynamically generated running headers.
1. **Structuring side notes and figures using page floats** (09:39) — Extending baseline float declarations to reliably position elements against physical page edges and designated margin spaces.
1. **Spanning continuous images across a two-page printed spread** (16:08) — Generating selectable PDF elements and leveraging duplicate overlap hacks to simulate smooth image continuity across separated physical pages.
1. **Recognizing the limitations of CSS for optical alignment** (19:54) — Why manual human adjustments remain necessary for fine-tuning layout elements that appear visually flawed despite mathematical accuracy.
1. **Adapting complex print configurations for interactive screen browsing** (21:49) — Applying responsive behavior and supplemental scripts to collapse static print margins into accessible screen interactions.
1. **Automating typography adjustments with CSS text replacements** (25:19) — Injecting specialized Unicode punctuation using automated style substitution to enforce strict typographic standards.

## Related Moments

- [Formatting printable documents with page media CSS](https://www.wearedevelopers.com/videos/1850-wearedevelopers-live-css-or-bs) (from "WeAreDevelopers LIVE - CSS or BS?")
- [Introduction to modern CSS capabilities for designers](https://www.wearedevelopers.com/videos/835-what-s-new-in-css-for-designers) (from "What's new in CSS for Designers?")
- [Evaluating the future utility of CSS Houdini web standards](https://www.wearedevelopers.com/videos/641-is-css-houdini-finally-usable-in-2023) (from "Is CSS Houdini finally usable in 2023?")
- [Understanding the fundamental role of CSS in web development](https://www.wearedevelopers.com/videos/366-level-up-your-angular-css-with-tailwind-css) (from "Level up your Angular CSS with Tailwind CSS")
- [Strategies for keeping up with advanced CSS evolution](https://www.wearedevelopers.com/videos/835-what-s-new-in-css-for-designers) (from "What's new in CSS for Designers?")
- [Managing the growing complexity of modern CSS capabilities](https://www.wearedevelopers.com/videos/1761-wearedevelopers-live-frontend-inspirations-web-standards-and-more) (from "WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more")

## Related Articles

- [Declarative Design and a fresh take on collaboration with developers](https://www.wearedevelopers.com/magazine/595-declarative-design-and-a-fresh-take-on-collaboration-with-developers)
- [3 JavaScript-Free Techniques for Accordions, Dialogs, and Table of Contents](https://www.wearedevelopers.com/magazine/684-3-javascript-free-techniques-for-accordions-dialogs-and-table-of-contents)
- [Tips and Tricks: CSS Pseudo Elements and Pseudo Selectors](https://www.wearedevelopers.com/magazine/510-tips-and-tricks-css-pseudo-elements-and-pseudo-selectors)
- [Top 7 CSS Frameworks in 2025](https://www.wearedevelopers.com/magazine/362-top-7-css-frameworks-in-2025)

## Related Jobs

- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/639235-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/679408-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/645320-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/683045-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/646086-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/356601-remote-senior-full-stack-engineer) at **Edge Impulse**