CSS Inline Vertical Alignment Elika J. Etemad aka fantasai W3C CSS Working Group Invited Expert

About Me

Specs I've Worked On Since 2004

Inline Layout Problems

Variance across browsers
→ Tighten up definitions for line layout
Jitter / inconsistent baseline-to-baseline spacing
→ Develop new model for line spacing
No control over spacing above/below visible text
→ Trim using font metrics
Drop caps don't align with text
→ Define specialized layout feature

Specification: CSS Inline Layout Level 3

Principles of Web Architecture

Constraints of CSS

Design Principles of CSS

Vertical Rhythm

Strict Rhythm...

Strict Rhythm...

Strict rhythms are important for multicol

Loose Rhythm...

Intra-Paragraph + Inter-Paragraph + Interrupts

Inter-Paragraph Spacing: lh/rlh units

Interrupts: Block Step Sizing

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

block-step-size: <length>

Requires used height = n × <length>, for an integer n 

block-step-insert: margin | padding
block-step-align: auto | center | start | end

Intra-paragraph Rhythm

Typographer’s Line Placement Model

Goal: Look pretty.

Tools: Absolute measurements, post-layout adjustments.

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

Consistent baseline-to-baseline spacing creates vertical rhythm.

If your stuff overlaps it’s your fault.

So review and tweak your things before you print them!

CSS Line Box Model

Goal: Don't overlap content.

Tools: Boxes.

1. Put a bunch of stuff on a line.

2. Draw a box around it.

3. Stack up the line boxes.

3. Stack up the line boxes.

4. All done!

CSS Line Layout Today

What are the sizes?

Sizes found from font metrics

It could be so simple...

Identical font-size, varying font-family

Identical font-size, varying font-family

line-height: # | len | % | normal

line-height: 1.5;
/* 1.5 × font-size */

Half-leading

line-height: 1.5

Base Case: Paragraph of Text, No Font Changes

Base Case: Paragraph of Text, No Font Changes

Base Case: Paragraph of Text, No Font Changes

Complication #1: Varying Font Families

line-height: 1.5

line-height: 1.5

line-height: 1.5

Happiness is Rare

Fixing the Line Layout Model

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

How to Have Perfect Rhythm

How to Have Perfect Rhythm

Redefining “fit within a line box”

“fit”
container ← item

Defining the item

Items Without Half-leading

Defining the container

Old Model

New Normal?

Open Questions

line-sizing: legacy | normal

legacy
Do what CSS2.1 says
normal
TBD! (Help us D?)

Trimming Text

Delete the top margin...

Add negative margin???

>_____<

OpenType metrics 

leading-trim-over: normal | text | cap | ex | ideographic
leading-trim-under: normal | text | alphabetic | ideographic
h2 { leading-trim: cap; }
h2 { leading-trim: cap; }
h2 { leading-trim: cap; }
h2 { leading-trim: cap; }
Content Area

I thought this was a World-Wide Web?

Open Questions

Vertical Alignment

unaligned text

match baselines, then shift

match baselines, then shift

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.

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

Drop Caps

initial-letters: 2;

initial-letters: 2;

initial-letters: 2;

Your metrics are bad, and you should feel bad.

initial-letters: 2;

initial-letters: 2;

Variance

Tighten up definitions for line layout...

... not glamorous, but necessary.

Standardization

CSS Inline Layout Level 3: Scope

CSS Inline Layout Level 3: Goals

CSS Inline Layout Level 3: Impact

The impact on the Web community will be higher-fidelity typesetting and layout of text, with good accessibility and fallback behavior, simply through a few lines of intentional CSS rather than struggling with magic numbers and negative margins and, in some cases, JavaScript and/or extra markup.

Standardization: Output

Spec Development Process

Standards & Interoperability

How to Help

  1. Sponsor specification development
  2. Encourage browser engineering teams
  3. Lobby OpenType technologists (specs, tools, foundries)
  4. Contribute QA

Proposed Work Estimates

  1. Phase I: Spec development until substantially complete = ~1yr $40K deliverable
  2. Phase II: Spec refinement and test suite development = ~2yrs hourly < ~$30k/yr
  3. Phase III: Long-term maintenance = $5K-$10K