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

pagedmedia.org

julie-blanc.fr

contact@julie-blanc.fr

@julieblancfr