Unpacking line-height in CSS

#todo #breakdown

Ideas for docs:

• (Master) text alignment on the web
• Font metrics
• Line boxes/struts
• Leading, and half leading
• Leading-trim, and why
• Dominant-baseline CSS property
• Inline elements
  • Vertical-align
  • Inline-flex
  • How line-height factors in
  • 'inline magic space' https://courses.joshwcomeau.com/inline-magic-space
• How it interacts with DOM elements
  • Why does it differ when using a span vs a div.
  • Why does it differ if it's a flex child?
  • A span will look like it reserve less space, but the div still reserves extra space - is that because of struts?
• Line-height kind of does two things - height of elements, and gap between wrapping text
• A div min-height is it's line height, but only if there's an inline element
  • e.g. assuming a container div with a 30px line height.
    • With no content, it's 0px tall.
    • With a single inline element within it, it's minimum 30px high
      • (is this due to line boxes/struts)
    • With a single block element within it, it doesn't necessarily grow to 30px.

New:

#breakdown https://stackoverflow.com/questions/28363186/inline-elements-and-line-height https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#the_box_model_and_inline_boxes

https://www.youtube.com/watch?v=3_uC3xJQmTo Given line-height of 1.5em: CSS half leading is: line-height - (ascent + descent) = total leading. Apply half above and half below This means with a font-size of 1em and a line-height of 1.5, the text is not displayed as 1em + (0.5em) leading. The line box height still is 1.5em, but the leading may be less.

Fonts have different ascents and descents. Different ratios between the two. ![[Pasted image 20221214084228.png]]

Even without half leading, fonts reserve extra space. The space differs depending on the font. ![[Pasted image 20221214084516.png]]

#todo - figure out how text shifts around when the line box stays the same - is it because of the ratio between ascent and descent? Get an example of the fonts use in the talk: Segoe UI, Rockwell, SF Pro Does https://www.w3.org/TR/css-inline-3/#leading-trim explain it? What about https://medium.com/microsoft-design/leading-trim-the-future-of-digital-typesetting-d082d84b202?

Add notes to [[20210806120022-leading-trim-css]] as to why it should exist. Namely:

• imperfect alignment around the top-edge due to the top half leading
• imperfect alignment vertically centering
• why cap height matters (removes the leading and extra space reserved by the font)
• baseline position can shift around between an aligned text box, meaning the text subtly moves
• uncontrollable spacing - equal spacing between line boxes may not equal visual spacing when you cannot see the line boxes

Leading trim can effectively make the line box equal the text's visual height. Still allows for line-height when text wraps.

What is the em-box?

#breakdown dominant-baseline lets you align text on different baseline options Latin text aligns on the alphabetic baseline Other things want to align on the hanging baseline, or the ideographic baseline These will also be values for vertical-align, for more granular control. e.g. lets you align latin text among other languages

https://stackoverflow.com/questions/48117071/element-with-display-inline-flex-has-a-strange-top-margin

to read: http://westonthayer.com/writing/intro-to-font-metrics/ https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align

https://www.lydiahallie.io/blog/optimizing-webfonts-in-nextjs-13#font-face-descriptors

https://stackoverflow.com/questions/11829393/why-is-the-spans-line-height-useless

line-height is more complicated than it initially appears, and they have more scope than you think. Line height is used to calculate the inline formatting context, which exists for more than just text.

On block-level elements, it specifies the minimum height of line boxes within the element. On non-replaced inline elements, it specifies the height that is used to calculate line box height.

By default, the line-height is set to normal. Which is usually around 1.2, but it depends on the font!

Creating some text with font-size: 100px doesn't create elements with 100px height, as shown below. It's dependent on the font, which defines its 'em-square' (a container where each character will be drawn in). It's usually 1000 units, but can be any value. A font also has relative units as part of its metrics (e.g. ascender, descender, x-height, etc.) which are scaled to fit the desired font size.

For Catamaran listed above, the em-square is 1000, the ascender 1100, and the descender 540. 1100+540 = 1640 = 164px when setting font-size: 100px. This computed height defines the content area of an element, referring to the CSS box model.

TODO - line boxes [[20210806121648-line-boxes-css]]

• Height of box rendered ≠ font-size * line-height
  • I think this is actually based on the font again?
• Text is placed in the middle of the line-box
  • Also applies to inline-block elements
  • and inline-*?
• Leading is what typesetters used in the older days, strips of lead placed below the letters. (add this to leading-trim doc?)
  • CSS introduced 'half-leading', which applied half that leading on either side of the element. Places it in the middle on the line-box
    • Various reasons, namely to make things 'appear' vertically centred
• More info on inline- and inline-block elements
  • empty inline-block element has a height based on its (parent?) line-height
  • inline elements only gain this height once they have content in them
• Struts?

https://drafts.csswg.org/css-inline/#inline-height https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align https://tonsky.me/blog/font-size/ https://meyerweb.com/eric/css/inline-format.html https://css-tricks.com/how-to-tame-line-height-in-css/ https://stackoverflow.com/questions/27536428/inline-block-element-height-issue https://stackoverflow.com/questions/20106428/why-does-inline-block-cause-this-div-to-have-height/20107222#20107222

[[20210806114625-typography-anatomy]] [[20210806120022-leading-trim-css]]

[[css]] [[typography]]