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 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 · World Congress 2023

1:01 min

Understanding the fundamental role of CSS in web development

Patricio Vargas · LIVE

3:37 min

Responsive layout challenges and user customization

6:37 min

Strategies for keeping up with advanced CSS evolution

Onur Gumus · LIVE

More from World Congress 2022

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

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

André Kovac

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

The Design and Evolution of C++

Bjarne Stroustrup

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

But, you're not Facebook

Kristijan Ristovski

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

Communicate efficiently with Software Architecture Diagrams

Simon Lasselsberger

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

Get Ready for Jakarta EE 10!

Ivar Grimstad

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

Keep your code refactorable

Gerrit Stapper

Related videos

What's new in CSS for Designers? thumbnail
59:20
LIVE • almost 3 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 • 6 months ago

WeAreDevelopers LIVE - CSS or BS?

Chris Heilmann, Daniel Cranney, Keith Cirkel

Future-Proof CSS thumbnail
37:55
World Congress 2022 • over 4 years ago

Future-Proof CSS

Ire Aderinokun

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

WeAreDevelopers LIVE - CSS is DOOMed

Chris Heilmann, Daniel Cranney, Niels Leenheer

WeAreDevelopers LIVE - Is CSS Catching Up to Flash? thumbnail
1:03:33
LIVE • 13 days ago

WeAreDevelopers LIVE - Is CSS Catching Up to Flash?

Chris Heilmann, Daniel Cranney, Bramus Van Damme

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.