CSS Inline Layout Design Review Workshop

The CSS Inline Layout spec is trying to radically change how inline box layout works in CSS in order to give authors better control over spacing and vertical rhythm. So we’re organizing a virtual workshop to review these features—particularly leading-trim, text-edge, and line-height—and make sure that they:

→ If you want to read a bit more about what we’re doing here, you can read Ethan Wang’s illustrated article about leading-trim or check out the videos linked below.

Compared to the Flexbox and Grid workshop series, the spec here is less stable, and we're focusing more on in-depth design review for a few specific features than on making sure the entire spec is clear, correct, and understandable.

This is not a lecture. This is not a classroom. This will be a highly technical 3-hour design-review meeting, to discuss the engineering design and details of inline layout in CSS.

When and where?

Time:
7am SF / 10am NYC / 4pm Paris / midnight Tokyo
Date:
Monday 14 November 2022
Place:
Webex virtual room
Prereqs:
Read the Background Materials, bring a sketchpad

Can't make this time slot but want to participate? We'll primarily be reviewing Chapter 5, so you can organize your own spec review workshop. Feel free to reach out to fantasai if you have questions, feedback, or want any extra support. We're also open to organizing a second time slot if there's enough demand.

Background Materials

CSS Cascading and Inheritance Level 3 Required Pre-read (~10 minutes)

A clear understanding of shorthanding, value processing, cascading, inheritance, and initial values will be necessary as we discuss some of the design decisions in CSS, so please take 10-15 minutes to meditate on these very short sub-sections of the CSS Cascading and Inheritance spec!

ATypI conference video (optional, recommended)

Ethan and fantasai presented on this topic last year, and this video has lots of nice diagrams that should be helpful for understanding what we’re doing here.

There's also an older CSS Day talk on CSS Line Layout and Vertical Rhythm, which has broader coverage of this topic in CSS. It goes over more of the background thinking, and covers some additional features in CSS related to vertical rhythm, but doesn't have as much specifics on what's in the spec right now.

“Designing CSS” (optional)

This article is transcripted from a presentation fantasai gave in Tokyo, and goes over a lot of the principles the CSSWG follows when designing new features in CSS.

CSS Inline Layout Level 3 (skim through optional)

This is the spec we’ll be workshopping. :) If you want to scan through it ahead of time, go ahead. We’ll be going through key parts of it live, though, so it’s not required.

What are we doing?

  1. Reading through the relevant section of the spec together to make sure we all understand how it currently is expected to work.
  2. Having a conversation to take questions and discuss how it ought to work.

Workshop Sections

We'll be focusing on the following sections of the spec:

  1. 2.2. Layout Within Line Boxes for context
  2. 5. Logical Heights and Inter-line Spacing for analysis

Conversation Questions

We’ll be primarily reviewing Chapter 5; here are some questions we might discuss:

Async Feedback

Asynchronous feedback on this topic can be sent to:

Benefit

You can help make the spec better, so that CSS inline layout can give good typographic results for everyone, easily and without complicated weird hacks!

Cost

Your time and attention. :) Also, please do the pre-read.

Who's running this?