Vertical Rhythm (and Alignment) Elika J. Etemad aka fantasai W3C - - PowerPoint PPT Presentation

▶
vertical rhythm
SMART_READER_LITE
LIVE PREVIEW

Vertical Rhythm (and Alignment) Elika J. Etemad aka fantasai W3C - - PowerPoint PPT Presentation

Nov 26, 2023 26 likes •1.11k views

Vertical Rhythm (and Alignment) Elika J. Etemad aka fantasai W3C CSS Working Group Invited Expert Typographers Line Placement Model Goal: Look pretty. Tools: Measure and adjust. Top line visually aligns with other things. Align Me! Here's

slide-1
SLIDE 1

Vertical Rhythm

(and Alignment) Elika J. Etemad aka fantasai

W3C CSS Working Group Invited Expert

slide-2
SLIDE 2

Typographer’s Line Placement Model

Goal: Look pretty. Tools: Measure and adjust.

slide-3
SLIDE 3

Top line visually aligns with other things.

Align Me!

Here's some paragraph text following the heading, which should wrap around the float eventually, assuming it's long enough to reach a few lines below the bottom of it...

slide-4
SLIDE 4

Space lines for pleasant reading and to accommodate ascenders/descenders/superscripts/subscripts/ruby.

slide-5
SLIDE 5

Consistent baseline-to-baseline spacing creates vertical rhythm.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

  • consequat. Duis aute irure dolor in reprehenderit in

voluptate velit esse cillum dolore eu fugiat nulla pariatur .

Excepteur sint

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed d l

slide-6
SLIDE 6

If your stuff overlaps it’s your fault.

FRANÇOIS RÉMY

So review and tweak your things before you print them!

slide-7
SLIDE 7

CSS Line Box Model

Goal: Don't overlap content. Tools: Boxes.

slide-8
SLIDE 8
  • 1. Put a bunch of stuff on a line.
slide-9
SLIDE 9
  • 2. Draw a box around it.
slide-10
SLIDE 10
  • 3. Stack up the line boxes.
slide-11
SLIDE 11
  • 3. Stack up the line boxes.
slide-12
SLIDE 12
  • 4. All done!
slide-13
SLIDE 13

Vertical Rhythm

slide-14
SLIDE 14
slide-15
SLIDE 15
slide-16
SLIDE 16

Intra-Paragraph + Inter-Paragraph + Interrupts

slide-17
SLIDE 17

Intra-Paragraph Spacing

slide-18
SLIDE 18

Fixing the Line Layout Model

Goal: Make typographers happy. Also, don't overlap the content.

slide-19
SLIDE 19

CSS Line Layout Today

slide-20
SLIDE 20

What are the sizes?

slide-21
SLIDE 21

Sizes found from font metrics

slide-22
SLIDE 22

It could be so simple...

1em

Ép

Ahem

Ap

Sawasdee

slide-23
SLIDE 23

Identical fon

t
  • size, varying fon
t
  • fam
ily

Ap

Sawasdee

Ap

Arial

Ap

Arial Unicode MS Ap Bank Gothic Ap Bernhard Fashion

Ap

Forte
slide-24
SLIDE 24

Identical fon

t
  • size, varying fon
t
  • fam
ily

Ap

Sawasdee

Ap

Arial

Ap

Arial Unicode MS Ap Bank Gothic Ap Bernhard Fashion

Ap

Forte
slide-25
SLIDE 25 line-height: # | len | % | normal
slide-26
SLIDE 26 line-height: 1.5; /* 1.5 × font-size */
slide-27
SLIDE 27

Half-leading

1.5em

1em + leading

Ap

1.5em font height + leading

slide-28
SLIDE 28 lin e-h eigh t : 1.5
slide-29
SLIDE 29

Why half-leading instead of line gaps?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur . Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

slide-30
SLIDE 30
slide-31
SLIDE 31

Base Case: Paragraph of Text, No Font Changes

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore

et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

lin e-h eigh t : 1.2
slide-32
SLIDE 32

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

  • consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum

dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

slide-33
SLIDE 33

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

  • consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum

dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

slide-34
SLIDE 34

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

  • consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum

dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

slide-35
SLIDE 35

Complication #1: Varying Font Families

slide-36
SLIDE 36

Ap

Sawasdee

Ap

Arial

Ap

Arial Unicode MS Ap Bank Gothic Ap Bernhard Fashion

Ap

Forte lin e-h eigh t : 1.5
slide-37
SLIDE 37

Ap

Sawasdee

Ap

Arial

Ap

Arial Unicode MS Ap Bank Gothic Ap Bernhard Fashion

Ap

Forte lin e-h eigh t : 1.5
slide-38
SLIDE 38

Ap

Sawasdee

Ap

Arial

Ap

Arial Unicode MS Ap Bank Gothic Ap Bernhard Fashion

Ap

Forte lin e-h eigh t : 1.5
slide-39
SLIDE 39

Small Wins: Ignoring Fallback Font Metrics

My name is 艾俐俐.

“The first available font is defined to be the first available font that would match the U+0020 (space) character.”

slide-40
SLIDE 40 line-height: normal

A 2 三

d E q
slide-41
SLIDE 41
slide-42
SLIDE 42

Happiness is Rare

CSS Model Typographer’s Model (No change in font-size, font-family, or vertical-align)

slide-43
SLIDE 43
slide-44
SLIDE 44

Fixing Intra-Paragraph Spacing

slide-45
SLIDE 45

How to Have Perfect Rhythm Start with the root inline box. Ignore all its contents. Perfect rhythm! But what about overlap?

slide-46
SLIDE 46

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

  • consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum

dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

slide-47
SLIDE 47

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

  • consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum

dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

slide-48
SLIDE 48

How to Have Perfect Rhythm Start with the root inline box. Ignore all its contents. Perfect rhythm! But what about overlap?

slide-49
SLIDE 49

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

  • consequat. Duis aute irure dolor in reprehenderit in voluptate

velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

slide-50
SLIDE 50

Redefining “fit within a line box”

slide-51
SLIDE 51

“fit”

container ← item

slide-52
SLIDE 52

Defining the container

A B C

D

Safe Model

Grow if item overflows root line-height.

Sparse Model

Grow if item overflows root line-height + 1/2 line gap.

Absolute Model

Ignore all inline contents. Bigger items always

  • verflow.
slide-53
SLIDE 53
slide-54
SLIDE 54

Defining the item Leading Box Model Margin Box Model?

slide-55
SLIDE 55
slide-56
SLIDE 56 Content Area
slide-57
SLIDE 57 Content Area
slide-58
SLIDE 58

Content Area = Font Height Area

Ap

Sawasdee

Ap

Arial

Ap

Arial Unicode MS Ap Bank Gothic Ap Bernhard Fashion

Ap

Forte
slide-59
SLIDE 59
slide-60
SLIDE 60

Old Model

Ap

Sawasdee

Ap

Arial

Ap

Arial Unicode MS Ap Bank Gothic Ap Bernhard Fashion

Ap

Forte
slide-61
SLIDE 61
slide-62
SLIDE 62

New Normal?

Ap

Sawasdee

Ap

Arial

Ap

Arial Unicode MS Ap Bank Gothic Ap Bernhard Fashion

Ap

Forte
slide-63
SLIDE 63
slide-64
SLIDE 64 line-sizing: legacy | normal legacy

Do what CSS2.1 says

normal

TBD! (Help us D?)

slide-65
SLIDE 65

</Intra-Paragraph Spacing>

slide-66
SLIDE 66

Inter-Paragraph Spacing!

slide-67
SLIDE 67

Margins!

p { margin: 1em 0; }

slide-68
SLIDE 68

Margins!

p { line-height: 1.5em; margin: 1.5em 0; }

slide-69
SLIDE 69

Margins!

p { line-height: 1.5em; margin: 1lh 0; }

slide-70
SLIDE 70

Interrupting the Rhythm

slide-71
SLIDE 71

Strict Rhythm...

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

  • consequat. Duis aute irure dolor in reprehenderit in

voluptate velit esse cillum dolore eu fugiat nulla pariatur .

Excepteur sint

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed d l

slide-72
SLIDE 72
slide-73
SLIDE 73

Strict Rhythm...

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

  • consequat. Duis aute irure dolor in reprehenderit in

voluptate velit esse cillum dolore eu fugiat nulla pariatur .

Excepteur sint

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed d l

slide-74
SLIDE 74
slide-75
SLIDE 75

Strict rhythms are important for multicol

slide-76
SLIDE 76

Loose Rhythm...

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

  • consequat. Duis aute irure dolor in reprehenderit in

voluptate velit esse cillum dolore eu fugiat nulla pariatur .

Excepteur sint

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed d l

slide-77
SLIDE 77
slide-78
SLIDE 78

Block Step Sizing

https://www.w3.org/TR/css-rhythm/

slide-79
SLIDE 79

block-step-size: <length> Requires used height = n × <length>, for an integer n

slide-80
SLIDE 80

block-step-insert: margin | padding

slide-81
SLIDE 81

block-step-align: auto | center | start | end

slide-82
SLIDE 82

intra What happens at page/column breaks?

slide-83
SLIDE 83
slide-84
SLIDE 84

</Inter-Paragraph Spacing>

slide-85
SLIDE 85

Trimming Text

slide-86
SLIDE 86 Align Me!

Here's some paragraph text following the heading, which should wrap around the float eventually, assuming it's long enough to reach a few lines below the bottom of it...

slide-87
SLIDE 87

Delete the top margin...

Align Me!

Here's some paragraph text following the heading, which should wrap around the float eventually, assuming it's long enough to reach a few lines below the bottom of it...

slide-88
SLIDE 88

Add negative margin???

Align Me!

Here's some paragraph text following the heading, which should wrap around the float eventually, assuming it's long enough to reach a few lines below the bottom of it...

slide-89
SLIDE 89

>_____<

Align Me!

Here's some paragraph text following the heading, which should wrap around the float eventually, assuming it's long enough to reach a few lines below the bottom of it...

slide-90
SLIDE 90

OpenType metrics

alphabetic baseline

Ap

ascent descent cap-height ex-height

slide-91
SLIDE 91

leading-trim-over: normal | text | cap | ex | ideographic leading-trim-under: normal | text | alphabetic | ideographic

slide-92
SLIDE 92

h2 { leading-trim: cap; }

Align Me!

Here's some paragraph text following the heading, which should wrap around the float eventually, assuming it's long enough to reach a few lines below the bottom of it...

slide-93
SLIDE 93

h2 { leading-trim: cap; }

Align Me!

Here's some paragraph text following the heading, which should wrap around the float eventually, assuming it's long enough to reach a few lines below the bottom of it...

slide-94
SLIDE 94

h2 { leading-trim: cap; }

slide-95
SLIDE 95

h2 { leading-trim: cap; }

slide-96
SLIDE 96

I thought this was a World-Wide Web?

CAP HEIGHT EX HEIGHT ???? IDEOGRAPHIC CHARACTER FACE TOP
slide-97
SLIDE 97

Your metrics are bad, and you should feel bad.

slide-98
SLIDE 98

Open Questions Behavior at page/column breaks? Separate cascading/inheritance of metric vs. trigger? Multiple font sizes on the first/last line?

slide-99
SLIDE 99

Vertical Alignment

slide-100
SLIDE 100

unaligned text

AbraCadabra!

slide-101
SLIDE 101

match baselines, then shift

AbraCadabra!

slide-102
SLIDE 102

match baselines, then shift

Cadabra!

Abra

slide-103
SLIDE 103

But which baseline?

In a well-designed mixed-script font, the glyphs are positioned in the coordinate space to harmonize with one another when typeset together . The baseline table is then constructed to match the shape of the glyphs, each baseline positioned to match the glyphs from its preferred scripts.
slide-104
SLIDE 104

dominant-baseline: auto | alphabetic | ideographic | central | mathematical | …

slide-105
SLIDE 105

vertical-align: <'alignment-baseline'> || <'baseline-shift> └ alignment-baseline: baseline | alphabetic | ideographic | central | … └ baseline-shift: sub | super | <length>

slide-106
SLIDE 106 in it ial-let t ers: 2;
slide-107
SLIDE 107

How to Help Think about / comment on issues. Bug browser vendors to implement once specced. Bug font vendors to provide correct metrics. Bug OpenType to define missing metrics.