![Page 1: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/1.jpg)
From Scrolls to Flows:Books and the New CSS
Dave Cramer / Hachette Book Group /Books in Browsers 2014
Copyright © 2014 Hachette Book Group. Created by Dave Cramer for Books in Browsers V
![Page 2: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/2.jpg)
![Page 3: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/3.jpg)
![Page 4: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/4.jpg)
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
Copyright © 2014 Hachette Book Group. Created by Dave Cramer for Books in Browsers V
![Page 5: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/5.jpg)
Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and Gospel Light, Ventura, CA. Copyright 1984. Released under new license, CC-BY-SA 3.0
![Page 6: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/6.jpg)
Source: http://w3cmemes.tumblr.com/
Copyright © 2014 Hachette Book Group. Created by Dave Cramer for Books in Browsers V
![Page 7: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/7.jpg)
![Page 8: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/8.jpg)
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, 19.40.
Copyright © 2014 Hachette Book Group. Created by Dave Cramer for Books in Browsers V
![Page 9: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/9.jpg)
overflow: visible
overflow: hidden
overflow: scrollCopyright © 2014 Hachette Book Group. Created by Dave Cramer for Books in Browsers V
![Page 10: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/10.jpg)
Overflowoverflow ( visible | hidden | scroll | auto | paged-x | paged-y | paged-x-controls | paged-y-controls | fragments )
html { overflow: paged-‐x;}
Copyright © 2014 Hachette Book Group. Created by Dave Cramer for Books in Browsers V
![Page 11: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/11.jpg)
<-‐-‐-‐-‐ 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
Copyright © 2014 Hachette Book Group. Created by Dave Cramer for Books in Browsers V
![Page 12: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/12.jpg)
![Page 13: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/13.jpg)
html
body
div
h1
Loomings
p
span
C
all me Ishmael.
head
meta title
Copyright © 2014 Hachette Book Group. Created by Dave Cramer for Books in Browsers V
![Page 14: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/14.jpg)
HTML
htmlparser
cssparser
DOM
CSSOM
Render Tree
layout
Painting Display
CSS
Copyright © 2014 Hachette Book Group. Created by Dave Cramer for Books in Browsers V
![Page 15: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/15.jpg)
html
body
div
h1
Loomings
p
span
C
all me Ishmael.
page-‐break-‐before: always;
font-‐size: 1.5em margin: 0 0 2em 0
font-‐size: 1em line-‐height: 1.4em
initial-‐letter: 3
DOM CSS
head never, ever, display this!!!
Copyright © 2014 Hachette Book Group. Created by Dave Cramer for Books in Browsers V
![Page 16: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/16.jpg)
all me Ishmael. Some years
ago, never mind how long precise
Loomings
h1
p
div
Cspan
Copyright © 2014 Hachette Book Group. Created by Dave Cramer for Books in Browsers V
![Page 17: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/17.jpg)
Copyright © 2014 Hachette Book Group. Created by Dave Cramer for Books in Browsers V
![Page 18: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/18.jpg)
Interlude: Book in Browser
Copyright © 2014 Hachette Book Group. Created by Dave Cramer for Books in Browsers V
![Page 19: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/19.jpg)
The core concept behind CSS Regions is the ability to say, Display this content (a named flow) over there (a region chain).”
—Alan Stearns
“
Copyright © 2014 Hachette Book Group. Created by Dave Cramer for Books in Browsers V
![Page 20: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/20.jpg)
Regions: Move Stuff Around
(demo)
Copyright © 2014 Hachette Book Group. Created by Dave Cramer for Books in Browsers V
![Page 21: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/21.jpg)
Page Templates: Make Boxes
(demo)
Copyright © 2014 Hachette Book Group. Created by Dave Cramer for Books in Browsers V
![Page 22: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/22.jpg)
The Runaround(demo)
Copyright © 2014 Hachette Book Group. Created by Dave Cramer for Books in Browsers V
![Page 23: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/23.jpg)
Making Captions and Headlines Less Ugly
Copyright © 2014 Hachette Book Group. Created by Dave Cramer for Books in Browsers V
![Page 24: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/24.jpg)
Making Captions and Headlines Less Ugly
Copyright © 2014 Hachette Book Group. Created by Dave Cramer for Books in Browsers V
![Page 25: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/25.jpg)
rop caps are an affectation that mocks and parodies print’s long history of bespoke illustration by mutilating the first word of a chapter.
—@fakebaldur
D
Copyright © 2014 Hachette Book Group. Created by Dave Cramer for Books in Browsers V
![Page 26: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/26.jpg)
Initial Letters on the Web are Broken
Copyright © 2014 Hachette Book Group. Created by Dave Cramer for Books in Browsers V
![Page 27: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/27.jpg)
Copyright © 2014 Hachette Book Group. Created by Dave Cramer for Books in Browsers V
![Page 28: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/28.jpg)
Copyright © 2014 Hachette Book Group. Created by Dave Cramer for Books in Browsers V
![Page 29: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/29.jpg)
Copyright © 2014 Hachette Book Group. Created by Dave Cramer for Books in Browsers V
![Page 30: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/30.jpg)
Copyright © 2014 Hachette Book Group. Created by Dave Cramer for Books in Browsers V
![Page 31: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/31.jpg)
Copyright © 2014 Hachette Book Group. Created by Dave Cramer for Books in Browsers V
![Page 32: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/32.jpg)
Todayspan.dropcap { float: left; font-‐size: 5.3em; line-‐height: .85em; margin-‐bottom: -‐.1em;}
Copyright © 2014 Hachette Book Group. Created by Dave Cramer for Books in Browsers V
![Page 33: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/33.jpg)
Garamond
Copyright © 2014 Hachette Book Group. Created by Dave Cramer for Books in Browsers V
![Page 34: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/34.jpg)
Georgia
Copyright © 2014 Hachette Book Group. Created by Dave Cramer for Books in Browsers V
![Page 35: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/35.jpg)
Palatino
Copyright © 2014 Hachette Book Group. Created by Dave Cramer for Books in Browsers V
![Page 36: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/36.jpg)
Correct
Copyright © 2014 Hachette Book Group. Created by Dave Cramer for Books in Browsers V
![Page 37: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/37.jpg)
p:first-‐letter { initial-‐letter: 3;}
Copyright © 2014 Hachette Book Group. Created by Dave Cramer for Books in Browsers V
![Page 38: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/38.jpg)
Source: http://w3cmemes.tumblr.com/
![Page 39: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/39.jpg)
ResourcesPOLYFILLShttps://github.com/adobe-‐webplatform/balance-‐texthttps://github.com/adobe-‐webplatform/dropcap.js
MEGAFILLShttp://sorotokin.com/adaptive-‐layout/
SPECShttp://www.idpf.org/epub/pgt/http://dev.w3.org/csswg/css-‐regions/http://dev.w3.org/csswg/css-‐page-‐template/http://dev.w3.org/csswg/css-‐break/http://dev.w3.org/csswg/css-‐inline/http://dev.w3.org/csswg/css-‐overflow-‐3/
LEARNINGhttp://www.html5rocks.com/en/tutorials/internals/howbrowserswork/http://fantasai.inkedblade.net/weblog/2011/inside-‐csswg/
Copyright © 2014 Hachette Book Group. Created by Dave Cramer for Books in Browsers V
![Page 40: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/40.jpg)
w3cmemes.tumblr.comSource: http://w3cmemes.tumblr.com/
Copyright © 2014 Hachette Book Group. Created by Dave Cramer for Books in Browsers V
![Page 41: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/41.jpg)
Have fun joining the interest group!
![Page 42: From Scrolls to Flows: Books and the New CSS...Created by Dave Cramer for Books in Browsers V Biblical illustrations by Jim Padgett, courtesy of Sweet Publishing, Ft. Worth, TX, and](https://reader035.vdocuments.mx/reader035/viewer/2022071414/610d8af932cabf083e0ef5e4/html5/thumbnails/42.jpg)
Dave CramerHachette Book Group
[email protected]@dauwhe
Copyright © 2014 Hachette Book Group. Created by Dave Cramer for Books in Browsers V