Skip to content

Commit 8d0ce56

Browse files
authored
Merge pull request w3c#1993 from frivoal/line-height-fixes
Line height fixes
2 parents b780748 + 71aaa7d commit 8d0ce56

File tree

6 files changed

+95
-93
lines changed

6 files changed

+95
-93
lines changed

css-fonts-3/Fonts.html

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3478,14 +3478,14 @@ <h3 id=font-style-matching><span class=secno>5.2. </span>Matching font
34783478
consistent as possible across user agents, given an identical set of
34793479
available fonts and rendering technology.
34803480

3481-
<p>The <dfn id=first-available-font>first available font</dfn>, used in the
3482-
definition of <a
3483-
href="https://www.w3.org/TR/css3-values/#font-relative-lengths"><em>font-relative
3484-
lengths</em></a> such as <code class=property>ex</code> and ‘<code
3485-
class=property>ch</code>’, is defined to be the first available font
3486-
that would match any character given font families in the ‘<code
3487-
class=property>font-family</code>’ list (or a user agent's default font
3488-
if none are available).
3481+
<p>The <dfn id=first-available-font>first available font</dfn>,
3482+
used for example in the definition of <a href="https://www.w3.org/TR/css3-values/#font-relative-lengths"><em>font-relative lengths</em></a>
3483+
such as ‘<code class=property>ex</code>’ and ‘<code class=property>ch</code>
3484+
or in the definition of the <a href="https://www.w3.org/TR/CSS2/visudet.html#propdef-line-height"><code class=property>line-height</code></a> property,
3485+
is defined to be the first available font
3486+
that would match the U+0020 (space) character
3487+
given font families in the ‘<code class=property>font-family</code>’ list
3488+
(or a user agent's default font if none are available).
34893489

34903490
<h3 id=cluster-matching><span class=secno>5.3. </span>Cluster matching</h3>
34913491

css-fonts-3/Fonts.src.html

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2566,11 +2566,14 @@ <h3 id="font-style-matching">Matching font styles</h3>
25662566
as consistent as possible across user agents, given an identical set
25672567
of available fonts and rendering technology.</p>
25682568

2569-
<p>The <dfn>first available font</dfn>, used in the definition of
2570-
<a href="https://www.w3.org/TR/css3-values/#font-relative-lengths"><em>font-relative lengths</em></a>
2571-
such as 'ex' and 'ch', is defined to be the first available font that
2572-
would match any character given font families in the 'font-family'
2573-
list (or a user agent's default font if none are available).</p>
2569+
<p>The <dfn>first available font</dfn>,
2570+
used for example in the definition of <a href="https://www.w3.org/TR/css3-values/#font-relative-lengths"><em>font-relative lengths</em></a>
2571+
such as 'ex' and 'ch'
2572+
or in the definition of the <a href="https://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">'line-height'</a> property,
2573+
is defined to be the first available font
2574+
that would match the U+0020 (space) character
2575+
given font families in the 'font-family' list
2576+
(or a user agent's default font if none are available).</p>
25742577

25752578
<h3 id="cluster-matching">Cluster matching</h3>
25762579

css-fonts-4/Overview.bs

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2610,9 +2610,10 @@ to ensure that the results are as consistent as possible across user agents,
26102610
given an identical set of available fonts and rendering technology.
26112611

26122612
The <dfn>first available font</dfn>,
2613-
used in the definition of <a>font-relative lengths</a> such as ''ex'' and ''ch'',
2613+
used for example in the definition of <a>font-relative lengths</a> such as ''ex'' and ''ch''
2614+
or in the definition of the 'line-height' property
26142615
is defined to be the first available font
2615-
that would match any character
2616+
that would match the U+0020 (space) character
26162617
given font families in the 'font-family' list
26172618
(or a user agent's default font if none are available).
26182619

css2/indexlist.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -370,7 +370,7 @@ <H1 id="q0">Appendix I. Index</H1>
370370
<li>definition of, <a href="visufx.html#value-def-left" title="&lt;left&gt;, definition of" class="index-def"><strong>1</strong></a>
371371
</ul>
372372
<li>'left', <a href="visuren.html#propdef-left" title="'left'" class="index-def"><strong>1</strong></a>
373-
<li>&lt;length&gt;, <a href="colors.html#x9" title="&lt;length&gt;" class="index-inst"><span>1</span></a>, <a href="text.html#x1" title="&lt;length&gt;" class="index-inst"><span>2</span></a>, <a href="text.html#x10" title="&lt;length&gt;" class="index-inst"><span>3</span></a>, <a href="text.html#x7" title="&lt;length&gt;" class="index-inst"><span>4</span></a>, <a href="visudet.html#x11" title="&lt;length&gt;" class="index-inst"><span>5</span></a>, <a href="visudet.html#x15" title="&lt;length&gt;" class="index-inst"><span>6</span></a>, <a href="visudet.html#x19" title="&lt;length&gt;" class="index-inst"><span>7</span></a>, <a href="visudet.html#x24" title="&lt;length&gt;" class="index-inst"><span>8</span></a>, <a href="visudet.html#x4" title="&lt;length&gt;" class="index-inst"><span>9</span></a>, <a href="visudet.html#x8" title="&lt;length&gt;" class="index-inst"><span>10</span></a>
373+
<li>&lt;length&gt;, <a href="colors.html#x9" title="&lt;length&gt;" class="index-inst"><span>1</span></a>, <a href="text.html#x1" title="&lt;length&gt;" class="index-inst"><span>2</span></a>, <a href="text.html#x10" title="&lt;length&gt;" class="index-inst"><span>3</span></a>, <a href="text.html#x7" title="&lt;length&gt;" class="index-inst"><span>4</span></a>, <a href="visudet.html#x11" title="&lt;length&gt;" class="index-inst"><span>5</span></a>, <a href="visudet.html#x15" title="&lt;length&gt;" class="index-inst"><span>6</span></a>, <a href="visudet.html#x18" title="&lt;length&gt;" class="index-inst"><span>7</span></a>, <a href="visudet.html#x23" title="&lt;length&gt;" class="index-inst"><span>8</span></a>, <a href="visudet.html#x24" title="&lt;length&gt;" class="index-inst"><span>9</span></a>, <a href="visudet.html#x4" title="&lt;length&gt;" class="index-inst"><span>10</span></a>, <a href="visudet.html#x8" title="&lt;length&gt;" class="index-inst"><span>11</span></a>
374374
<ul class="index">
375375
<li>definition of, <a href="syndata.html#value-def-length" title="&lt;length&gt;, definition of" class="index-def"><strong>1</strong></a>
376376
</ul>
@@ -435,7 +435,7 @@ <H1 id="q0">Appendix I. Index</H1>
435435
<li>as display value, <a href="visuren.html#x22" title="'none', as display value" class="index-def"><strong>1</strong></a>
436436
</ul>
437437
<li>normal, <a href="generate.html#x10" title="normal" class="index-inst"><span>1</span></a>
438-
<li>&lt;number&gt;, <a href="aural.html#x11" title="&lt;number&gt;" class="index-inst"><span>1</span></a>, <a href="aural.html#x32" title="&lt;number&gt;" class="index-inst"><span>2</span></a>, <a href="aural.html#x39" title="&lt;number&gt;" class="index-inst"><span>3</span></a>, <a href="aural.html#x4" title="&lt;number&gt;" class="index-inst"><span>4</span></a>, <a href="aural.html#x41" title="&lt;number&gt;" class="index-inst"><span>5</span></a>, <a href="aural.html#x43" title="&lt;number&gt;" class="index-inst"><span>6</span></a>, <a href="aural.html#x6" title="&lt;number&gt;" class="index-inst"><span>7</span></a>, <a href="aural.html#x8" title="&lt;number&gt;" class="index-inst"><span>8</span></a>, <a href="syndata.html#x43" title="&lt;number&gt;" class="index-inst"><span>9</span></a>, <a href="visudet.html#x18" title="&lt;number&gt;" class="index-inst"><span>10</span></a>, <a href="visudet.html#x20" title="&lt;number&gt;" class="index-inst"><span>11</span></a>
438+
<li>&lt;number&gt;, <a href="aural.html#x11" title="&lt;number&gt;" class="index-inst"><span>1</span></a>, <a href="aural.html#x32" title="&lt;number&gt;" class="index-inst"><span>2</span></a>, <a href="aural.html#x39" title="&lt;number&gt;" class="index-inst"><span>3</span></a>, <a href="aural.html#x4" title="&lt;number&gt;" class="index-inst"><span>4</span></a>, <a href="aural.html#x41" title="&lt;number&gt;" class="index-inst"><span>5</span></a>, <a href="aural.html#x43" title="&lt;number&gt;" class="index-inst"><span>6</span></a>, <a href="aural.html#x6" title="&lt;number&gt;" class="index-inst"><span>7</span></a>, <a href="aural.html#x8" title="&lt;number&gt;" class="index-inst"><span>8</span></a>, <a href="syndata.html#x43" title="&lt;number&gt;" class="index-inst"><span>9</span></a>, <a href="visudet.html#x19" title="&lt;number&gt;" class="index-inst"><span>10</span></a>
439439
<ul class="index">
440440
<li>definition of, <a href="syndata.html#value-def-number" title="&lt;number&gt;, definition of" class="index-def"><strong>1</strong></a>
441441
</ul>
@@ -485,7 +485,7 @@ <H1 id="q0">Appendix I. Index</H1>
485485
<li>'pause', <a href="aural.html#propdef-pause" title="'pause'" class="index-def"><strong>1</strong></a>
486486
<li>'pause-after', <a href="aural.html#propdef-pause-after" title="'pause-after'" class="index-def"><strong>1</strong></a>
487487
<li>'pause-before', <a href="aural.html#propdef-pause-before" title="'pause-before'" class="index-def"><strong>1</strong></a>
488-
<li>&lt;percentage&gt;, <a href="aural.html#x12" title="&lt;percentage&gt;" class="index-inst"><span>1</span></a>, <a href="aural.html#x17" title="&lt;percentage&gt;" class="index-inst"><span>2</span></a>, <a href="colors.html#x8" title="&lt;percentage&gt;" class="index-inst"><span>3</span></a>, <a href="text.html#x2" title="&lt;percentage&gt;" class="index-inst"><span>4</span></a>, <a href="visudet.html#x12" title="&lt;percentage&gt;" class="index-inst"><span>5</span></a>, <a href="visudet.html#x16" title="&lt;percentage&gt;" class="index-inst"><span>6</span></a>, <a href="visudet.html#x21" title="&lt;percentage&gt;" class="index-inst"><span>7</span></a>, <a href="visudet.html#x23" title="&lt;percentage&gt;" class="index-inst"><span>8</span></a>, <a href="visudet.html#x5" title="&lt;percentage&gt;" class="index-inst"><span>9</span></a>, <a href="visudet.html#x9" title="&lt;percentage&gt;" class="index-inst"><span>10</span></a>
488+
<li>&lt;percentage&gt;, <a href="aural.html#x12" title="&lt;percentage&gt;" class="index-inst"><span>1</span></a>, <a href="aural.html#x17" title="&lt;percentage&gt;" class="index-inst"><span>2</span></a>, <a href="colors.html#x8" title="&lt;percentage&gt;" class="index-inst"><span>3</span></a>, <a href="text.html#x2" title="&lt;percentage&gt;" class="index-inst"><span>4</span></a>, <a href="visudet.html#x12" title="&lt;percentage&gt;" class="index-inst"><span>5</span></a>, <a href="visudet.html#x16" title="&lt;percentage&gt;" class="index-inst"><span>6</span></a>, <a href="visudet.html#x20" title="&lt;percentage&gt;" class="index-inst"><span>7</span></a>, <a href="visudet.html#x22" title="&lt;percentage&gt;" class="index-inst"><span>8</span></a>, <a href="visudet.html#x5" title="&lt;percentage&gt;" class="index-inst"><span>9</span></a>, <a href="visudet.html#x9" title="&lt;percentage&gt;" class="index-inst"><span>10</span></a>
489489
<ul class="index">
490490
<li>definition of, <a href="syndata.html#value-def-percentage" title="&lt;percentage&gt;, definition of" class="index-def"><strong>1</strong></a>
491491
</ul>

css2/visudet.html

Lines changed: 39 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -971,12 +971,10 @@ <h3>10.6.1 <a name="inline-non-replaced">Inline, non-replaced elements</a></h3>
971971
<p>The <a href="visudet.html#propdef-height" class="noxref"><span class="propinst-height">'height'</span></a> property does not
972972
apply. The height of the content area should be based on the font, but
973973
this specification does not specify how. A UA may, e.g., use the
974-
em-box or the maximum ascender and descender of the font. (The latter
974+
the maximum ascender and descender of the font. (This
975975
would ensure that glyphs with parts above or below the em-box still
976976
fall within the content area, but leads to differently sized boxes for
977-
different fonts; the former would ensure authors can control
978-
background styling relative to the 'line-height', but leads to glyphs
979-
painting outside their content area.)
977+
different fonts.)
980978
</p>
981979
<p class=note>Note: level 3 of CSS will probably include a property to
982980
select which measure of the font is used for the content height.
@@ -989,14 +987,10 @@ <h3>10.6.1 <a name="inline-non-replaced">Inline, non-replaced elements</a></h3>
989987
the height of the line box.
990988
</p>
991989
<p><a name="multi-font-inline-height"></a> If more than one font is
992-
used (this could happen when glyphs are found in different fonts), the
993-
height of the content area is not defined by this specification.
994-
However, we suggest that the height is chosen such that the content
995-
area is just high enough for either (1) the em-boxes, or (2) the
996-
maximum ascenders and descenders, of <em>all</em> the fonts in the
997-
element. Note that this may be larger than any of the font sizes
998-
involved, depending on the baseline alignment of the fonts.
999-
</p>
990+
used (this could happen when glyphs are found in different fonts),
991+
the height of the content area is not affected
992+
by the glyphs from the fallback fonts,
993+
and only depends on the first available font.</p>
1000994

1001995
<h3>10.6.2 <a name="inline-replaced-height">Inline replaced elements</a>,
1002996
block-level replaced elements in normal flow, 'inline-block' replaced
@@ -1415,24 +1409,38 @@ <h3>10.8.1 <a name="leading">Leading and half-leading</a></h3>
14151409
each glyph, determine the <var>A</var> and <var>D</var>. Note that
14161410
glyphs in a single element may come from different fonts and thus need
14171411
not all have the same <var>A</var> and <var>D</var>. If the inline box
1418-
contains no glyphs at all, it is considered to contain a <a
1412+
contains no glyphs at all,
1413+
or if it contains only glyphs from fallback fonts,
1414+
it is considered to contain a <a
14191415
href="#strut">strut</a> (an invisible glyph of zero width) with the
14201416
<var>A</var> and <var>D</var> of the element's first available font.
14211417

1422-
<p>Still for each glyph, determine the leading <var>L</var> to add,
1418+
<p id="inline-box-height">When the value of the <a href="" class="noxref"><span class="propinst-line-heigh">'line-height'</span></a> property
1419+
is something other than 'normal',
1420+
determine the leading <var>L</var> to add,
14231421
where <var>L</var> = <a href="visudet.html#propdef-line-height" class="noxref"><span
1424-
class="propinst-line-height">'line-height'</span></a> - <var>AD</var>. Half
1425-
the leading is added above <var>A</var> and the other half below
1426-
<var>D</var>, giving the glyph and its leading a total height above
1422+
class="propinst-line-height">'line-height'</span></a> - <var>AD</var> of the first available font.
1423+
Half the leading is added above <var>A</var> of the first available font, and the other half below
1424+
<var>D</var> of the first available font, giving a total height above
14271425
the baseline of <var>A'</var> = <var>A</var> + <var>L</var>/2 and a
14281426
total depth of <var>D'</var> = <var>D</var> + <var>L</var>/2.
1427+
Glyphs from fonts other than the first available font
1428+
do not impact the height or baseline of the inline box
1429+
for <a href="" class="noxref"><span class="propinst-line-heigh">'line-height'</span></a> values other than 'normal'.
14291430

14301431
<p class=note><strong>Note.</strong> <var>L</var> may be negative.
14311432

1432-
<p id="inline-box-height">The height of the inline box encloses all
1433-
glyphs and their half-leading on each side and is thus exactly
1434-
'line-height'. Boxes of
1435-
child elements do not influence this height.
1433+
<p>Boxes of child elements do not influence this height.
1434+
1435+
<p>When the value of the <a href="" class="noxref"><span class="propinst-line-heigh">'line-height'</span></a> property
1436+
is 'normal',
1437+
the height of the inline box encloses all glyphs, going from the highest <var>A</var> to the deepest <var>D</var>.
1438+
1439+
<p>User Agents may use different sets of font metrics when determining <var>A</var> and <var>D</var>
1440+
depending on whether the <a href="" class="noxref"><span class="propinst-line-heigh">'line-height'</span></a> property
1441+
is 'normal' or some other value,
1442+
for instance taking external leading metrics into account
1443+
only in the 'normal' case.
14361444

14371445
<p>Although margins, borders, and padding of non-replaced elements do
14381446
not enter into the line box calculation, they are still rendered
@@ -1493,29 +1501,25 @@ <h3>10.8.1 <a name="leading">Leading and half-leading</a></h3>
14931501

14941502
<dl>
14951503
<dt><strong>normal</strong> </dt>
1496-
<dd>Tells user agents to set the used
1497-
value to a "reasonable" value based on the font of the element. The
1498-
value has the same meaning as <span class="index-inst"
1499-
title="&lt;number&gt;" id="x18"><a href="syndata.html#value-def-number" class="noxref"><span
1500-
class="value-inst-number">&lt;number&gt;</span></a></span>. We recommend a
1501-
used value for 'normal' between 1.0 to 1.2. The <a
1502-
href="cascade.html#computed-value">computed value</a> is 'normal'.
1504+
<dd>Tells user agents to determine the height of the inline box
1505+
automatically based on font metrics.
1506+
See above for details.
15031507
</dd>
1504-
<dt><span class="index-inst" title="&lt;length&gt;" id="x19"><a href="syndata.html#value-def-length" class="noxref"><span
1508+
<dt><span class="index-inst" title="&lt;length&gt;" id="x18"><a href="syndata.html#value-def-length" class="noxref"><span
15051509
class="value-inst-length"><strong>&lt;length&gt;</strong></span></a></span>
15061510
</dt>
15071511
<dd>The specified length is used in the calculation of the line box
15081512
height. Negative values are illegal.
15091513
</dd>
1510-
<dt><span class="index-inst" title="&lt;number&gt;" id="x20"><a href="syndata.html#value-def-number" class="noxref"><span
1514+
<dt><span class="index-inst" title="&lt;number&gt;" id="x19"><a href="syndata.html#value-def-number" class="noxref"><span
15111515
class="value-inst-number"><strong>&lt;number&gt;</strong></span></a></span>
15121516
</dt>
15131517
<dd>The used value of the property is this number multiplied by the
15141518
element's font size. Negative values are illegal. The <a
15151519
href="cascade.html#computed-value">computed value</a> is the same as
15161520
the specified value.
15171521
</dd>
1518-
<dt><span class="index-inst" title="&lt;percentage&gt;" id="x21"><a href="syndata.html#value-def-percentage" class="noxref"><span
1522+
<dt><span class="index-inst" title="&lt;percentage&gt;" id="x20"><a href="syndata.html#value-def-percentage" class="noxref"><span
15191523
class="value-inst-percentage"><strong>&lt;percentage&gt;</strong></span></a></span>
15201524
</dt>
15211525
<dd>The <a href="cascade.html#computed-value">computed value</a> of the
@@ -1534,14 +1538,9 @@ <h3>10.8.1 <a name="leading">Leading and half-leading</a></h3>
15341538
</pre>
15351539
</div>
15361540

1537-
<p>When an element contains text that is rendered
1538-
in more than one font, user agents may determine the 'normal' <a href="visudet.html#propdef-line-height" class="noxref"><span
1539-
class="propinst-line-height">'line-height'</span></a> value according to
1540-
the largest font size.
1541-
</p>
15421541
<p class=note><em><strong>Note.</strong> When there is only one value of <a href="visudet.html#propdef-line-height" class="noxref"><span
1543-
class="propinst-line-height">'line-height'</span></a> for all inline
1544-
boxes in a block container box and they are all in the same font (and
1542+
class="propinst-line-height">'line-height'</span></a> (other than 'normal') for all inline
1543+
boxes in a block container box and they all use the same first available font (and
15451544
there are no replaced elements, inline-block
15461545
elements, etc.), the above will ensure that
15471546
baselines of successive lines are exactly <a href="visudet.html#propdef-line-height" class="noxref"><span
@@ -1608,14 +1607,14 @@ <h3>10.8.1 <a name="leading">Leading and half-leading</a></h3>
16081607
<dd>Align the bottom of the box with the bottom of the parent's
16091608
content area (see <a
16101609
href="#inline-non-replaced">10.6.1</a>).</dd>
1611-
<dt><span class="index-inst" title="&lt;percentage&gt;" id="x23"><a href="syndata.html#value-def-percentage" class="noxref"><span
1610+
<dt><span class="index-inst" title="&lt;percentage&gt;" id="x22"><a href="syndata.html#value-def-percentage" class="noxref"><span
16121611
class="value-inst-percentage"><strong>&lt;percentage&gt;
16131612
</strong></span></a></span></dt>
16141613
<dd>Raise (positive value) or lower (negative value) the box
16151614
by this distance (a percentage of the <a href="visudet.html#propdef-line-height" class="noxref"><span
16161615
class="propinst-line-height">'line-height'</span></a> value).
16171616
The value '0%' means the same as 'baseline'.</dd>
1618-
<dt><span class="index-inst" title="&lt;length&gt;" id="x24"><a href="syndata.html#value-def-length" class="noxref"><span
1617+
<dt><span class="index-inst" title="&lt;length&gt;" id="x23"><a href="syndata.html#value-def-length" class="noxref"><span
16191618
class="value-inst-length"><strong>&lt;length&gt;
16201619
</strong></span></a></span></dt>
16211620
<dd>Raise (positive value) or lower (negative value) the box

0 commit comments

Comments
 (0)