HTML and CSS books:
An introduction to automatic typesetting
Julie Blanc
Coko team meeting – April 2018, Athens
CSS3 @media syntax for print
Print-friendly CSS modules
CSS Paged Media Module
CSS Generated Content for Paged Media Module
CSS page floats
Problems right now
- not implemented at all in the browsers
- implemented in command-line rendering machines
- this proprietary software have expensive pricing models…
- … and no developpement tools (generate the PDF with each change)
Proprietary software in command line
Exception : Vivliostyle (based on the EPUB Adaptive Layout specifications)
Paged Media Initiative
A suite of Javascripts to paginate HTML/CSS in the browser, and to apply PagedMedia controls to paginated content for the purposes of exporting print-ready, or display-friendly, PDF from the browser
1 — Starting: a flow of content
Starting the book in the browser
2 — Pages
Fragment content into pages
3 — Page breaks
Page breaks
Page breaks (CSS code)
widows and orphans
widows and orphans
forced page break
no forced page break with floats
Page breaks fine control (CSS code)
4 — Line breaks
Justification
Justification = space problems
With hypens, it's better
With hypens, it's better
New problem: too many hyphenation
Two hyphens max
Line breaks fine control (CSS code)
Lonely letter at the end of the line
Non-breaking spaces in HTML
Flags when justifying left
Non-breaking spaces in HTML
Better result
Balancing title lines (case 1)
Balancing title lines with regex ?
Balancing title lines (case 2)
Balancing title lines with a script ? → meaning problem
5 — Counters (pages, parts, chapters...)
To create a counter, we need:
- reset
- increment
- positionning
- type
Counters (CSS code)
Counters
6 — Running headers
Running headers
Running headers (CSS code)
7 — Page models
Pseudo class selector for pages
Named pages
Page models
8 — Baseline grid
Problem: no baseline grid
Snap all element on the baseline grid
9 — Books elements (navigation)
9 — Books elements (navigation)
- Table of contents
- List of plates
- Cross references
- Index
Table of content
Table of content (HTML code)
Table of content (CSS code)
9 — Books elements (navigation)
- Table of contents
- List of plates
- Cross references
- Index
9 — Books elements (navigation)
- Table of contents
- List of plates
- Cross references
- Index
Sample of cross reference
Code for cross references
9 — Books elements (navigation)
- Table of contents
- List of plates
- Cross references
- Index
10 — Positionning elements in the page
Float property
Float property (CSS code)
Float page properties
Float page properties (CSS code)
A usefull float page keywords: snap()
Float page keywords: snap() (CSS code)
Notes positionning
julie-blanc.fr
contact@julie-blanc.fr
@julieblancfr