CSS Inline Layout Module Level 3

CSS Inline Layout Module Level 3
CSS Inline Layout Module Level 3
Editor’s Draft
20 April 2026
More details about this document
This version:
Latest published version:
Previous Versions:
Feedback:
CSSWG Issues Repository
Inline In Spec
Editor:
Elika J. Etemad / fantasai
Apple
Former Editors:
Dave Cramer
Hachette Livre
Steve Zilles
Adobe
Suggest an Edit for this Spec:
GitHub Editor
Issues list:
CSS3 Line Layout issues in GitHub
World Wide Web Consortium
W3C
liability
trademark
and
permissive document license
rules apply.
Abstract
The CSS formatting model provides for a flow of elements and text inside of a container to be wrapped into lines. This module describes box model for this inline layout model and defines the block-axis alignment and sizing of inline-level content, extending the model in
[CSS2]
. It also adds a special layout mode for drop-caps.
CSS
is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc.
Status of this document
This is a public copy of the editors’ draft.
It is provided for discussion only and may change at any moment.
Its publication here does not imply endorsement of its contents by W3C.
Don’t cite this document other than as work in progress.
Please send feedback
by
filing issues in GitHub
(preferred),
including the spec code “css-inline” in the title, like this:
“[css-inline]
…summary of comment…
”.
All issues and comments are
archived
Alternately, feedback can be sent to the (
archived
) public mailing list
www-style@w3.org
This document is governed by the
18 August 2025 W3C Process Document
The following features are at-risk, and may be dropped during the CR period:
the
initial-letter-wrap
property
“At-risk” is a W3C Process term-of-art, and does not necessarily imply that the feature is in danger of being dropped or delayed. It means that the WG believes the feature may have difficulty being interoperably implemented in a timely manner, and marking it as such allows the WG to drop the feature if necessary when transitioning to the Proposed Rec stage, without having to publish a new Candidate Rec without the feature first.
1.
Introduction
This module defines
inline layout
, the CSS model
for laying out a mixed stream of text and
inline-level
boxes,
and defines controls for the
block-axis
alignment and sizing
of this content within each line.
It also adds a
special layout mode for drop caps and similar initial letter styling
Note:
Line-breaking, justification, and other aspects of
inline-axis positioning of
inline-level
content
are handled in the
CSS Text Module
Many aspects of layout here depend on font metrics.
While the relevant metrics exist in OpenType for Latin/Cyrillic/Greek
and for
CJK
they are missing for many other writing systems.
For example, the visual top metric for Hebrew has no metric in the OpenType tables.
For this module to work well for the world,
we need fonts to provide the relevant metrics for all writing systems,
and that means both that OpenType needs to allow such metrics
and font designers need to provide accurate numbers.
See
issue
and
liaison statement
1.1.
Module Interactions
This module
replaces and extends the CSS inline layout model and features defined in
[CSS2]
section 10.8.
1.2.
Value Definitions
This specification follows the
CSS property definition conventions
from
[CSS2]
using the
value definition syntax
from
[CSS-VALUES-3]
Value types not defined in this specification are defined in CSS Values & Units
[CSS-VALUES-3]
Combination with other CSS modules may expand the definitions of these value types.
In addition to the property-specific values listed in their definitions,
all properties defined in this specification
also accept the
CSS-wide keywords
as their property value.
For readability they have not been repeated explicitly.
2.
Inline Layout Model
In
inline layout
a mixed, recursive stream of text and
inline-level boxes
forming an
inline formatting context
within a
block container
are laid out by
fragmenting
them into a stack of
line boxes
Within each
line box
inline-level boxes
are
aligned to each other
along the
block axis
typically by the
baselines
of their text.
Any
block container
that directly contains
inline-level
content—​such as
inline boxes
atomic inlines
, and
text sequences
—​establishes an
inline formatting context
to lay out its contents using
inline layout
The
block container
’s
content edges
form the
containing block
for each of the
inline-level boxes
participating in its
inline formatting context
The
block container
also generates
root inline box
which is an
anonymous
inline box
that holds
all of its
inline-level
contents.
(Thus, all text in an
inline formatting context
is directly contained
by an
inline box
whether the
root inline box
or one of its descendants.)
The
root inline box
inherits from its parent
block container
but is otherwise unstyleable.
In an
inline formatting context
content is laid out along the
inline axis
ordered according to the
Unicode bidirectional algorithm and its controls
[CSS-WRITING-MODES-3]
and distributed according to the typesetting controls in
[CSS-TEXT-3]
Inline-axis
margins
borders
, and
padding
are respected between
inline-level boxes
(and their margins do not
collapse
).
The resulting rectangular area that contains the boxes
that form a single line of
inline-level content
is called a
line box
Note:
Line boxes
and
inline boxes
and
inline-level boxes
are each different things!
See
[CSS-DISPLAY-3]
for an in-depth discussion of box types and related terminology.
2.1.
Layout of Line Boxes
Line boxes
are created as needed
to hold
inline-level
content
within an
inline formatting context
When an
inline box
exceeds the
logical width
of a
line box
or contains a
forced line break
it is split (see
CSS Text 3
§ 5 Line Breaking and Word Boundaries
into several
fragments
[CSS-BREAK-3]
which are partitioned across multiple
line boxes
Like
column boxes
in
multi-column layout
[CSS-MULTICOL-1]
line boxes
are
fragmentation containers
generated by their
formatting context
and are not part of the CSS
box tree
Note:
Inline boxes
can also be
split into several fragments
within the same line box due to bidirectional text processing
See
[CSS-WRITING-MODES-3]
Line boxes
are stacked
as the direct contents of the
block container box
in its
block flow direction
and aligned within this container as specified by
align-content
[CSS-ALIGN-3]
Thus, an
inline formatting context
consists of
a stack of
line boxes
Line boxes
are stacked with no separation
(except as specified elsewhere,
e.g. for
float
clearance
and they never overlap.
In general,
the
line-left
edge of a
line box
touches
the
line-left
edge of its
containing block
and the
line-right
edge touches
the
line-right
edge of its
containing block
and thus the
logical width
of a line box is equal to
the
inner
logical width
of its
containing block
(i.e. the
block container
’s
content box
).
However, floating boxes or
initial letter boxes
can come between the
containing block
edge and the
line box
edge,
reducing the space available to, and thus the
logical width
of,
any such impacted
line boxes
(See
CSS 2
§ 9.4.2 Inline formatting contexts
CSS 2
§ 9.5 Floats
and
§ 7 Initial Letters
.)
The
logical height
of a
line box
is fitted to its contents
once they have been
block-axis aligned
This fit is controlled by
line-height
and
line-fit-edge
The first/last line boxes in a
block container
may additionally
be trimmed by
text-box-trim
Inline Layout Box Model
2.2.
Layout Within Line Boxes
As described
above
user agents flow
inline-level boxes
into a stack of
line boxes
Layout within each
line box
is performed,
sizing and positioning each
box fragment
and
line box
independently,
as follows:
Baseline Alignment:
All
in-flow
inline-level boxes
in the
line box
are aligned to each other in the
block axis
according to
dominant-baseline
and
vertical-align
This is referred to as
baseline alignment
Those with
line-relative values
for
baseline-shift
are assumed to be aligned so as to minimize the line box height.
Content Size Contribution Calculation:
The
layout bounds
(i.e. the size contributions)
of each
inline-level box
in the
line box
are calculated:
For
atomic inlines
such as
replaced elements
and
inline blocks
this is their
margin box
For the
root inline box
and for
inline boxes
with
line-fit-edge: leading
this derived from their used
line-height
ignoring any
margin
border
padding
see
§ 5.3 Calculating the Logical Height Contributions (“Layout Bounds”) of Inline Boxes
For other
inline boxes
this is derived from their
line-fit-edge
metrics,
and includes any
margin
border
padding
see
§ 5.3 Calculating the Logical Height Contributions (“Layout Bounds”) of Inline Boxes
Line Box Sizing:
The
line box
’s
logical height
is sized
to exactly include the aligned
layout bounds
of all its
inline-level boxes
Content Positioning:
The
root inline box
’s
aligned subtree
and boxes
line-relative values
for
baseline-shift
are positioned within the
line box
Define what to do for top/bottom/center aligned boxes that are taller than the rest of the content.
Note:
Empty
inline boxes
still have
margins
padding
borders
, and a
line-height
and thus influence these calculations just like boxes with content.
2.3.
Phantom Line Boxes
Line boxes
that contain no text,
no
preserved white space
no
inline boxes
with non-zero inline-axis
margins
padding
, or
borders
and no other
in-flow
content
(such as
atomic inlines
or
ruby annotations
),
and do not end with a
forced line break
are
phantom line boxes
Such boxes must be treated as zero-
height
line boxes
for the purposes of determining the positions of any descendant content
(such as
absolutely positioned boxes
),
and both the
line box
and its
in-flow
content
must be treated as not existing for any other layout or rendering purpose.
What’s invisible?
Such
phantom line boxes
, which can still contain
unstyled empty
inline boxes
out-of-flow
boxes, and/or collapsed
document white space
are ignored, for example, for:
margin collapsing
finding the
first formatted line
applying
text-box-trim
fragmentation break propagation
etc.
Firefox allows the inline boxes within a
phantom line box
to accept
outline
,which allows it to make focus rings visible.
As in other browsers, all other properties that could make the element visible
(e.g.
box-shadow
seem to be ignored.
2.4.
Painting Order
Except as specified for
positioned boxes
(see
[CSS-POSITION-3]
inline-level boxes
are painted in
document order
the
z-index
property does not generally apply.
3.
Baselines and Alignment Metrics
3.1.
Introduction to Baselines
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.
Alphabetic text in two font sizes with the baseline and em-boxes
Different writing systems prefer different
baselines
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.
Note:
Fonts can have more than one
baseline table
in each axis;
the UA is responsible for choosing the appropriate table
in consideration of
font-language-override
and the
content language
3.2.
Baselines and Metrics
CSS uses the following text-based metrics
as
baselines
for
inline layout
functions
such as alignment, box sizing, and initial letter layout.
The CSSWG would like to know which baseline values are necessary
for each property that uses them
dominant-baseline
alignment-baseline
text-box-edge
line-fit-edge
initial-letter-align
):
if any can be dropped, or any need to be added.
See
Issue 859
alphabetic
Used in writing
Latin, Cyrillic, Greek, and many other scripts,
corresponds to the bottom of most, but not all, their characters,
(such as “m”, “Ш”, “Δ”).
Often represented as zero in font design coordinate systems;
assigned to
romn
in OpenType
and to
bsln
value zero in TrueType AAT.
cap-height
Corresponds to
the top of capital letters
(such as “T”, “Б”, “Σ”)
in Latin, Cyrillic, Greek, etc.
Calculated using
sCapHeight
in OpenType.
x-height
Corresponds to
the top of short lowercase letters
(such as “m”, “л”, “α”)
in Latin, Cyrillic, Greek, etc.
Calculated using
sxHeight
in OpenType.
x-middle
Corresponds to halfway between
the
alphabetic
and
x-height
baselines.
ideographic-over
Corresponds to
the
line-over
design edge of CJK (Han/Hangul/Kana) text.
Assigned to
idtp
in OpenType.
ideographic-under
Corresponds to
the
line-under
design edge of CJK (Han/Hangul/Kana) text.
Assigned to
ideo
in OpenType.
central
Corresponds to the ideographic central baseline,
halfway between the
ideographic-under
and
ideographic-over
baselines.
Assigned to
bsln
value 1 in TrueType AAT.
ideographic-ink-over
Corresponds to the
line-over
ink edge of CJK (Han/Hangul/Kana) text.
Assigned to
icft
in OpenType.
ideographic-ink-under
Corresponds to the line-under ink edge of CJK (Han/Hangul/Kana) text.
Assigned
icfb
in OpenType.
hanging
Corresponds to hanging baseline
from which characters in
Tibetan and similar unicameral scripts
with a strong but not absolute top edge seem to “hang”.
Assigned to
hang
in OpenType
and to
bsln
value 3 in TrueType AAT.
math
Corresponds to center baseline around which mathematical characters are designed.
Assigned to
math
in OpenType
and
bsln
value 4 in TrueType AAT.
text-over
Corresponds to the metric used as the
line-over
edge
of an
inline
’s
content box
per
[CSS2]
text-under
Corresponds to the metric used as the
line-under
edge
of an
inline
’s
content box
per
[CSS2]
em-over
Corresponds to a conceptual
ascent
normalized
to ensure 1em between
em-over
and
em-under
See
A.1: Calculating Em-over and Em-under
em-under
Corresponds to a conceptual
descent
normalized
to ensure 1em between
em-over
and
em-under
See
A.1: Calculating Em-over and Em-under
Note:
These metrics are optical design metrics,
and therefore do not necessarily correspond exactly
to actual glyph outlines.
In general, these metrics are taken from the appropriate font,
but if they are missing or need to be derived from a box rather than text,
they must be synthesized,
see
§ 3.3 Baselines of Glyphs and Boxes
and
Appendix A: Synthesizing Alignment Metrics
3.2.1.
Ascent and Descent Metrics
CSS assumes that every font has font metrics
that specify a characteristic height above the baseline—​called the
ascent metric
—​and a characteristic depth below it—​called the
descent metric
—​which CSS uses for laying out text and boxes
in an
inline formatting context
Note that these are metrics of the font as a whole
and need not correspond to the ascender and descender of any individual glyph.
Note:
It is recommended that implementations that use OpenType or TrueType fonts
use the metrics
sTypoAscender
and
sTypoDescender
from the font’s OS/2 table
(after scaling to the current element’s font size)
to find the
ascent metric
and
descent metric
for CSS layout.
In the absence of these metrics,
the "Ascent" and "Descent" metrics from the HHEA table should be used.
3.2.2.
Line Gap Metrics
Font formats can allow for a font-recommended
“line gap” or “external leading” metric.
This metric is referred to as the
line gap metric
and may be incorporated into the
line box
logical height
calculations
when
line-height
is
normal
as described in
§ 5.3 Calculating the Logical Height Contributions (“Layout Bounds”) of Inline Boxes
Note:
In OpenType, the
line gap metric
can be found
as
sTypoLineGap
or
hhea.lineGap
UAs must floor the
line gap metric
at zero.
3.3.
Baselines of Glyphs and Boxes
Each font, glyph, and
inline-level box
is assumed to have a
baseline
coordinate
for each
baseline
type
indicating that
baseline
’s position on its
block axis
The set of such
baselines
is called its
baseline set
The
baseline
from this set that is used to align
the box or glyph within its
alignment context
is called its
alignment baseline
the
baseline
used to align its content within itself
is called its
dominant baseline
For an individual glyph,
the
baseline set
derives from the font’s
baseline table
For an
inline box
it derives from its
first available font
regardless of whether the box actually contains any glyphs from that font.
If the requisite metrics are missing from a font,
the UA must synthesize them,
see
A.2: Synthesizing Baselines (and Other Font Metrics) for Text
For other
boxes
its
baseline set
is nominally derived from its contents
in accordance with
baseline-source
and the rules of the
formatting context
in which it participates.
For an
atomic inline box
with no
baseline set
in the
inline formatting context
’s
inline axis
its
alignment baselines
are
synthesized
from its
margin box
see
A.3: Synthesizing Baselines for Atomic Inlines
4.
Baseline Alignment
While most CSS
formatting contexts
position content
by aligning boxes with respect to their container’s edges,
inline layout
positions boxes in the
block axis
by aligning them with respect to each other
using their
baselines
More specifically,
(unless using a
line-relative shift value
each glyph or
inline-level box
is aligned in the
block axis
by positioning its
alignment baseline
to match the
corresponding
baseline
of its parent
(which is its
alignment context
),
and then is potentially shifted from that position
according to its
post-alignment shift
Note:
Baseline alignment always matches corresponding baselines:
alphabetic to alphabetic, hanging to hanging, mathematical to mathematical, etc.
When aligning a
box
, the
alignment baseline
is chosen
according to its
alignment-baseline
and
baseline-source
values
(see shorthand
vertical-align
),
and defaults to matching the parent’s
dominant-baseline
For a glyph, the
alignment baseline
is always determined
by the parent’s
dominant baseline
Given following sample markup:
><
span
class
"outer"
Ap
span
class
"inner"
ਜੀ
span
>span
>And the following style rule:
.inner
font-size
75
The
baseline sets
of the parent (
.outer
) and the child (
.inner
will not match up due to the font size difference.
The child box is aligned to its parent
by matching up their
alphabetic baselines
The
alphabetic baseline
is used here
because by default a box’s
alignment baseline
matches
the
dominant baseline
of its parent,
and in horizontal
typographic mode
the
dominant baseline
itself defaults to the
alphabetic baseline
If we add
vertical-align: super
to the
.inner
element from the example above,
the same rules are used to align the
.inner
child to its parent;
but in addition to the baseline alignment,
the child is shifted to the superscript position.
4.1.
Dominant Baselines: the
dominant-baseline
property
Name:
dominant-baseline
Value:
auto

Initial:
auto
Applies to:
block containers, inline boxes, table rows, grid containers, flex containers, and SVG
text content elements
Inherited:
yes
Percentages:
N/A
Computed value:
specified keyword
Canonical order:
per grammar
Animation type:
discrete
This property specifies the
dominant baseline
which is the default baseline type used to align content within the box.
For
inline boxes
the
dominant baseline
is used to align the box’s text
(and, unless otherwise specified by
vertical-align
, any
inline-level
child boxes)
by aligning each glyph/box’s corresponding baseline to the box’s own
dominant baseline
For other boxes, it indicates the default
alignment baseline
of any boxes participating in
baseline alignment
in the box’s
alignment context
see (
alignment-baseline: baseline
and
[CSS-ALIGN-3]
).
The

value, which identifies
specific baseline metrics, expands to

= text-bottom
alphabetic
ideographic
middle
central
mathematical
hanging
text-top
Values have the following meanings:
auto
Equivalent to
alphabetic
in
horizontal writing modes
and in
vertical writing modes
when
text-orientation
is
sideways
Equivalent to
central
in
vertical writing modes
when
text-orientation
is
mixed
or
upright
However, in SVG text, the origin point of glyphs
(used for coordinate-based glyph positioning)
is always handled as for
central
in
vertical writing modes
text-bottom
Use the
text-under baselines
alphabetic
Use the
alphabetic baselines
ideographic
Use the
ideographic-under baselines
middle
Use the
x-middle baselines
except under
text-orientation: upright
(where the
alphabetic
and
x-height
baselines are essentially meaningless)
use the
central baseline
central
Use the
central baselines
mathematical
Use the
math baselines
hanging
Use the
hanging baselines
text-top
Use the
text-over baselines
See
[CSS-WRITING-MODES-3]
for an introduction to dominant baselines.
Define behavior for mixed vertical orientations that isn’t nonsensical
when specified baseline isn’t
central
4.2.
Transverse Box Alignment: the
vertical-align
property
Name:
vertical-align
Value:
[ first
last]
||
<'alignment-baseline'>
||
<'baseline-shift'>
Initial:
baseline
Applies to:
see individual properties
Inherited:
no
Percentages:
N/A
Computed value:
see individual properties
Animation type:
see individual properties
Canonical order:
per grammar
This
shorthand
property specifies
how an inline-level box is aligned within the line
by specifying its
alignment baseline
type (
alignment-baseline
),
baseline alignment preference
baseline-source
),
and
post-alignment shift
baseline-shift
in a single declaration.
If
first
or
last
is specified,
it sets
baseline-source
(which is otherwise reset to
auto
).
Other values are as for the corresponding longhand properties, see below.
Authors should use this shorthand (
vertical-align
) instead of its longhands,
unless specifically needing to cascade its longhands independently
or (on SVG elements) to support legacy SVG implementations.
Note:
vertical-align
can also affect the alignment of table cells
when
align-content
is
normal
Specifically,
top
baseline-shift: top
) maps it to
start
bottom
baseline-shift: bottom
) to
end
and otherwise
middle
alignment-baseline: middle
) to
center
See
CSS Box Alignment 3
§ 5.1.1 Block Containers (Including Table Cells)
4.2.1.
Alignment Baseline Source: the
baseline-source
longhand
Name:
baseline-source
Value:
auto
first
last
Initial:
auto
Applies to:
inline-level boxes
Inherited:
no
Percentages:
N/A
Computed value:
specified keyword
Canonical order:
per grammar
Animation type:
discrete
When an inline-level box
has more than one possible source for baseline information
(such as for a multi-line inline block or inline flex container)
this property specifies whether the
first baseline set
or
last baseline set
is preferred for alignment,
indicating the box’s
baseline alignment preference
Values have the following meanings:
auto
Specifies
last-baseline alignment
for
inline-block
first-baseline alignment
for everything else.
first
Specifies
first-baseline alignment
last
Specifies
last-baseline alignment
See
CSS Box Alignment 3
§ 9.1 Determining the Baselines of a Box
for how to find the baselines of boxes other than
inline boxes
4.2.2.
Alignment Baseline Type: the
alignment-baseline
longhand
Name:
alignment-baseline
Value:
baseline

Initial:
baseline
Applies to:
inline-level boxes, flex items, grid items, table cells, and SVG
text content elements
Inherited:
no
Percentages:
N/A
Computed value:
specified keyword
Canonical order:
per grammar
Animation type:
discrete
This property specifies the box’s
alignment baseline
the
baseline
used to align the box
prior to applying its
post-alignment shift
(if applicable). Values have the same meanings as for
dominant-baseline
the
baseline
keyword uses the
dominant baseline
choice of the parent.
When performing
baseline alignment
these values specify which
baseline
of the box is aligned
to the corresponding
baseline
of its
alignment context
(In an
inline formatting context
inline-level
box fragments
and glyphs
share an
alignment context
established by
their parent
inline box
fragment
along its
inline axis
For other
formatting contexts
see
CSS Box Alignment 3
§ 9.2 Baseline Alignment Grouping
.)
In SVG text layout,
these values instead specify the
baseline
that is aligned
to the SVG
current text position
4.2.2.1.
Legacy Values for SVG
SVG implementations
may
support the following aliases
in order to support legacy content:
text-before-edge
aliasing
text-top
text-after-edge
aliasing
text-bottom
These values are not allowed in the
vertical-align
shorthand.
4.2.3.
Post-Alignment Shift: the
baseline-shift
longhand
Name:
baseline-shift
Value:

sub
super
top
center
bottom
Initial:
Applies to:
inline-level boxes and SVG
text content elements
Inherited:
no
Percentages:
refer to the used value of
line-height
Computed value:
the specified keyword or a computed

value
Canonical order:
per grammar
Animation type:
by computed value type
This property specifies the box’s
post-alignment shift
The
baseline-relative shift values

sub
super
shift the box relative to its baseline-aligned position,
whereas the
line-relative shift values
top
center
, and
bottom
shift the
inline box
and its contents
relative to the bounds of its
line box
Authors should use the
vertical-align
shorthand,
which has existed since CSS1,
instead of this
baseline-shift
longhand
(except in SVG content,
where conversely
baseline-shift
is more widely-supported in legacy user agents).
Values have the following meanings:

Raise (positive value) or lower (negative value) by the specified length.

Raise (positive value) or lower (negative value) by the specified percentage of the
line-height
sub
Lower by the offset appropriate for subscripts of the parent’s box.
The UA may use the parent’s font metrics to find this offset;
otherwise it defaults to dropping by
one fifth of the parent’s used
font-size
super
Raise by the offset appropriate for superscripts of the parent’s box.
The UA may use the parent’s font metrics to find this offset;
otherwise it defaults to raising by
one third of the parent’s used
font-size
top
Align the
line-over
edge of the
aligned subtree
with the
line-over
edge of the
line box
center
Align the center of the
aligned subtree
with the center of the
line box
bottom
Align the
line-under
edge of the
aligned subtree
with the
line-under
edge of the
line box
The
aligned subtree
of an
inline box
contains
the
layout bounds
of that box
and the
aligned subtrees
of all child
inline boxes
whose computed
alignment-baseline
value
is not itself a
line-relative shift value
The
line-over
edge of the
aligned subtree
is the highest
over
edge of the
layout bounds
in the subtree,
and the
line-under
edge is analogously the lowest.
The
line-relative shift values
don’t fit perfectly
in the dichotomy between
alignment-baseline
and
baseline-shift
There’s
decent
arguments
for either option.
They’re currently drafted here,
but if there’s a strong argument to move them,
please file an issue for consideration.
4.2.3.1.
Legacy Values for SVG
User agents
may
additionally support
the keyword
baseline
as computing to
if is necessary for them to support legacy SVG content.
This value is not allowed in the
vertical-align
shorthand.
We would prefer to remove the
baseline
value, and are looking for feedback from SVG user agents as to whether it’s necessary.
5.
Logical Heights and Inter-line Spacing
The
block-axis
sizing of a
line box
depends on the sizes and
alignment
of its
inline-level
contents.
This sizing is controlled by
the
line-height
and
line-fit-edge
properties.
5.1.
Line Spacing: the
line-height
property
Name:
line-height
Value:
normal


Initial:
normal
Applies to:
non-replaced inline boxes and SVG
text content elements
Inherited:
yes
Percentages:
see below
Computed value:
the specified keyword, a number, or a computed

value
Canonical order:
per grammar
Animation type:
by computed value type
This property specifies the box’s
preferred line height
which is used in calculating its “
layout bounds
”,
i.e. its contribution to the
logical height
of its
line box
(See
§ 5.3 Calculating the Logical Height Contributions (“Layout Bounds”) of Inline Boxes
.)
Note:
Because it applies to the
root inline box
when specified on a
block container
line-height
effectively establishes
the minimum height of the block’s
line boxes
Values for this property have the following meanings:
normal
Determine the
preferred line height
automatically based on the metrics of the used font.

The specified length is used as the
preferred line height
Negative values are illegal.

The
preferred line height
is this number
multiplied by the element’s used
font-size
Negative values are illegal.
The
computed value
is the same as the
specified value

The
preferred line height
is this percentage of the element’s used
font-size
The
computed value
of the property
is this percentage of the element’s computed
font-size
Negative values are illegal.
Note:
Metrics from fonts other than the
first available font
only impact the
layout bounds
of an
inline box
with
line-height: normal
The three rules in the example below have the same used line height:
div
line-height
1.2
font-size
10
pt
/* number */
div
line-height
1.2
em
font-size
10
pt
/* length */
div
line-height
120
font-size
10
pt
/* percentage */
However, they inherit differently:
the first one inherits as a number,
which will lead to different line heights if descendants have different font sizes;
the last two as inherit as absolute lengths,
which will not be influenced by the font size on descendants.
The fact that percentages compute to lengths is annoying.
See also
Issue 3118
and
Issue 2165
Note:
When
line-fit-edge
is
leading
the margins, borders, and padding of
inline boxes
do not affect the line box’s height calculation.
However, they are still rendered around these boxes.
This means that if the size specified by
line-height
is less than the size of the box,
backgrounds and borders can “bleed” into adjoining line boxes,
potentially obscuring earlier content.
5.2.
Text Edge Metrics: the
line-fit-edge
property
Name:
line-fit-edge
Value:
leading

Initial:
leading
Applies to:
inline boxes
Inherited:
yes
Percentages:
N/A
Computed value:
the specified keyword
Canonical order:
per grammar
Animation type:
discrete
This is an early draft of a proposal,
and might change significantly
as design critiques and use cases are registered
and various details and interactions with other properties are worked out.
Do not ship (yet).
Inline boxes
, whose primary purpose is to contain text,
are sized in the
block axis
based on their font metrics.
The
line-fit-edge
property controls which metrics are used.
These chosen metrics are used as the basis
for the
layout bounds
of the
inline box
(if it is not the
root inline box
);
and also, by default, are the metrics used for
text-box-trim
The

value,
which identifies specific font metrics,
expands to

= [ text
ideographic
ideographic-ink ]
[ text
ideographic
ideographic-ink
cap
ex ]
[ text
ideographic
ideographic-ink
alphabetic ]
The first value specifies the text
over
edge;
the second value specifies the text
under
edge.
If only one value is specified,
both edges are assigned that same keyword if possible;
else
text
is assumed as the missing value.
Do we need
longhands
or is this shorthand enough?
[Issue #5236]
Values have the following meanings:
leading
Use the
ascent
descent
plus any positive
half-leading
Margin/padding/border is ignored
for the purpose of sizing the
line box
text
Use the
text-over baseline
text-under baseline
as the
over
under
edge.
cap
Use the
cap-height baseline
as the
over
edge.
ex
Use the
x-height baseline
as the
over
edge.
ideographic
Use the
ideographic-over baseline
ideographic-under baseline
as the
over
under
edge.
ideographic-ink
Use the
ideographic-ink-over baseline
ideographic-ink-under baseline
as the
over
under
edge.
alphabetic
Use the
alphabetic baseline
as the
under
edge.
Is
text
a reasonable name for the ascent/descent metrics,
or can we think of something better?
Ditto
leading
as a keyword.
[Issue #8067]
Unless
line-fit-edge
is
leading
—​in which case the box’s own
line-height
is used to add spacing—​the box’s margin, padding, and border also contribute
to the
layout bounds
Note:
The
leading
and
text
values
rely on the font
ascent
and
descent
to make sure the text fits.
Other values are more likely to result in overlap or overflow
caused by ascents above the specified metrics
(such as for diacritics),
so authors using these values need to be careful
to provide sufficient spacing for the text,
particularly in multi-lingual contexts.
The
line-fit-edge
property, showing values for
leading
cap
, and
ex
The red lines indicate the layout bounds of the inline box.
This illustration doesn’t match actual font metrics,
it’s actually illustrating the cap-height, not the ascent.
[Issue #11364]
When
line-fit-edge
is
leading
vertical rhythm can be broken any time there is a change
in font metrics or vertical alignment within a paragraph.
Other values are more likely to give consistent line spacing—​as long as there is enough leading added
that the half-leading on the root inline
is large enough to accommodate the specified metrics of any descendants.
The line box will still grow, however, to accommodate
content that would otherwise overflow,
to avoid overlap between lines.
Note:
Although only
leading
applies positive
half-leading
in order to allow text to be set tightly,
all values apply negative
half-leading
see
§ 5.3 Calculating the Logical Height Contributions (“Layout Bounds”) of Inline Boxes
Half-leading is applied equally to both sides of the text;
for more precise overlap control authors can use
line-fit-edge: text
together with negative
margins
on the affected text.
5.3.
Calculating the Logical Height Contributions (“Layout Bounds”) of Inline Boxes
The contribution of an
inline box
to the
logical height
of its
line box
here referred to as its
layout bounds
is always calculated with respect to its own text metrics,
as described below,
and is controlled by
line-fit-edge
and
line-height
The sizes and positions of child boxes do not influence
its
layout bounds
(nor its own
logical height
, for that matter,
see
inline-sizing
).
Note:
The
layout bounds
need not correspond
to the box’s
edges
To find the
layout bounds
of an
inline box
the UA must first align
all the glyphs
directly
contained in the
inline box
to each other by their
dominant baselines
(See
§ 3.3 Baselines of Glyphs and Boxes
.)
If the
inline box
contains no glyphs at all,
or if it contains only glyphs from fallback fonts,
it is considered to contain a “strut” (an invisible glyph of zero width)
with the metrics of the box’s
first available font
For each glyph (including the “strut”),
represents its ascent above the
baseline
represents its descent below.
Unless
line-fit-edge
specifies a different metric to use,
refers to the
ascent metric
(for the given font at its given size)
and
to the
descent metric
each adjusted to account for the
dominant baseline
’s offset from zero.
If
line-height
computes to
normal
and either
line-fit-edge
is
leading
or this is the
root inline box
the font’s
line gap metric
may also be incorporated into
and
by adding half to each side as
half-leading
When its computed
line-height
is
normal
the
layout bounds
of an inline box encloses all its glyphs,
going from the highest
to the deepest
(Note that glyphs in a single box
can come from different fonts
and thus might not all have the same
and
.)
When its computed
line-height
is not
normal
its
layout bounds
are derived solely from
metrics of its
first available font
(ignoring glyphs from other fonts),
and
leading
is used
to adjust the effective
and
to add up to the used
line-height
Calculate the
leading
as
line-height
- (
).
Half the
leading
(its
half-leading
is added above
of the first available font,
and the other half below
of the first available font,
giving an effective ascent above the baseline of
A′
/2,
and an effective descent of
D′
/2.
However, if
line-fit-edge
is not
leading
and this is not the
root inline box
if the
half-leading
is positive, treat it as zero.
The
layout bounds
exactly encloses
this effective
A′
and
D′
Note:
may be negative.
Additionally,
when
line-fit-edge
is not
leading
the
layout bounds
are inflated
by the sum of the
margin
border
, and
padding
on each side.
In order to allow negative
margin
values to have an actual effect,
negative
margins
are also accumulated onto
the
layout bounds
of any descendant
inline boxes
participating in the same
inline formatting context
In Quirks Mode
[QUIRKS]
any
inline box
fragment
that has zero borders and padding and
that does not directly contain text or
preserved white space
[CSS-TEXT-3]
is ignored when sizing the
line box
6.
Trimming Leading Over/Under Text
To ensure consistent spacing in the basic case of running text,
CSS line layout introduces leading both above and below
the text content of each line
as needed to ensure its
line-height
In addition, the ascent and descent font metrics themselves
often include extra space above and below the most typical glyph shapes
in order to accommodate occasional characters and diacritics
that ascend or descend beyond the typical bounds.
This prevents adjacent lines of text from overlapping each other.
However, all this extra spacing interferes with visual alignment
and with control over effective (visually-apparent) spacing.
The
text-box
property allows trimming
this additional space above and below
the first and last lines of a block,
allowing more precise control over spacing around the glyphs.
By relying on font metrics rather than hard-coded lengths,
this feature allows content to be resized, rewrapped, and rendered in a variety of fonts
while maintaining that precise spacing.
A common problem is vertical centering.
It’s easy to vertically center the text container to an icon,
but because the visual boundaries of Latin text
are the cap height and the alphabetic baseline,
rather than the ascent and descent,
this often doesn’t yield the intended visual effect.
Measuring to the top/bottom of the text may yield equal results,
but measuring to the visual bounds shows that it is not visually centered.
To center the text visually,
it’s necessary to assume the cap height and alphabetic baseline
as the top and bottom edges of the text,
respectively.
Measuring to the cap height / alphabetic baseline
instead of the ascent / descent
and equalizing those distances
visually centers the text.
By using
text-box-trim
to strip out the spacing above the cap height
and below the alphabetic baseline,
centering the box actually centers the text;
and does so reliably, regardless of what font is used to render it.
Even though different fonts have different cap heights,
by using the font’s metric rather than a magic number,
the layout intention is met even as the font is changed.
6.1.
Shorthand for Text Box Trimming: the
text-box
property
Name:
text-box
Value:
normal
<'text-box-trim'>
||
<'text-box-edge'>
Initial:
normal
Applies to:
block containers
multi-column containers
, and
inline boxes
Inherited:
no
Percentages:
N/A
Computed value:
the specified keyword
Canonical order:
per grammar
Animation type:
discrete
This property is a
shorthand
for setting the
text-box-trim
and
text-box-edge
properties
in a single declaration.
If the single keyword
normal
is specified,
it sets
text-box-trim
to
none
and
text-box-edge
to
auto
Otherwise, omitting the
text-box-trim
value sets it to
trim-both
(not the initial value),
while omitting the
text-box-edge
value sets it to
auto
(the initial value).
Add examples.
6.2.
Trimming Over/Under Text: the
text-box-trim
property
Name:
text-box-trim
Value:
none
trim-start
trim-end
trim-both
Initial:
none
Applies to:
block containers
multi-column containers
, and
inline boxes
Inherited:
no
Percentages:
N/A
Computed value:
the specified keyword
Canonical order:
per grammar
Animation type:
discrete
On
inline boxes
specifies whether to trim the
content box
to match the specified
text-box-edge
metric.
See
§ 5.3 Calculating the Logical Height Contributions (“Layout Bounds”) of Inline Boxes
for details.
On
block containers
as well as on each column of a
multi-column container
specifies whether to trim
half-leading
at the start/end of the box’s content
to better match its
content edge
to its text content.
The trimming edge in this case
is specified by the start/end
text-box-edge
value
of the affected
line box
’s
containing block
Values have the following meanings:
none
No special handling of the first/last
line box
when applied to a
block container
When applied to an
inline box
specifies that the over/under
content edges
coincide
with the
text-over
text-under
baselines
regardless of
text-box-edge
trim-start
For
block containers
and
column boxes
trim the
block-start
side of the
first formatted line
to the specified metric of its
root inline box
If there is no such line,
or if there is intervening non-zero padding or borders,
there is no effect.
For
inline boxes
trims the
block-start
side of the box
to match its
content edge
to the metric specified by
text-box-edge
trim-end
For
block containers
and
column boxes
trim the
block-end
side of the last formatted line
to the specified metric of its
root inline box
If there is no such line,
or if there is intervening non-zero padding or borders,
there is no effect.
For
inline boxes
trims the
block-end
side of the box
to match its
content edge
to the metric specified by
text-box-edge
trim-both
Specifies the behavior of
trim-start
and
trim-end
simultaneously.
Note:
Like
::first-line
this property does not apply to, or propagate through,
flex, grid, or table
formatting contexts
Note:
The
block-end
side does not coincide with the
line-under
side
when
writing-mode
is
vertical-lr
If multiple ancestors specify trimming on the same
line box
the metric used is that of the innermost
block container
that requests trimming on that side of the
line box
Note:
Content and ink overflowing a box
due to non-initial values of
text-box-trim
is handled the same as content that would overflow the box or line box otherwise.
Unlike
::first-line
when applying to the first (or last) formatted line of a
multi-column container
this property applies to the first (or last) formatted lines
of
every
column in the
multi-column container
What happens if the column is split by a spanner?
[Issue #11363]
When the box to which
text-box-trim
has been applied
is split by
fragmentation
[CSS-BREAK-3]
whether trimming is applied per fragment
or only to the start/end edges of its first/last fragments
is determined by
box-decoration-break
If, when printing, trimming a
line box
would cause its content to be clipped,
the UA may ignore
text-box-trim
on that edge of that
line box
6.3.
Text Trimming Metrics: the
text-box-edge
property
Name:
text-box-edge
Value:
auto

Initial:
auto
Applies to:
block containers
and
inline boxes
Inherited:
yes
Percentages:
N/A
Computed value:
the specified keyword
Canonical order:
per grammar
Animation type:
discrete
This property specifies the metrics to use for
text-box-trim
effects.
Values have the same meanings as for
line-fit-edge
the
auto
keyword
uses the value of
line-fit-edge
interpreting
leading
(the
initial value
) as
text
Note:
This property can be set together with
text-box-trim
in the
text-box
shorthand
Unlike
line-fit-edge
, it does not inherit;
however its
initial value
copies from
line-fit-edge
which does inherit.
6.4.
Inline Box Drawing Height: the
inline-sizing
property
Name:
inline-sizing
Value:
normal
stretch
Initial:
normal
Applies to:
inline boxes
, but not
ruby container boxes
nor
internal ruby boxes
Inherited:
yes
Percentages:
n/a
Computed value:
specified keyword
Canonical order:
per grammar
Animation type:
discrete
This has a confusing name. We need a new name.
Alternatively, incorporate this into
text-box-trim
[Issue #5189]
This property specifies how the
logical height
of the
content area
of an
inline box
is measured in relation to its contents.
It has no effect on the size or position of the box’s contents,
the line box, or any other content.
Values have the following meanings:
normal
The
content area
of the
inline box
is sized and positioned to fit (possibly hypothetical) text
from its
first available font
If
text-box-trim
indicates trimming,
then the specified metric must be used.
Otherwise, this specification does not specify how.
A UA may, e.g., use the maximum ascender and descender of the font.
(This would ensure that glyphs with parts above or below the em-box
still fall within the content area,
but leads to differently sized boxes for different fonts.)
Note:
If more than one font is used
(which happen when glyphs are found in different fonts),
the
logical height
of the
content area
is not affected
by the glyphs from the fallback fonts,
and only depends on the
first available font
However, these fallback glyphs can still affect the
line box
size
when
line-height
is
normal
see
§ 5.3 Calculating the Logical Height Contributions (“Layout Bounds”) of Inline Boxes
stretch
Once the
line box
has been sized and its contents positioned
as for
normal
the
inline box
’s
box edges
are shifted
such that its
over
under
margin edges
coincide
with the corresponding
line box
’s edges,
stretching the
inline box
’s
inner
logical height
so that its
block-axis
outer size
fills the
line box
(The sizes and positions of its
in-flow
contents are not affected.)
Note:
The
height
property does not apply to
inline boxes
Note:
The
line-height
has no impact on the size of an
inline box
it only
affects its contribution
to the
logical height
of its
line box
7.
Initial Letters
The editors would appreciate any examples of drop initials in non-western scripts, especially Indic scripts.
7.1.
An Introduction to Initial Letters
This section is non-normative.
Large, decorative letters have been used to start new sections of text since before the invention of printing.
In fact, their use predates lowercase letters entirely.
7.1.1.
Drop Initial
dropped initial
(or “drop cap”)
is a larger-than-usual letter at the start of a paragraph,
with a baseline at least one line lower than the first baseline of the paragraph.
The size of the drop initial is usually indicated by how many lines it occupies.
Two- and three-line drop initials are very common.
Three-line drop initial with E acute.
Since the cap-height of the drop initial aligns with the cap-height of the main text,
the accent extends above the paragraph.
The exact size and position of a
dropped initial
depends on the alignment of its glyph.
Reference points on the drop cap must align precisely
with reference points in the text.
The alignment constraints for drop initials depend on the writing system.
In Western scripts, the top reference points are
the cap height of the initial letter and of the first line of text.
The bottom reference points are
the alphabetic baseline of the initial letter
and the baseline of the Nth line of text.
The figure below shows a simple two-line drop cap, with the relevant reference lines marked.
Two-line drop cap showing baselines (green lines), cap-height (red line), and ascender (cyan line).
In Han-derived scripts, the initial letter extends
from the
block-start
edge of the glyphs on the first line
to the
block-end
edge of the glyphs on the Nth line.
Two-line drop initial in vertical writing mode
In certain Indic scripts,
the top alignment point is the hanging baseline,
and the bottom alignment point is the text-after-edge.
Devanagari
initial letter
aligned with hanging baseline. Alignment points shown in red.
7.1.2.
Sunken Initial Letters
Some styles of drop initials do not align with the first line of text.
sunken initial
(or “sunken cap”)
both sinks below the first baseline,
and extends above the first line of text.
Sunken cap. The letter drops two lines, but is the size of a three-line initial letter.
7.1.3.
Raised Initial Letters
raised initial
(often called a “raised cap” or “stick-up cap”) “sinks” to the first text baseline.
Note:
A proper raised initial has several advantages over
simply increasing the font size of a first letter.
The line spacing in the rest of the paragraph will not be altered,
but text will still be excluded around large descenders.
And if the size of raised initial is defined to be an integral number of lines,
implicit baseline grids can be maintained.
Raised cap. The initial letter is the size of a 3-line initial, but does not drop.
7.2.
Selecting Initial Letters
This section is non-normative.
Initial letters are typically a single letter, although
they may include punctuation or a sequence of characters which
are perceived by the user to be a single typographic unit.
The
::first-letter
pseudo-element,
defined in
[SELECT]
and
[CSS-PSEUDO-4]
can be used to select the character(s) to be formatted as
initial letters
Authors who need more control over which characters are included in an initial letter,
or who want to apply initial-letter formatting to replaced elements or multiple words
can alternately apply the
initial-letter
property to the first inline-level child of a block container.

This paragraph has a dropped “T”.

ere we have an illuminated “H”.

Words may also be given initial letter styling at the beginning of a paragraph.
::first-letter, /* style first paragraph's T */
img, /* style illuminated H */
span /* style phrase inside span */
{ initial-letter: 2; }
Note that
since
::first-letter
selects punctuation before or after the first letter,
these characters are included in the
initial letter
when
::first-letter
is used.
The
::first-letter
pseudo-element selects the quotation mark as well as the “M”.
Should there be a way to opt out of this behavior? See
GitHub Issue 310
7.3.
Creating Initial Letters: the
initial-letter
property
Name:
initial-letter
Value:
normal



&&
[ drop
raise ]
Initial:
normal
Applies to:
certain inline-level boxes and
::first-letter
and inside
::marker
boxes (
see prose
Inherited:
no
Percentages:
N/A
Computed value:
the keyword
normal
or a number paired with an integer
Canonical order:
per grammar
Animation type:
by computed value type
This property specifies
the
size
and
sink
for dropped, raised, and sunken initial letters
as the number of lines spanned.
For example, the following code will create
a 2-line dropped initial letter
at the beginning of each paragraph
that immediately follows a second-level heading:
h2 + p::first-letter { initial-letter: 2; }
It takes the following values:
normal
No special initial letter effect. Text behaves as normal.

This first argument defines the
size
of the initial letter
in terms of how many lines it occupies.
Values less than one are invalid.

This optional second argument
defines the number of lines the initial letter should
sink
A value of
indicates a
raised initial
values greater than
indicate a
sunken initial
Values less than one are invalid.
raise
Computes to an
initial letter sink
of
drop
Computes to an
initial letter sink
equal to the
initial letter size
floored to the nearest positive whole number.
If the
initial letter sink
value is omitted,
drop
is assumed.
Values other than
normal
cause the affected box to become an
initial letter box
which is an
in-flow
inline-level box
with special layout behavior.
Here are some examples of
initial-letter
usage:
initial-letter: 3
initial-letter: 3 3
initial-letter: 3 drop
initial-letter: drop 3
Represents a
dropped initial
3 lines high, 3 lines deep.
initial-letter: 3 2
Represents a
sunken initial
3 lines high, 2 lines deep.
initial-letter: 3 1
initial-letter: 3 raise
initial-letter: raise 3
Represents a
raised initial
3 lines high, 1 line deep.
initial-letter: 2.51 3
The size of the initial letter does not have to be an integral number of lines.
In this case only the top aligns.
In conjunction with other CSS properties,
initial-letter
can be used to create
“adjacent initial letters,” where the initial letter is adjacent to the text:
p::first-letter {
initial-letter: 3;
color: red;
width: 5em;
text-align: right;
margin-left: -5em;

p {
margin-left: 5em;
7.3.1.
Applicability
To give authors more control over which characters can be styled as an
initial letter
and to allow the possibility of multi-character
initial letters
(such as for first word or first phrase styling),
the
initial-letter
property applies not just
to the CSS-defined
::first-letter
pseudo-element,
but also to
inside
-positioned
::marker
pseudo-elements and
to
inline-level boxes
that are placed at the start of the first line.
Specifically,
initial-letter
applies to
any
inline-level box
—​including any such
::first-letter
or
::marker
box—​that is the first child of its parent box
and whose ancestors (if any) that are descendants of its
containing block
are all first-child
inline boxes
that have a
computed
initial-letter
value
of
normal
For example,
the


, and

elements
in the following example are
"first-most inline-level descendants" of the

but the

element
is not:

This phrase is styled
specially. …
If we apply the following rules:
em { initial-letter: 2; }
b, strong { initial-letter: 3; }
The
initial-letter
property will take effect only on the

The styling on

is ignored,
as it has an ancestor already styled as an
initial letter
and the styling on

is ignored
because it is a second sibling.
The result might be rendered as
If
initial-letter
is applied to an
inline-level box
that is not positioned at the start of the line due to bidi reordering
or which is otherwise preceded by other
inline-level
content,
its
used value
is
normal
and it is not formatted as an
initial letter
The effect of the
initial-letter
property is undefined
on children of
ruby base container boxes
and on
ruby container boxes
Note:
The
initial-letter
property cannot apply to any element
whose
float
is not
none
or
position
is not
static
because these values cause its
display
to compute to
block
7.4.
Alignment of Initial Letters: the
initial-letter-align
property
As mentioned earlier, the alignment of initial letters
depends on the script used.
The
initial-letter-align
property can be used to specify the proper alignment.
Name:
initial-letter-align
Value:
[ border-box
[ alphabetic
ideographic
hanging
leading ]
Initial:
alphabetic
Applies to:
certain inline-level boxes and
::first-letter
and inside
::marker
boxes (
see prose
Inherited:
yes
Percentages:
N/A
Computed value:
specified keyword(s)
Canonical order:
per grammar
Animation type:
discrete
This property specifies the alignment points
used to size and position an
initial letter
Two sets of alignment points are necessary:
the
over
and
under
alignment points of the
initial letter
are matched to corresponding
over
and
under
points
of the
root inline box
Values have the following meanings:
alphabetic
Use the
cap-height
and
alphabetic
baselines
of the surrounding text
to align the
initial letter
ideographic
Use the
ideographic-ink-over
and
ideographic-ink-under
baselines
of the surrounding text
to align the
initial letter
hanging
Use the
hanging
and
alphabetic
baselines
of the surrounding text
to align the
initial letter
leading
Use the over/under half-leading edges
(i.e.
ascent
descent
half-leading
of the surrounding text
to align the
initial letter
Note:
This will essentially match the edges of the
initial letter
to middle of the line gap above/below the first/last impacted lines,
which is an effect sometimes used in certain types of
Indic typesetting
[ILREQ]
border-box
Use the
initial letter box
’s
line-under
and
line-over
border edges
as the
over
and
under
alignment points, respectively.
The vertical writing mode example earlier
(in
§ 7.1 An Introduction to Initial Letters
could be coded as:
span.initial {
initial-letter: 2;
initial-letter-align: ideographic;
Except when
border-box
is specified,
the alignment points of the
initial letter
are automatically determined from its contents:
If the
initial letter
is an atomic inline,
use its
over
and
under
content-box edges.
Else if the
initial letter
contains any character having the Han, Hangul, Kana, or Yi
Unicode script
property,
use the
ideographic-ink-over
and
ideographic-ink-under
baselines.
Else if the
initial letter
contains any character having the Han, Hangul, Kana, or Yi
Unicode script
property,
use the
hanging
and
alphabetic
baselines.
Else use the
cap-height
and
alphabetic
baselines.
Correct alignment of initial letter in scripts such as Hebrew and Thai
is currently not possible because OpenType lacks corresponding metrics.
Issue 5244
Note:
The ordering of keywords in this property is fixed in case
border-box
is expanded to
[ border-box | alphabetic | ideographic | hanging ]
to allow explicitly specifying the
initial letter
’s alignment points.
7.4.1.
UA Default Stylesheet for
initial-letter-align
In order to provide the better behavior by default,
UAs must include in their default UA style sheet the following rules:
[lang]:lang(zh, ja, ko, ii) {
initial-letter-align: ideographic;