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

 

Publicerat av

STG

Stockholms Typografiska Gille vill höja kvaliteten på svenska grafiska produkter. Vi debatterar och engagerar oss i utvecklingen inom vårt yrkesområde, studerar och samtalar om konsekvenserna av ny teknik. Vi kritiserar dålig grafisk kvalitet. Genom dessa aktiviteter hoppas vi kunna skapa en större medvetenhet hos såväl producenter av svenska grafiska produkter, beställare av grafisk form och typografi som hos den läsande konsumenten.

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *