Glossary

How far along the line the next glyph starts after this one. The font sets it for each glyph, side bearings included, so two letters can be drawn equally wide and still advance by different amounts.

Example In a proportional font an i has a smaller advance measure than an m. In a monospace font every glyph has the same one, which is why 80ch holds 80 characters there.

Where the small, large and dynamic viewports come from: the browser's own interface. On a phone the address bar and the bottom toolbar slide out of the way while the reader scrolls and return when scrolling stops, and the height left for the page changes with them. On a desktop nothing moves and the three heights agree.

The height of a flat capital such as H or E, measured up from the baseline. It belongs to the design of the font and not to the number in font-size, so two fonts at the same size can have different capitals. In the Plex Sans used on this site a capital comes to about 0.7em.

The value a property has after the cascade, once relative units that need no layout, such as em, have become absolute lengths. The specification keeps a percentage like width: 50% as a percentage at this stage, and it turns into a number only in the used value.

Example A child with font-size: 1.25em under a parent of 24px has the computed value 30px.

Where a percentage starts counting. For a child in normal flow that is the content box of its parent. For an absolutely positioned element it is the padding box of the closest ancestor whose position is not static, and its offsets are measured from the same box.

Example In a parent 200px wide with 20px of padding and position: relative, a child with width: 50% is 100px wide in normal flow and 120px wide when it is absolutely positioned.

The pixel that CSS lengths are written in, 1px. It is a unit of layout and not a dot on the screen: depending on the device pixel ratio, one CSS pixel covers one device pixel, a 2 by 2 block of them, or a fraction of one. Every absolute unit is a fixed multiple of it, so 1in is 96 of them.

A size the browser knows before it lays out the contents: 300px, 50vh, 20rem, or a share of a parent that already has one. A box sized by its own text has no definite height until that text is laid out, which is why its children cannot take a percentage of it.

Example In a parent with block-size: 300px, a child with height: 50% is 150px. Give the parent no height and the same child is as tall as its own content.

How many device pixels the browser spends on one CSS pixel along each side. Scripts read it from window.devicePixelRatio; a media query reads it through resolution, in dppx. It is not fixed by the hardware: page zoom changes it, and at a ratio of 0.5 one CSS pixel is half a device pixel.

The viewport as it is right now, with the browser chrome in whatever state it has at this moment. In the specification's model that state changes as the reader scrolls on a phone, so a length in dvh can change too. On a desktop, where nothing retracts, it measures the same as the other two.

One row or column of a grid. The gaps between tracks are not tracks themselves. grid-template-columns: 1fr 2fr defines two column tracks, and fr shares out what is left of the container after the fixed tracks and the gaps.

The font size the browser starts from before any stylesheet speaks: 16px, unless the reader changed it in the browser settings. em and rem in a media query measure against it and not against what your CSS sets on html, so (min-width: 40em) means 640px for a reader on the default.

These two names stay fixed while the screen directions change. The inline axis is the way words follow one another inside a line, and the block axis is the way one line, or one paragraph, follows the next. writing-mode maps them onto the screen: with horizontal-tb the inline axis runs along the width, with vertical-rl along the height.

Example inline-size: 100px is the width of an ordinary box and the height of one with writing-mode: vertical-rl.

The size a box takes from its contents when nothing else decides it. For text the smallest is min-content, the width of the longest word that cannot break, and the largest is max-content, the width of all the text on one line.

Example The automatic minimum of a plain 1fr track comes from it, which is why one long word can stop the track from shrinking.

The viewport at its largest: the window with the browser chrome retracted as far as it goes. The lv units measure it. A desktop has no chrome to retract, so there it matches the small and the dynamic viewport.

The rectangle the browser lays the page out in. Viewport units and position: fixed boxes are measured against it. The visual viewport is the part of the page the reader sees at the moment, and in the specification's model pinch zoom on a phone shrinks that one and leaves the layout viewport alone.

A scrollbar drawn on top of the content, so it takes no room from the layout. A classic scrollbar is the other kind: a strip of its own that makes the content area narrower by its width. A layout should not assume either one.

An element whose size its descendants can ask about, made by giving it container-type: inline-size or container-type: size. The nearest such ancestor answers @container rules and the cq units. With inline-size only the width is queried and the height can still follow the content, while with size both are queried, so a container with no height of its own collapses to zero.

The imagined pixel that the CSS pixel is defined by: one pixel of a 96 dpi screen held at arm's length. The specification ties 1px to it, so that a CSS pixel is meant to look about the same size on a phone, a laptop and a television. Real screens only approximate it.

The element at the top of the document: html on a web page, and the one the :root selector picks. The units rem, rlh, rch, rex, rcap and ric all read the font of this element. A percentage font-size set on it is a share of the browser's initial font size, so it still follows the reader's setting.

The viewport at its smallest: the window with all the browser chrome showing. The sv units measure it, and in the specification's terms 100svh is the tallest height that is visible whatever state the chrome is in. With nothing to retract, a desktop window makes it equal to the other two as well.

The final number a property has once layout is done and percentages, auto and fr have been worked out. A width: 50% in a parent 400px wide has the used value 200px. Scripts get used values from getComputedStyle, despite its name, for the width and height of a rendered element.

Which way lines of text run and which way they stack, set with the writing-mode property. The default, horizontal-tb, runs lines sideways and stacks them downward, while vertical-rl runs them down the page and stacks them from right to left, as in traditional Japanese. The direction property is separate: rtl flips the way a line runs along its axis and does not turn the axes.

The distance from the baseline to the top of a letter like x, which sets how large the body of lowercase text looks. In IBM Plex Sans it is a little over half an em. A font with a taller x-height gets a larger ex at the same font-size, and em cannot show that difference.