5.4 CSS 行内级对齐和基线

行内级对齐和基线和写模式(Writing mode)相关

When different kinds of inline-level content are placed together on a line, the baselines of the content and the settings of the vertical-align property control how they are aligned in the transverse direction of the line box. This section discusses what baselines are, how to find them, and how they are used together with the vertical-align property to determine the alignment of inline-level content.

Introduction to Baselines

A baseline is a line along the inline axis of a line box along which individual glyphs of text are aligned. Baselines guide the design of glyphs in a font (for example, the bottom of most alphabetic glyphs typically align with the alphabetic baseline), and they guide the alignment of glyphs from different fonts or font sizes when typesetting.

Picture of alphabetic text in two font sizes with the baseline and em-boxes

Different writing systems prefer different baseline tables.

Preferred baselines in various writing systems

A well-constructed font contains a baseline table, which indicates the position of one or more baselines within the font’s design coordinate space. (The design coordinate space is scaled with the font size.)

In a well-designed mixed-script font, the glyphs are positioned in the coordinate space to harmonize with one another when typeset together. The baseline table is then constructed to match the shape of the glyphs, each baseline positioned to match the glyphs from its preferred scripts.

The baseline table is a property of the font, and the positions of the various baselines apply to all glyphs in the font.

Different baseline tables can be provided for alignment in horizontal and vertical text. UAs should use the vertical tables in vertical typographic modes and the horizontal tables otherwise.

Text Baselines

In this specification, only the following baselines are considered:

alphabetic
The alphabetic baseline, which typically aligns with the bottom of uppercase Latin glyphs.
central
The central baseline, which typically crosses the center of the em box. If the font is missing this baseline, it is assumed to be halfway between the ascender (over) and descender (under) edges of the em box. In vertical typographic mode, the central baseline is used as the dominant baseline when text-orientation is mixed or upright. Otherwise the alphabetic baseline is used. A future CSS module will deal with baselines in more detail and allow the choice of other dominant baselines and alignment options.

Atomic Inline Baselines

If an atomic inline (such as an inline-block, inline-table, or replaced inline element) does not have a baseline, then the UA synthesizes a baseline table thus:

alphabetic
The alphabetic baseline is assumed to be at the under margin edge.
central
The central baseline is assumed to be halfway between the under and over margin edges of the box. The vertical-align property in [CSS21] defines the baseline of inline-table and inline-block boxes with some exceptions.

Baseline Alignment

The dominant baseline (which can change based on the typographic mode) is used in CSS for alignment in two cases:

  • Aligning glyphs from different fonts within the same inline box. The glyphs are aligned by matching up the positions of the dominant baseline in their corresponding fonts.
  • Aligning a child inline-level box within its parent. For the vertical-align value of baseline, child is aligned to the parent by matching the parent’s dominant baseline to the same baseline in the child. (E.g. if the parent’s dominant baseline is alphabetic, then the child’s alphabetic baseline is matched to the parent’s alphabetic baseline, even if the child’s dominant baseline is something else.) For values of sub, super, <length >, and <percentage>, the baselines are aligned as for baseline, but the child is shifted according to the offset given by its vertical-align value.

Given following sample markup:

<p><span class="outer">Ap <span class="inner">ji</span></span></p>

And the following style rule:

span.inner { font-size: .75em; }

The baseline tables of the parent (.outer) and the child (.inner) will not match up due to the font size difference. Since the dominant baseline is the alphabetic baseline, the child box is aligned to its parent by matching up their alphabetic baselines.

If we assign vertical-align: super to the .inner element from the example above, the same rules are used to align the .inner child to its parent; the only difference is in addition to the baseline alignment, the child is shifted to the superscript position.

span.inner { vertical-align: super; font-size: .75em; }