Repository navigation
[css-inline-3] Improve illustrations for text edges #11364
Description
Follow up from seek-oss/capsize#205 (comment) and #10703 (comment) -- the illustrations in the spec conflate the cap height with the ascent, and need to be redone.
Activity
[css-inline-3] Mark issue wrt bad illustration #11364 #10703
sciascia commentedon Dec 20, 2024
In addition to the comments above (and sorry if I'm misunderstanding something basic) but why is
text-edge: leading;not actually leading?If I'm understanding the illustration correctly,
text-edge: leading;is actually line-height which splits the space evenly above and below the text, creating half leading which is the problem to begin with.As a designer, I would expect
text-edge: leading;to make the text behave like leading!To properly reflect the spacing behaviour, shouldn't the properties be changed to the following...
text-edge: leading;becomestext-edge: line-height;text-edge: text;becomestext-edge: leading?#11364 #10703
valler commentedon Oct 21, 2025
Maybe just
line, as it's done withex(notex-height). Line height is the height of a line. Baseline to baseline would also be line height.I think
leadingis not a good choice for either one, because (without context) it's unclear about whether it's where leading starts or ends. But given that the note mentionsascentanddescent, as well as that CSS uses half leading, I personally understood the keyword for what it was meant to represent. Changingtexttoleadingwould be quite a bit more confusing for the same reason. One could not be sure wether this means extender, or "where the line ends" (at half leading).So
lineandextendermaybe, unlessextenderis too technical, in which case I'd go forlineandtext.Edit: In writing modes
lineis also used in this fashion: https://www.w3.org/TR/css-writing-modes-4/#line-directions (line-over,line-under, etc.).sciascia commentedon Oct 22, 2025
@valler @michaeltaranto
OK But
leadingis already a thing with meaning, so shouldn't it behave the wayleadingbehaves?i.e. It adjusts the space between lines, not the space above and below.
Using terms like
line,extenderortextcreates unnecessary confusion, work, and time to get it implemented - it's already been years. As does redefiningleadingto somehow meanhalf-leading- what is that?At a most basic level,
line-heightdoesn't behave likeleading- that's the initial frustration we're trying to solve.I wish
leadingcould be separated out so it could be implemented faster...Which would change the box model to control space between the lines, like
leadingdoes.Then this spec controls the minutia - taking many more years to come to browsers. Know what I mean?
Cheers, Ben
valler commentedon Oct 22, 2025
@sciascia yeah I totally understand. Personally, I'm so used to seemingly unusual technical jargon and dept, that I wouldn't mind the names at all. I'd just look up how the spec defines the terms and throw out all my previous intuition about those words in other contexts, haha.
Having said that, I was making suggestions because I had the impression this is relevant. The spec mentions the issue and the issue is still open, you know, I thought I throw in my two cents.
Back to leading. I think, out of the top of my head, I only encountered it when reading the inline module spec. There's really very little in CSS referring to fonts and terms from traditional typesetting unless it's directly font related. And most line and inline related topics also refer to lines, boxes and their heights, not to leading or half leading.
One more thing:
If I understand this question correctly, you were asking one of multiple things:
And why don't we get all of those options?
I think that's already too many questions to ask for being obvious and self-explanatory 😁 What could
linemean, other than inline box boundaries? Maybe it could cause confusion between inline boxes and line boxes? But leading would have the same problem.Anyway, if shipping early matters that much, ignore everything I wrote in here 😁
Ouh and I almost forgot @fantasai, the spec mentions:
Whereas your OP says it's "conflating", as in "it's hard to tell if the illustration means the
Cor thedor both". Maybe someone can fix that note in the spec?sciascia commentedon Oct 22, 2025
@valler totally get where you're coming from, my patience has worn thin after waiting 20 years for design basics like
leading.My 2 cents...
leadingif it doesn't do whatleadingdoes (adjusts the space between lines)half-leading, when especiallyleadingdoesn't work likeleadingdoesThe bottom line
Whatever happens, we get a solution to adjust the spacing between lines, without changing the visual position of text.
To me, the human race has already solved this issue, it's called
leading.But when I read through the specs, proposals and comments, I worry the beautiful simplicity of
leadinghas been lost.valler commentedon Oct 22, 2025
@sciascia
Do we? As a side effect maybe. The way I understand all of 5.2 it's about controlling the effective AABB along the block axis of inline boxes. Line box gaps (leading) would merely be a side effect in some situations. That's why I was writing I wouldn't be too happy with the term
leadingin the first place.valler commentedon Oct 22, 2025
@sciascia anyway, sry for being kinda off topic. This issue is about the illustration, the naming issue seams to already have been agreed on and closed. Seems like I got myself confused by your comment, after I had both issues open in my browser the other day.
Crissov commentedon Nov 3, 2025
By the way, maybe my non-native speaker experience is skewed, but it seems to me the CSS term
leadingis frequently pronounced /ˈliːdɪŋ/ (because it is space that precedes or leads the actual ink), although the typographers term is /ˈlɛdɪŋ/ (from the metal lead, Pb).