Deep dive CSS: font metrics, line-height and vertical-align – Vincent De Oliveira

An introduction to the inline formatting context. Explores line-height and vertical-align properties, as well as the font metrics. Understand how text is rendered on screen, and how to control it with CSS.

Läs och begrunda: Deep dive CSS: font metrics, line-height and vertical-align – Vincent De Oliveira

 

What we learned (TL;DR):

• inline formatting context is really hard to understand
• all inline elements have 2 height:
  • the content-area (based on font metrics)
  • the virtual-area (line-height)
  • none of these 2 heights can be visualize with no doubt. (if you’re a devtools developer and want to work on this, it could be awesome)
• line-height: normal is based on font metrics
• line-height: n may create a virtual-area smaller than content-area
• vertical-align is not very reliable
• a line-box’s height is computed based on its children’s line-height and vertical-align properties
• we cannot easily get/set font metrics with CSS
• there is a related future spec to help with vertical alignment: the Line Grid module