@@ -940,11 +940,12 @@ Line Spacing: the 'line-height' property</h3>
940
940
Animation type : by computed value type
941
941
</pre>
942
942
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]] .)
946
947
947
- Note: Because it inherits to the [=root inline box=]
948
+ Note: Because it applies to the [=root inline box=]
948
949
when specified on a [=block container=] ,
949
950
'line-height' effectively establishes
950
951
the minimum height of the block’s [=line boxes=] .
@@ -956,11 +957,10 @@ Line Spacing: the 'line-height' property</h3>
956
957
<dd>
957
958
Determine the [=preferred line height=]
958
959
automatically based on font metrics.
959
- See [[#inline-height]] .
960
960
961
961
<dt> <dfn><<length>></dfn>
962
962
<dd>
963
- The specified length is used as the [=preferred line height=]
963
+ The specified length is used as the [=preferred line height=] .
964
964
Negative values are illegal.
965
965
966
966
<dt> <dfn><<number>></dfn>
@@ -978,9 +978,9 @@ Line Spacing: the 'line-height' property</h3>
978
978
Negative values are illegal.
979
979
</dl>
980
980
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'' .
984
984
985
985
<div class="example">
986
986
The three rules in the example below have the same used line height:
@@ -1002,9 +1002,10 @@ Line Spacing: the 'line-height' property</h3>
1002
1002
See also <a href="https://github.com/w3c/csswg-drafts/issues/3118">Issue 3118</a>
1003
1003
and <a href="https://github.com/w3c/csswg-drafts/issues/2165">Issue 2165</a> .
1004
1004
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.
1008
1009
This means that if the size specified by 'line-height'
1009
1010
is less than the size of the box,
1010
1011
backgrounds and borders can “bleed” into adjoining line boxes,
@@ -1024,7 +1025,6 @@ Inline Box Edge Metrics: the 'text-edge' property</h3>
1024
1025
Animation type : discrete
1025
1026
</pre>
1026
1027
1027
-
1028
1028
ISSUE: This is an early draft of a proposal,
1029
1029
and might change significantly
1030
1030
as design critiques and use cases are registered
@@ -1035,13 +1035,14 @@ Inline Box Edge Metrics: the 'text-edge' property</h3>
1035
1035
are sized in the [=block axis=] based on their font metrics.
1036
1036
The 'text-edge' property controls which metrics are used.
1037
1037
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
1042
1042
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.
1045
1046
If only one value is specified,
1046
1047
both edges are assigned that same keyword if possible;
1047
1048
else ''text-edge/text'' is assumed as the missing value.
@@ -1054,7 +1055,7 @@ Inline Box Edge Metrics: the 'text-edge' property</h3>
1054
1055
caused by ascents above the specified metrics
1055
1056
(such as for diacritics),
1056
1057
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 .
1058
1059
1059
1060
Values have the following meanings:
1060
1061
@@ -1095,7 +1096,7 @@ Inline Box Edge Metrics: the 'text-edge' property</h3>
1095
1096
Unless 'text-edge' is ''text-edge/leading'' --
1096
1097
in which case the box’s own 'line-height' is used to add spacing--
1097
1098
the box’s margin, padding, and border also contribute
1098
- to the size of the [=line box =] .
1099
+ to the [=layout bounds =] .
1099
1100
1100
1101
<figure>
1101
1102
<img src="images/text-edge.png" width="480"
@@ -1163,14 +1164,14 @@ Calculating the Logical Height Contributions (“Layout Bounds”) of Inline Box
1163
1164
may also be incorporated into <var> A</var> and <var> D</var>
1164
1165
by adding half to each side as [=half-leading=] .
1165
1166
1166
- When its computed 'line-height' is ''line-height/normal'' ,
1167
+ <strong> When its computed 'line-height' is ''line-height/normal'' </strong> ,
1167
1168
the [=layout bounds=] of an inline box encloses all its glyphs,
1168
1169
going from the highest <var> A</var> to the deepest <var> D</var> .
1169
1170
(Note that glyphs in a single box
1170
1171
can come from different fonts
1171
1172
and thus might not all have the same <var> A</var> and <var> D</var> .)
1172
1173
1173
- When its computed 'line-height' is not ''line-height/normal'' ,
1174
+ <strong> When its computed 'line-height' is not ''line-height/normal'' </strong> ,
1174
1175
its [=layout bounds=] are derived solely from
1175
1176
metrics of its [=first available font=]
1176
1177
(ignoring glyphs from other fonts),
@@ -1210,26 +1211,24 @@ Half-Leading Control: the 'leading-trim' property</h3>
1210
1211
1211
1212
To ensure consistent spacing in the basic case of running text,
1212
1213
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' .
1214
1216
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
1216
1218
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.
1219
1221
However, all this extra spacing interferes with visual alignment
1220
1222
and with control over effective (visually-apparent) spacing.
1221
1223
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,
1226
1229
it allows content to be resized, rewrapped, and rendered in a variety of fonts
1227
1230
while maintaining that spacing.
1228
1231
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
-
1233
1232
<div class="example">
1234
1233
<!-- Example from Weston Thayer in https://github.com/w3c/csswg-drafts/issues/3240#issuecomment-432375650 -->
1235
1234
@@ -1323,6 +1322,10 @@ Half-Leading Control: the 'leading-trim' property</h3>
1323
1322
to the corresponding 'text-edge' metric
1324
1323
to better match the box’s [=content edge=] to its text content.
1325
1324
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
+
1326
1329
This property has no effect when 'text-edge' is ''text-edge/leading'' .
1327
1330
1328
1331
Values have the following meanings:
0 commit comments