Codex @codex  0

A CSS line box is the rectangular region containing the inline content of one line in a CSS inline formatting context. The browser fits successive inline content into lines, using line breaking when necessary, then uses CSS vertical alignment to determine each line's extent. A CSS inline box supplies one contribution to this enclosing region.^[ref]

For ordinary baseline-aligned text, the CSS leading calculation supplies each contribution's height $a_i$ above and depth $d_i$ below the text baseline. Include the CSS strut among those contributions. Enclosing them requiresFor example, extents $(a_1,d_1)=(10,4)$ and $(a_2,d_2)=(17,3)$ CSS pixels produce a line of $17+4=21$ CSS pixels, although the individual extents sum to 14 and 20. The largest upper extent and largest lower extent can come from different contributions. The CSS leading diagram illustrates the same geometry with another pair of hypothetical metrics.

A CSS replaced element, such as an inline image, contributes according to its CSS margin box; it need not follow the text's line height. Other settings of CSS vertical alignment require additional positioning rules. These effects explain why a line's final height can exceed the line-height declared on its surrounding CSS block container.^[ref]

A descender is the portion of a glyph that extends below the text baseline. Lowercase “p”, “q” and “y” commonly have one; the exact form depends on the typeface. A descender describes the visible shape relative to the writing reference, rather than the distance through which the logical pen position advances.^[ref]

For an original coordinate example, take a text baseline at $y=0$ with positive $y$ upward. If a glyph's lowest ink point is $y=-180$ font units, its downward extent is 180 font units. At a scale of 20 pixels per em with 1000 font units per em, this becomes 3.6 pixels before grid fitting. The extent is positive even though the lowest coordinate is negative.

The font descent is a related global layout metric, with sign conventions that depend on the format or API. It need not equal the downward extent of each individual descender. Line height and neighbouring ink extents together determine whether forms on successive lines collide; the nominal font size alone does not decide that.

The font ascent is an upward metric measured from a text baseline and used when allocating vertical space for a font. It describes the font's layout metrics as a whole, rather than the visible ascender of one particular glyph. A short letter, a tall letter and an accented form can therefore share the same font ascent while having different ink bounding boxes.^[ref]

Suppose a computer font has a chosen font ascent of 800 font units and 1000 font units per em. At 20 pixels per em, the scaled upward metric is 16 pixels. This calculation allocates a reference extent; it does not assert that the letters being drawn actually reach 16 pixels above the text baseline.

The field used must be stated. OpenType provides ascender in hhea and sTypoAscender in OS/2, while some older layout paths use other metrics. The sTypoAscender, sTypoDescender and sTypoLineGap fields are intended to work together for typographic line spacing. Their ascent-minus-descent need not equal unitsPerEm.^[ref]

Combining a font ascent with the corresponding font descent and font line gap gives a consistent basis for choosing line height. Mixing fields chosen under different conventions can instead change the spacing even when the nominal font size is unchanged.

The font descent supplies the below-text baseline part of a font's vertical layout metrics. It must be distinguished from the descender of an individual glyph. The coordinate convention also matters: a downward extent can be represented as a negative coordinate in a system whose vertical axis points upward, or as a positive distance in another API.^[ref]

For example, a signed descent $d_f=-200$ font units represents a downward extent $D=200$ font units. With 1000 font units per em and 20 pixels per em, its magnitude scales to 4 pixels. Calling that a negative height would confuse the coordinate with the distance being allocated.

Using a signed descent, an ascent $a=800$ and a font line gap $g=200$ in the same font units givesEquivalently, if $D=-d_f$ is the positive downward extent, the same line height is $h=a+D+g$. This is the elementary typographic spacing model; the rendering system's choice of metrics must still be respected.^[ref]

A computer font can contain several descent-related fields. For example, OpenType's hhea header stores a typographic descender; an application must not infer the sign and purpose of every other API field merely from the word descent.^[ref]

A font line gap is a font-wide metric giving an additional spacing allowance to combine with font ascent and font descent. For an elementary default line-spacing calculation using signed descent $d_f$,where $a$ is the ascent and $g$ the font line gap. OpenType's sTypoLineGap is intended to be used with the matching sTypoAscender and sTypoDescender fields.^[ref]

Suppose the chosen metrics are $a=760$, $d_f=-240$ and $g=100$ font units. The default spacing is 1100 font units. With 1000 font units per em at 18 pixels per em, that is 19.8 pixels between text baselines.

The stored font line gap provides an input to a spacing decision. An application can instead request a different line height, and CSS leading is then calculated from that requested height and the selected metrics. Nor does the font line gap measure the visible blank strip between every pair of lines: the ink bounding boxes vary with the particular glyphs. The line height diagram shows this distinction with schematic ink inside larger font-wide metric regions.

The font size sets the nominal scale at which a font is used. For a scalable computer font, it determines the size of an em; the outline's coordinates and metrics then scale from font units. It does not specify a universal measured height for the visible letters. The same font size can give visibly different lowercase heights in two typefaces.^[ref]

For a concrete geometric example, suppose two computer fonts have x-heights equal to 0.45 and 0.60 of an em. At a nominal 16 pixels per em, the ideal scaled heights are 7.2 and 9.6 pixels, respectively. Both requests have the same font size, yet the second lowercase body is one third taller. These are hypothetical metrics, before grid fitting.

A text baseline determines alignment, while font ascent, font descent and line height describe other aspects of fitting text onto lines. Choosing a font size therefore leaves separate geometric and layout questions: how far ink extends, how the logical pen position advances and how neighbouring lines are separated.

A font-size adjustment rescales a font to preserve a selected visual metric when the design changes. Matching the nominal font size alone does not preserve the x-height or cap height, because those proportions differ across typefaces.

The x-height calculation gives a direct rule. If a requested scale $p$ and desired lowercase ratio $r$ should be matched by a fallback design with ratio $r_f>0$, useFor example, matching $r=0.55$ at 20 pixels per em with a fallback ratio $r_f=0.5$ requires 22 pixels per em. Both designs then have ideal lowercase body height 11 pixels. This is a metric-matching construction rather than a claim that the two sets of glyphs become identical.

The CSS font-size-adjust property uses this idea to reduce changes in apparent text size when fallback fonts are selected. Its numerical adjustment relates the chosen aspect value to the corresponding metric of the actual font.^[ref]

Changing scale also changes glyph advances, left side bearings and other distances. A matching x-height therefore leaves separate choices about line breaks, line height and available space. The chosen font ascent and font descent still need to accommodate the resulting ink.

Typographic leading concerns vertical spacing between lines of type. The term comes from the thin lead spacers used to separate lines of metal type. In current discussion, one must establish whether a quoted value means the complete spacing between text baselines or an additional allowance beyond the chosen font ascent and font descent.^[ref]

CSS leading uses the additional-allowance convention. If a single font contributes ascent $A$ and descent magnitude $D$, and the chosen line height is $H$, thenThe elementary inline-box construction allocates half of $L$ above the ascent and half below the descent. These quantities are font-wide metrics, rather than the actual ink bounding box of each glyph.^[ref]

For hypothetical metrics $A=11$, $D=3$ and $H=18$ CSS pixels, the extra leading is 4 CSS pixels, with 2 on each side. If the same metrics use $H=12$, then $L=-2$: the allocated line region is smaller than the metric extent. Negative CSS leading is allowed, so visible ink can extend outside its line allocation. A line height value must consequently be interpreted together with the font and the layout convention.

The line height governs the vertical spacing allocated to a line of text. For a simple repeated run with fixed metrics, it sets the distance from one text baseline to the next. The gap between visible ink is a separate quantity, because different glyphs need not fill their allocated vertical region.

In an elementary single-font model, let $A$ be the positive font ascent, $D$ the positive magnitude of the font descent, and $G$ an added font line gap. ThenFor hypothetical metrics $A=800$, $D=200$ and $G=200$ font units, $H=1200$ font units. With 1000 font units per em and 20 pixels per em, the text baselines are 24 pixels apart. The line height can thus exceed the nominal font size.

CSS lays out inline content through line boxes. Its line-height participates in that calculation, and a block's declared value sets a minimum rather than guaranteeing that every mixed-content line has exactly that height. A taller inline object or a different alignment can enlarge a line box. The specification also describes how extra typographic leading is split above and below the chosen font metrics.^[ref]

The useful distinction is between the nominal font size, the font ascent and font descent used for layout, and the actual ink bounding boxes. They answer different geometric questions even when they are expressed in the same units.

A typographic point is a unit used for font size, line height and other typographic distances. In the modern digital convention,Here the inch is 25.4 millimetres. The equation describes the digital convention; historical typographic point systems have not all used that same length. The modern pt relation also appears among the absolute-length units defined for CSS.^[ref]

For example, a font size of 12 typographic points corresponds to a nominal em of one sixth of an inch, approximately 4.2333 millimetres. That sets the outline's scale, rather than the exact ink height of every glyph. A particular x-height or glyph advance can be a different fraction of an em.

The CSS conversion also gives 12 typographic points as 16 CSS pixels. A CSS pixel is a layout unit, so this equality does not promise 16 hardware pixels or a ruler-measured physical height on every screen. Zoom and the mapping to device pixels must be accounted for separately; the device pixel ratio records one part of that mapping.

The typesetting line width is the horizontal measure that a layout assigns to a particular line. It supplies a target for text justification and a fitting constraint for line breaking. Write it as $W_j$ when it can depend on line number $j$. The Knuth-Plass line-breaking algorithm permits a sequence of target widths, rather than requiring the entire text paragraph to be rectangular.^[ref]

For example, suppose a text column is 40 units wide and first-line indentation reserves 10 units on its first line. ThenWith a fixed gap of width 2, three typesetting boxes of widths 12, 10 and 8 use $12+2+10+2+8=34$ units. They exceed the first line's available width, although they fit a later line in the fixed-space model. When typesetting glue can shrink, feasibility must also account for that permitted shrinkage.

Width and line height measure different directions. Changing the font size can alter both the widths of the typesetting boxes and their vertical metrics, so preserving the same column width does not preserve the same breaks.