WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
World Congress 2022 • Jun 15, 2022

Can CSS recreate Tufte's designs?

Håkon Wium Lie

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.

Pause
Mute Enter Fullscreen
#1 about 2 min

Recreating complex print layouts with CSS technologies

How standard web formats can replace expensive design software for generating high-quality printed publications.

#2 about 4 min

Bridging scientific structure and typography with CSS

The historical evolution from early unstyled web pages to the adoption of print-inspired cascading style sheets.

#3 about 5 min

Establishing physical book layouts with CSS paged media

Using CSS rules to define physical document dimensions, margin scales, and dynamically generated running headers.

#4 about 7 min

Structuring side notes and figures using page floats

Extending baseline float declarations to reliably position elements against physical page edges and designated margin spaces.

#5 about 4 min

Spanning continuous images across a two-page printed spread

Generating selectable PDF elements and leveraging duplicate overlap hacks to simulate smooth image continuity across separated physical pages.

#6 about 2 min

Recognizing the limitations of CSS for optical alignment

Why manual human adjustments remain necessary for fine-tuning layout elements that appear visually flawed despite mathematical accuracy.

#7 about 4 min

Adapting complex print configurations for interactive screen browsing

Applying responsive behavior and supplemental scripts to collapse static print margins into accessible screen interactions.

#8 about 3 min

Automating typography adjustments with CSS text replacements

Injecting specialized Unicode punctuation using automated style substitution to enforce strict typographic standards.

Matching moments

58 sec

Formatting printable documents with page media CSS

Chris Heilmann +2 · LIVE

2:04 min

Introduction to modern CSS capabilities for designers

Onur Gumus · LIVE

2:55 min

Evaluating the future utility of CSS Houdini web standards

Tanja Ulianova · WWC 2023

1:01 min

Understanding the fundamental role of CSS in web development

Patricio Vargas · LIVE

6:37 min

Strategies for keeping up with advanced CSS evolution

Onur Gumus · LIVE

4:41 min

Managing the growing complexity of modern CSS capabilities

Chris Heilmann +2 · LIVE

More from World Congress 2022

What the heck do "declarative" and "reactive" actually mean? thumbnail
30:40
almost 4 years ago

What the heck do "declarative" and "reactive" actually mean?

André Kovac

The Design and Evolution of C++ thumbnail
1:01:15
about 4 years ago

The Design and Evolution of C++

Bjarne Stroustrup

But, you're not Facebook thumbnail
31:12
about 4 years ago

But, you're not Facebook

Kristijan Ristovski

Communicate efficiently with Software Architecture Diagrams thumbnail
28:11
about 4 years ago

Communicate efficiently with Software Architecture Diagrams

Simon Lasselsberger

Get Ready for Jakarta EE 10! thumbnail
42:53
about 4 years ago

Get Ready for Jakarta EE 10!

Ivar Grimstad

Keep your code refactorable thumbnail
26:46
about 4 years ago

Keep your code refactorable

Gerrit Stapper

Upcoming sessions on this topic

Open session

World Congress 2026 North America

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

Fast by Design: A Masterclass in High-Performance Web Engineering

Aaron Grogg

Senior web developer, committed to improving the user experience by improving web performance

Aaron Grogg
Open session

World Congress 2026 North America

Secure-by-Inclusion: Preventing Accessibility Barriers from Becoming Security Vulnerabilities

Radostina (Ina) Tsvetkova

Norwegian Directorate of Labour and Welfare (NAV), Senior Advisor in Digital Accessibility and Inclusive Design

Radostina (Ina) Tsvetkova
Open session

World Congress 2026 North America

Small LLM in your Browser: Huge Opportunities for Web Applications

Daniel Ostrovsky

UI/UX Architect at Payoneer | AI Architect | Full Cycle Development Expert | Public Speaker | Open Source Contributor |

Daniel Ostrovsky
Open session

World Congress 2026 North America

When Humans Stop Writing Code: Rethinking Languages, Compilers, and Responsibility

Simon Auer

Organizer of flutter vienna meetup and CEO of marqably

Simon Auer
Open session

World Congress 2026 North America

In-Person by Default: Principles & Practices for Building Developer Meetups

Steve Chen

Executive Director and Founder at Code & Coffee

Steve Chen

Related videos

What's new in CSS for Designers? thumbnail
59:20
LIVE • over 2 years ago

What's new in CSS for Designers?

Onur Gumus

WeAreDevelopers LIVE - Web Typography; CSS Layout features; Staying curious in an AI world and more thumbnail
1:10:55
LIVE • over 1 year ago

WeAreDevelopers LIVE - Web Typography; CSS Layout features; Staying curious in an AI world and more

Chris Heilmann, Daniel Cranney, Jason Pamental

WeAreDevelopers LIVE - CSS or BS? thumbnail
52:59
LIVE • 4 months ago

WeAreDevelopers LIVE - CSS or BS?

Chris Heilmann, Daniel Cranney, Keith Cirkel

Future-Proof CSS thumbnail
37:55
WWC 2022 • about 4 years ago

Future-Proof CSS

Ire Aderinokun

WeAreDevelopers LIVE - CSS is DOOMed thumbnail
1:01:17
LIVE • 4 months ago

WeAreDevelopers LIVE - CSS is DOOMed

Chris Heilmann, Daniel Cranney, Niels Leenheer

Learn Enough Design to Be Dangerous thumbnail
1:02:13
LIVE • about 3 years ago

Learn Enough Design to Be Dangerous

Kathryn Grayson Nanz

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.