Introduction
Every element you see on a page has some sort of length. The length specifications not only describes how wide or narrow things are, but they also describe the distance between elements. CSS is responsible for defining these values in web pages.
The notion of distance or length is used in several CSS properties, width, height, margin, padding, border-width, and font-size. A length needs to have a unit and there are a few different ways of describing a certain length value:
- Relative to other length units — such as browser window viewport:
// This will set height of the element relative to 1% of the height of the viewport
height: 100vh;
- Relative to font length of a certain font character or attribute — such as computed line height:
// This will set height of the element relative to the element's line height
height: 1lh;
- Absolute length — such as pixel size of screens:
// This will set the height of an element as 20 pixel size of the screen
height: 20px;
If you have been a web developer for a while, chances are you are familiar and comfortable with more traditional absolute or length based units. However, there are new font-relative length units being developed as part of CSS’s level 4 spec like lh and rlh. In this article, we are going to learn more about these two new font relative length units, see some practical examples of their usage, and see how they can help us as web developers to better style our websites.
What are lh and rlh units?
Both of these units belong to the font-relative length units category. Which essentially refers to font metrics of the current element or the root element.
1lh is set as the length of the element’s line height. Basically, this relative unit will compute the line height of the current element that it is being applied to. This is done by converting the normal length of the first available font to an absolute length. The illustration shown below can show us what counts as a font’s line height.
Note that the first available font can be one of the font families listed under font-family, or a user agent’s default font if no font is provided.
rlh is similar in definition to lh, but its computed line height is based on the root element which is the <html>. rlh to lh is like rem to em, which are used for defining font sizes on web pages.
One thing to consider is the context where these units are used. If they are used outside the context of the element such as in a media query or document, these units will refer to the initial values of font and line height properties on the page. But if they are directly used on an element, the internal calculations of the unit will first be based on the font of the element or the parent of the element at hand, and only if that is not provided the calculations will default back to the initial font and line height values.
#css #web-development #developer
