From Scrolls to Flows: Books and the New CSS

Size: px

Start display at page:

Download "From Scrolls to Flows: Books and the New CSS"

Tyrone Parker
5 years ago
Views:

1 From Scrolls to Flows: Books and the New CSS Dave Cramer / Hachette Book Group / Books in Browsers 2014

4 a few of Our demands Most of us want to make pages We want to move stuff around We want to control where to put stuff We want text running around images Some of us want drop caps We want balanced headlines

5 Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and Gospel Light, Ventura, CA. Copyright Released under new license, CC-BY-SA 3.0

6 Source:

8 Makeup is a highly skilled procedure. If the text is merely divided mechanically into portions of equal length, without regard to where the divisions fall, some of the pages that result are bound to be unacceptable logically or aesthetically: they will incorporate bad breaks. Chicago Manual of Style, 14th Edition,

9 overflow: visible overflow: hidden overflow: scroll

10 Overflow overflow ( visible hidden scroll auto paged-x paged-y paged-x-controls paged-y-controls fragments ) html { } overflow: paged- x;

11 < width / inline- size > top side/ block- start side A left side/ inline direction > right side/ inline- start side inline- end side block * horizontal * height/ direction *writing mode* x- - > block- size V V bottom side/ y block- end side V

13 html head body meta title div h1 p Loomings span all me Ishmael. C

14 html parser layout HTML DOM Render Tree Painting Display CSS CSSOM css parser

15 DOM CSS html head never, ever, display this!!! body div page- break- before: always; h1 font- size: 1.5em margin: 0 0 2em 0 Loomings p font- size: 1em line- height: 1.4em span initial- letter: 3 C all me Ishmael.

16 Loomings div h1 span C all me Ishmael. Some years p ago, never mind how long precise

18 Interlude: Book in Browser

19 The core concept behind CSS Regions is the ability to say, Display this content (a named flow) over there (a region chain). Alan Stearns

20 Regions: Move Stuff Around (demo)

21 Page Templates: Make Boxes (demo)

22 The Runaround (demo)

23 Making Captions and Headlines Less Ugly

24 Making Captions and Headlines Less Ugly

25 D rop caps are an affectation that mocks and parodies print s long history of bespoke illustration by mutilating the first word of a

26 Initial Letters on the Web are Broken

32 Today span.dropcap { float: left; font- size: 5.3em; line- height:.85em; margin- bottom: -.1em; }

33 Garamond

34 Georgia

35 Palatino

36 Correct

37 p:first- letter { } initial- letter: 3;

38 Source:

39 Resources POLYFILLS webplatform/balance- text webplatform/dropcap.js MEGAFILLS layout/ SPECS regions/ page- template/ break/ inline/ overflow- 3/ LEARNING csswg/

40 Source: w3cmemes.tumblr.com

41 Have fun joining the interest group!

42 Dave Cramer Hachette Book

Using CSS for page layout

Using CSS for page layout Advantages: Greater typographic control Style is separate from structure Potentially smaller documents Easier site maintenance Increased page layout control Increased accessibility