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
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
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.
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.
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!
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.
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.
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.
We'll be focusing on the following sections of the spec:
We’ll be primarily reviewing Chapter 5; here are some questions we might discuss:
leading-trimmake sense? Is it understandable? Is it appropriate? Are there use cases this property breakdown doesn’t properly address? Are the defaults correct?
leading-trim? (Issue 5426)
leading-trimat page/column breaks? Do we need a new property to control this? What should be the default behavior? (Issue 5335)
leading-trimto size an inline box, what should happen when multiple fonts are used to render the text? (Issue 5226)
text-edgeto determine the height of a line box, what should happen when multiple fonts are used to render the text? (Issue 5238)
leading-trimhave an effect even when
text-edgeis set to its initial value (
trim-leadingvs [your idea here]
text-edgeokay? Any better ideas?
text-edge-underin separate places in a style sheet, or is having one property that sets them together enough? (Issue 5236)
Asynchronous feedback on this topic can be sent to:
[css-inline-3](existing text-edge issues)
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!
Your time and attention. :) Also, please do the pre-read.