> Markdown version of [/videos/172-how-to-write-a-book-with-css?t=2](https://www.wearedevelopers.com/videos/172-how-to-write-a-book-with-css?t=2). 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).

---

# How to write a book with CSS

Think CSS is only for screens? Discover how to leverage page rules and micro-typography to typeset professional-grade physical books entirely with code.

- **Speakers:** Håkon Wium Lie
- **Event:** World Congress 2021
- **Published:** June 30, 2021
- **Duration:** 40:25
- **URL:** https://www.wearedevelopers.com/videos/172-how-to-write-a-book-with-css

## Summary

The evolution of CSS traces back to 1994 at CERN, where it emerged as a declarative way to separate visual presentation from HTML's semantic structure. Initially designed to solve basic styling needs like font sizes and colors without relying on bandwidth-heavy images, CSS has grown to handle complex transformations, animations, and sophisticated layouts. Its core philosophy remains intact: giving authors and designers powerful visual tools through intuitive, human-readable syntax that doesn't require advanced programming skills to master.

While modern web development focuses heavily on screen rendering, CSS offers robust capabilities for traditional print typography. Formatting physical books requires shifting from scrolling interfaces to paginated media. This involves utilizing the `@page` rule to define physical dimensions, setting up automated page counters, and managing left-and-right page spreads. Replicating the refined layout techniques developed over centuries of typesetting proves that the web's styling language can effectively replace proprietary layout software for creating tangible media.

Creating professional-grade books with CSS demands precise control over figure placement and text flow. Proposed extensions to the float property allow images to anchor to the top, bottom, or outside margins of a page, while multi-column layouts can defer content to specific columns or right-hand pages for targeted placements. Furthermore, achieving high-quality micro-typography—such as replacing double hyphens with true em-dashes or adjusting punctuation spacing—can be managed declaratively using properties like text-replace. Ultimately, rendering printed books with HTML and CSS serves as both a masterclass in typographical aesthetics and a bridge between digital code and physical formatting.

**Keywords:** print css styling, document pagination techniques, css page media rules, multi-column book layout, advanced css floats, deferred content positioning, micro-typography css, text-replace property, declarative web design, physical layout properties, html typesetting, automated table of contents, paged media standards, early web development history

## Chapters

1. **Origins of cascading style sheets at CERN** (00:02) — Managing immense data at the CERN laboratory created the specific technical needs that birthed cascading style sheets.
1. **Basic textual and visual formatting in early CSS** (01:36) — Early property additions simplified web styling by replacing image-based attributes with declarative font and background settings.
1. **Advancements in CSS3 properties for visual effects** (05:10) — Cascading style sheets eliminated complex scripting requirements by introducing declarative visual properties like dynamic hardware-accelerated animations.
1. **Applying CSS techniques to printed book typography** (11:16) — Screen-based style sheets enable digital authors to replicate traditional offline typography guidelines for physical book formats.
1. **Handling pagination and page numbering in CSS layouts** (14:48) — Splitting content across physical pages requires specialized layout properties for defining page sizes and custom numbering counters.
1. **Positioning images and figures in multi-column printed pages** (16:47) — Floating and deferring figures across columns or entire document pages produces continuous magazine-style layouts matching physical texts.
1. **Creating cross-page image spreads using split CSS figures** (23:14) — Rendering a continuous illustration across a split physical book binding requires duplicated image elements and strategic negative margins.
1. **Enhancing print typography with automated text replacements** (25:13) — Experimental text replacement properties automate the injection of precise typographic spacing and proper Unicode punctuation during print generation.
1. **Formatting physical books and the aesthetic impact of CSS** (27:50) — Modern semantic structures allow technical authors to format personal manuscripts into functional physical books using familiar web standards.
1. **Audience questions on design control and printed CSS standards** (30:56) — Community inquiries highlight ongoing obstacles involving browser-specific syntax features, automated table generations, and standardized logical layout metrics.

## Related Moments

- [Recreating complex print layouts with CSS technologies](https://www.wearedevelopers.com/videos/517-can-css-recreate-tufte-s-designs) (from "Can CSS recreate Tufte's designs?")
- [Establishing physical book layouts with CSS paged media](https://www.wearedevelopers.com/videos/517-can-css-recreate-tufte-s-designs) (from "Can CSS recreate Tufte's designs?")
- [Bridging scientific structure and typography with CSS](https://www.wearedevelopers.com/videos/517-can-css-recreate-tufte-s-designs) (from "Can CSS recreate Tufte's designs?")
- [Formatting printable documents with page media CSS](https://www.wearedevelopers.com/videos/1850-wearedevelopers-live-css-or-bs) (from "WeAreDevelopers LIVE - CSS or BS?")
- [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")
- [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?")

## Related Articles

- [Tips and Tricks: CSS Pseudo Elements and Pseudo Selectors](https://www.wearedevelopers.com/magazine/510-tips-and-tricks-css-pseudo-elements-and-pseudo-selectors)
- [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)
- [Top 7 CSS Frameworks in 2025](https://www.wearedevelopers.com/magazine/362-top-7-css-frameworks-in-2025)

## Related Jobs

- [Senior Web Developer BundesMessenger](https://www.wearedevelopers.com/jobs/ext/3194664-senior-web-developer-bundesmessenger) at **BWI GmbH**
- [Senior Design Engineer](https://www.wearedevelopers.com/jobs/ext/2644934-senior-design-engineer) at **GitHub**
- [Senior Product UI Designer](https://www.wearedevelopers.com/jobs/ext/1998621-senior-product-ui-designer) at **Almedia**
- [Staff Engineer - Web Platform](https://www.wearedevelopers.com/jobs/ext/3243034-staff-engineer-web-platform) at **Intercom, Inc.**
- [Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/2731832-frontend-engineer) at **Almedia**
- [Werkstudent UI/UX Design](https://www.wearedevelopers.com/jobs/ext/3067207-werkstudent-ui-ux-design) at **BWI GmbH**