Skip to content

Commit 68da6a2

Browse files
committed
[css-inline-3] Editorial clean-up; fix integration of leading-trim/text-edge
1 parent 6e8aa64 commit 68da6a2

File tree

1 file changed

+38
-35
lines changed

1 file changed

+38
-35
lines changed

css-inline-3/Overview.bs

+38-35
Original file line numberDiff line numberDiff line change
@@ -940,11 +940,12 @@ Line Spacing: the 'line-height' property</h3>
940940
Animation type: by computed value type
941941
</pre>
942942

943-
This property specifies the <dfn>preferred line height</dfn>:
944-
the [=logical height=] of the [=inline box=]
945-
as used in the [[#line-layout|calculation of the line box height]].
943+
This property specifies the box’s <dfn>preferred line height</dfn>,
944+
which is used in calculating its “[=layout bounds=]”,
945+
i.e. its contribution to the [=logical height=] of its [=line box=].
946+
(See [[#inline-height]].)
946947

947-
Note: Because it inherits to the [=root inline box=]
948+
Note: Because it applies to the [=root inline box=]
948949
when specified on a [=block container=],
949950
'line-height' effectively establishes
950951
the minimum height of the block’s [=line boxes=].
@@ -956,11 +957,10 @@ Line Spacing: the 'line-height' property</h3>
956957
<dd>
957958
Determine the [=preferred line height=]
958959
automatically based on font metrics.
959-
See [[#inline-height]].
960960

961961
<dt><dfn><<length>></dfn>
962962
<dd>
963-
The specified length is used as the [=preferred line height=]
963+
The specified length is used as the [=preferred line height=].
964964
Negative values are illegal.
965965

966966
<dt><dfn><<number>></dfn>
@@ -978,9 +978,9 @@ Line Spacing: the 'line-height' property</h3>
978978
Negative values are illegal.
979979
</dl>
980980

981-
Note: Glyphs from fonts other than the [=first available font=]
982-
do not impact the [=layout bounds=] or [=baseline=] position
983-
of an [=inline box=] with a non-''line-height/normal'' 'line-height'.
981+
Note: Metrics from fonts other than the [=first available font=]
982+
only impact the [=layout bounds=]
983+
of an [=inline box=] with ''line-height: normal''.
984984

985985
<div class="example">
986986
The three rules in the example below have the same used line height:
@@ -1002,9 +1002,10 @@ Line Spacing: the 'line-height' property</h3>
10021002
See also <a href="https://github.com/w3c/csswg-drafts/issues/3118">Issue 3118</a>
10031003
and <a href="https://github.com/w3c/csswg-drafts/issues/2165">Issue 2165</a>.
10041004

1005-
Note: Although margins, borders, and padding of [=inline boxes=]
1006-
do not enter into the line height calculation,
1007-
they are still rendered around these boxes.
1005+
Note: When 'text-edge' is ''text-edge/leading'',
1006+
the margins, borders, and padding of [=inline boxes=]
1007+
do not affect the line box’s height calculation.
1008+
However, they are still rendered around these boxes.
10081009
This means that if the size specified by 'line-height'
10091010
is less than the size of the box,
10101011
backgrounds and borders can “bleed” into adjoining line boxes,
@@ -1024,7 +1025,6 @@ Inline Box Edge Metrics: the 'text-edge' property</h3>
10241025
Animation type: discrete
10251026
</pre>
10261027

1027-
10281028
ISSUE: This is an early draft of a proposal,
10291029
and might change significantly
10301030
as design critiques and use cases are registered
@@ -1035,13 +1035,14 @@ Inline Box Edge Metrics: the 'text-edge' property</h3>
10351035
are sized in the [=block axis=] based on their font metrics.
10361036
The 'text-edge' property controls which metrics are used.
10371037

1038-
This property defines which metric is used
1039-
as the basis for the [=over=] and [=under=] edges
1040-
of the [=layout bounds=] of the [=inline box=].
1041-
The 'leading-trim' property can be used
1038+
The chosen metrics are used as the basis
1039+
for the [=layout bounds=] of the [=inline box=]
1040+
(if it is not the [=root inline box=]).
1041+
The 'leading-trim' property can be used in conjunction
10421042
to match the [=content edges=] to these same metrics.
1043-
The first value specifies the <dfn>text over edge</dfn>;
1044-
the second value specifies the <dfn>text under edge</dfn>.
1043+
1044+
The first value specifies the text [=over=] edge;
1045+
the second value specifies the text [=under=] edge.
10451046
If only one value is specified,
10461047
both edges are assigned that same keyword if possible;
10471048
else ''text-edge/text'' is assumed as the missing value.
@@ -1054,7 +1055,7 @@ Inline Box Edge Metrics: the 'text-edge' property</h3>
10541055
caused by ascents above the specified metrics
10551056
(such as for diacritics),
10561057
so authors using these values need to be careful
1057-
to provide sufficient spacing above the line.
1058+
to provide sufficient spacing for the text.
10581059

10591060
Values have the following meanings:
10601061

@@ -1095,7 +1096,7 @@ Inline Box Edge Metrics: the 'text-edge' property</h3>
10951096
Unless 'text-edge' is ''text-edge/leading''--
10961097
in which case the box’s own 'line-height' is used to add spacing--
10971098
the box’s margin, padding, and border also contribute
1098-
to the size of the [=line box=].
1099+
to the [=layout bounds=].
10991100

11001101
<figure>
11011102
<img src="images/text-edge.png" width="480"
@@ -1163,14 +1164,14 @@ Calculating the Logical Height Contributions (“Layout Bounds”) of Inline Box
11631164
may also be incorporated into <var>A</var> and <var>D</var>
11641165
by adding half to each side as [=half-leading=].
11651166

1166-
When its computed 'line-height' is ''line-height/normal'',
1167+
<strong>When its computed 'line-height' is ''line-height/normal''</strong>,
11671168
the [=layout bounds=] of an inline box encloses all its glyphs,
11681169
going from the highest <var>A</var> to the deepest <var>D</var>.
11691170
(Note that glyphs in a single box
11701171
can come from different fonts
11711172
and thus might not all have the same <var>A</var> and <var>D</var>.)
11721173

1173-
When its computed 'line-height' is not ''line-height/normal'',
1174+
<strong>When its computed 'line-height' is not ''line-height/normal''</strong>,
11741175
its [=layout bounds=] are derived solely from
11751176
metrics of its [=first available font=]
11761177
(ignoring glyphs from other fonts),
@@ -1210,26 +1211,24 @@ Half-Leading Control: the 'leading-trim' property</h3>
12101211

12111212
To ensure consistent spacing in the basic case of running text,
12121213
CSS line layout introduces leading both above and below
1213-
the text content of each line.
1214+
the text content of each line
1215+
as needed to ensure its 'line-height'.
12141216
In addition, the ascent and descent font metrics themselves
1215-
include extra space above and below the most common glyph sizes
1217+
often include extra space above and below the most typical glyph shapes
12161218
in order to accommodate occasional characters and diacritics
1217-
which ascend or descend beyond the typical bounds.
1218-
This prevents subsequent lines of text from overlapping each other.
1219+
that ascend or descend beyond the typical bounds.
1220+
This prevents adjacent lines of text from overlapping each other.
12191221
However, all this extra spacing interferes with visual alignment
12201222
and with control over effective (visually-apparent) spacing.
12211223

1222-
The 'leading-trim' properties allow controlling the spacing above and below
1223-
the first and last lines of a block.
1224-
It allows precise control over spacing;
1225-
moreover, by relying on font metrics rather than hard-coded lengths,
1224+
The 'leading-trim' property allows trimming
1225+
this additional space above and below
1226+
the first and last lines of a block,
1227+
allowing more precise control over spacing around the glyphs.
1228+
Moreover, by relying on font metrics rather than hard-coded lengths,
12261229
it allows content to be resized, rewrapped, and rendered in a variety of fonts
12271230
while maintaining that spacing.
12281231

1229-
Note: Content and ink overflowing a box
1230-
due to non-initial values of 'leading-trim'
1231-
is handled the same as content that would overflow the box or line box otherwise.
1232-
12331232
<div class="example">
12341233
<!-- Example from Weston Thayer in https://github.com/w3c/csswg-drafts/issues/3240#issuecomment-432375650 -->
12351234

@@ -1323,6 +1322,10 @@ Half-Leading Control: the 'leading-trim' property</h3>
13231322
to the corresponding 'text-edge' metric
13241323
to better match the box’s [=content edge=] to its text content.
13251324

1325+
Note: Content and ink overflowing a box
1326+
due to non-initial values of 'leading-trim'
1327+
is handled the same as content that would overflow the box or line box otherwise.
1328+
13261329
This property has no effect when 'text-edge' is ''text-edge/leading''.
13271330

13281331
Values have the following meanings:

0 commit comments

Comments
 (0)