Glyph positioning

Glyph positioning assigns locations to the glyphs selected during text shaping. It specifies how each glyph is placed and how the logical pen position progresses through the text. A text baseline supplies a common reference for placing the shapes. An OpenType GPOS table can adjust horizontal and vertical placement, glyph advances and attachment between selected glyphs.^[ref]

A simple coordinate model separates the two effects. Let ${\mathbf{p}}_i$ be the pen position, ${\mathbf{o}}_i$ a placement offset and ${\mathbf{a}}_i$ the glyph advance. Draw glyph $i$ with its origin atthen update the logical position byChanging ${\mathbf{o}}_i$ moves the current shape; changing ${\mathbf{a}}_i$ moves the starting position of subsequent shapes.

For example, a combining character can select an accent glyph that must be positioned above an earlier base glyph. The accent's placement and its glyph advance answer different questions. Kerning similarly changes spacing according to context, while glyph substitution changes which forms are selected. These choices precede the rasterization of the placed outlines into pixels.

A text baseline is the reference line used to align glyphs in a run of text. It supplies a placement reference rather than the edge of every visible shape. In a horizontal coordinate system with the baseline at $y=0$, a descender can extend below the line, while an ascender extends above the main body of a lowercase letter. Aligning ink bounding boxes at their bottom edges would therefore fail to align the writing.^[ref]

The reference depends on the writing system and layout. OpenType distinguishes an alphabetic baseline (romn), a hanging baseline (hang) and a mathematical baseline (math), among others. The last is the reference about which mathematical forms are centred; it need not coincide with the alphabetic baseline. Vertical layout also requires an appropriate baseline convention.^[ref]

For a simple horizontal run, start the logical pen position at $(x_0,y_0)$ on the chosen text baseline. A glyph advance $(a,0)$ moves the next pen position to $(x_0+a,y_0)$. A vertical placement adjustment can move an accent glyph while leaving that baseline and the subsequent logical positions intact. This distinction lets glyph positioning align the run while placing individual forms precisely.

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 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 CSS strut is the imaginary zero-width CSS inline box used to represent a CSS block container's own font and line height when a CSS line box is constructed. It supplies minimum extents on both sides of the text baseline, even when the actual text uses smaller metrics.^[ref]

Suppose the container has font ascent $A=12$, font descent magnitude $D=4$ and line height $H=20$ CSS pixels. Its CSS leading is $20-12-4=4$, so the strut contributes 14 above and 6 below the text baseline. A small text contribution with extents 7.5 above and 2.5 below still produces a line 20 CSS pixels high because the strut dominates both directions.

The minimum is geometric rather than merely a comparison of total heights. If another contribution extends 18 above and 2 below the same text baseline, the enclosing CSS line box becomes $18+6=24$ CSS pixels. Both the strut and the other contribution individually total 20. Keeping the separate upper and lower extents explains the extra height.

This construction concerns a CSS line box that participates in layout. CSS also specifies conditions under which empty line boxes are treated as nonexistent, so line-height:20px alone does not make every otherwise empty block 20 CSS pixels high.^[ref]

A CSS inline box is the box generated by an inline CSS non-replaced element, such as a text element styled with display:inline. It participates in a CSS inline formatting context. When line breaking splits its content, fragments can occur on several CSS line boxes.^[ref]

For vertical line layout, its line-height and the CSS leading calculation determine its allocated extent. A child can contribute a taller box to the same CSS line box without changing the parent's own allocated height. For example, take a parent with line height 14 CSS pixels and baseline extents 10 above and 4 below. A child with line height 24 and extents 17 above and 7 below enlarges the enclosing line to 24 CSS pixels, assuming the CSS strut adds no greater extent. The parent's 14-CSS pixel allocation and the final 24-CSS pixel line describe different boxes.^[ref]

The height property does not supply a preferred height for a non-replaced CSS inline box; height:40px on such a text element therefore does not replace this line-layout calculation. The properties determining a CSS preferred size have different applicability from line-height.^[ref]

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.

CSS leading is the extra allowance around the font ascent and font descent when CSS constructs the vertical extent associated with a glyph. Let $A$ be the positive ascent, $D$ the positive descent magnitude and $H$ the selected line height, all at the same font size and in the same units. The extra leading and the resulting extents above and below the text baseline areThe half-leading is a layout allocation. It need not be a visible blank strip, and $L$ may be negative.^[ref]

This explains a subtle effect of mixing fonts. In a simple baseline-aligned line containing only ordinary text CSS inline boxes, include the block's CSS strut among the contributions indexed by $i$. The CSS line box must extend far enough in each direction, givingThe two maxima can come from different contributions. Suppose one has $(A,D,H)=(11,3,18)$ CSS pixels, giving $(A^{\prime },D^{\prime })=(13,5)$, while another has $(8,4,20)$, giving $(12,8)$. If the CSS strut adds no larger extent, the resulting CSS line box is $13+8=21$ CSS pixels high, exceeding both declared line heights. The assumption of a common text baseline matters: other vertical alignments and inline objects require the fuller layout rules.^[ref]

Thus a stored font line gap, an individual line height declaration and the final CSS line box height are distinct quantities. Comparing only nominal font sizes cannot explain the mixed-font result.

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.

In glyph positioning, the pen position is the logical point from which the next glyph is placed. The word pen describes a layout convention: the renderer can draw an outline or a collection of pixels rather than trace a physical pen stroke. Simple horizontal layout places this reference point on the text baseline.^[ref]

Let ${\mathbf{p}}_i$ be the current pen position, ${\mathbf{o}}_i$ a placement offset and ${\mathbf{a}}_i$ the resolved glyph advance. The current glyph's drawing origin and the next logical point are, respectively,For example, in one horizontal coordinate system, ${\mathbf{p}}_i=(10,20)$, ${\mathbf{o}}_i=(-1,2)$ and ${\mathbf{a}}_i=(8,0)$ draw at $(9,22)$ but leave the next logical point at $(18,20)$. Moving the current shape and changing the progression of the run are separate operations.

A glyph's bounding box is therefore not a substitute for its pen position. A left side bearing can leave space between the logical origin and the ink, and a right side bearing records how the ink ends relative to the default advance. Kerning or attachment of a combining character can modify the placement or progression without changing the stored outline.

A glyph advance is the displacement of the logical pen position after a glyph is processed. In horizontal layout its main component is often called the advance width. The OpenType horizontal-metrics table records an advanceWidth in font units, together with a left side bearing.^[ref]

The advance need not equal the width of the visible glyph's bounding box. A spacing text character can select a glyph with a positive advance and no visible outline. Conversely, a drawn shape can extend beyond its nominal advance, or a positioned accent can have a zero advance. The geometry of the ink and the progression of the logical pen therefore require separate data. In a simple horizontal metric, the advance is the left side bearing plus the ink width plus the right side bearing; overhangs can make a bearing negative.

For a hypothetical pair with advances 600 and 600 font units, a pair adjustment of minus 80 gives a total advance of 1120 font units. The second origin moves 80 font units left of its unadjusted position. No glyph outline needs to change for this kerning operation. The final layout can therefore have different advances from the default values stored for isolated glyphs.

Kerning adjusts spacing for particular combinations of glyphs. For example, the open region beneath an overhanging “T” can allow a following round glyph to be placed closer than a uniform spacing rule would suggest. The OpenType kern feature provides context-dependent adjustments for horizontal layout; the separate vkrn feature addresses vertical layout.^[ref]

In a simplified horizontal pair model with default glyph advances $a_1,a_2$ and adjustment $k$, the total advance is $a_1+a_2+k$. A negative $k$ reduces the gap for that pair, while a positive $k$ increases it. The numerical value depends on the computer font, its scale and the applicable layout rules; a particular letter pair does not have one universal adjustment.

Kerning is one application of glyph positioning. It can preserve the same glyph indices while changing their arrangement. A typographic ligature instead selects a combined form through glyph substitution. Selecting an appropriate form and placing it well are complementary parts of text shaping.