10BC0 [css2] Make line-height:normal match implementations · w3c/csswg-drafts@b55a734 · GitHub
Skip to content

Commit b55a734

Browse files
frivoalfrivoal
committed
[css2] Make line-height:normal match implementations
Includes a "MAY" allowing UAs to use different font metrics for line-height:normal vs other values. This should be clarified later and turned into a MUST one way or the other to make sure all browsers agree, but for now it seems that at least Gecko may need this (See #1802 (comment)) Closes #1802
1 parent a3c7617 commit b55a734

3 files changed

Lines changed: 34 additions & 32 deletions

File tree

‎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>
< 8026 /div>

‎css2/visudet.html‎

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1435,6 +1435,16 @@ <h3>10.8.1 <a name="leading">Leading and half-leading</a></h3>
14351435

14361436
<p id="inline-box-height">Boxes of child elements do not influence this height.
14371437

1438+
<p>When the value of the <a href="" class="noxref"><span class="propinst-line-heigh">'line-height'</span></a> property
1439+
is 'normal',
1440+
the height of the inline box encloses all glyphs, going from the highest <var>A</var> to the deepest <var>D</var>.
1441+
1442+
<p>User Agents may use different sets of font metrics when determining <var>A</var> and <var>D</var>
1443+
depending on whether the <a href="" class="noxref"><span class="propinst-line-heigh">'line-height'</span></a> property
1444+
is 'normal' or some other value,
1445+
for instance taking external leading metrics into account
1446+
only in the 'normal' case.
1447+
14381448
<p>Although margins, borders, and padding of non-replaced elements do
14391449
not enter into the line box calculation, they are still rendered
14401450
around inline boxes. This means that if the height specified by <a href="visudet.html#propdef-line-height" class="noxref"><span
@@ -1494,29 +1504,25 @@ <h3>10.8.1 <a name="leading">Leading and half-leading</a></h3>
14941504

14951505
<dl>
14961506
<dt><strong>normal</strong> </dt>
1497-
<dd>Tells user agents to set the used
1498-
value to a "reasonable" value based on the font of the element. The
1499-
value has the same meaning as <span class="index-inst"
1500-
title="&lt;number&gt;" id="x18"><a href="syndata.html#value-def-number" class="noxref"><span
1501-
class="value-inst-number">&lt;number&gt;</span></a></span>. We recommend a
1502-
used value for 'normal' between 1.0 to 1.2. The <a
1503-
href="cascade.html#computed-value">computed value</a> is 'normal'.
1507+
<dd>Tells user agents to determine the height of the inline box
1508+
automatically based on font metrics.
1509+
See above for details.
15041510
</dd>
1505-
<dt><span class="index-inst" title="&lt;length&gt;" id="x19"><a href="syndata.html#value-def-length" class="noxref"><span
1511+
<dt><span class="index-inst" title="&lt;length&gt;" id="x18"><a href="syndata.html#value-def-length" class="noxref"><span
15061512
class="value-inst-length"><strong>&lt;length&gt;</strong></span></a></span>
15071513
</dt>
15081514
<dd>The specified length is used in the calculation of the line box
15091515
height. Negative values are illegal.
15101516
</dd>
1511-
<dt><span class="index-inst" title="&lt;number&gt;" id="x20"><a href="syndata.html#value-def-number" class="noxref"><span
1517+
<dt><span class="index-inst" title="&lt;number&gt;" id="x19"><a href="syndata.html#value-def-number" class="noxref"><span
15121518
class="value-inst-number"><strong>&lt;number&gt;</strong></span></a></span>
15131519
</dt>
15141520
<dd>The used value of the property is this number multiplied by the
15151521
element's font size. Negative values are illegal. The <a
15161522
href="cascade.html#computed-value">computed value</a> is the same as
15171523
the specified value.
15181524
</dd>
1519-
<dt><span class="index-inst" title="&lt;percentage&gt;" id="x21"><a href="syndata.html#value-def-percentage" class="noxref"><span
1525+
<dt><span class="index-inst" title="&lt;percentage&gt;" id="x20"><a href="syndata.html#value-def-percentage" class="noxref"><span
15201526
class="value-inst-percentage"><strong>&lt;percentage&gt;</strong></span></a></span>
15211527
</dt>
15221528
<dd>The <a href="cascade.html#computed-value">computed value</a> of the
@@ -1535,11 +1541,6 @@ <h3>10.8.1 <a name="leading">Leading and half-leading</a></h3>
15351541
</pre>
15361542
</div>
15371543

1538-
<p>When an element contains text that is rendered
1539-
in more than one font, user agents may determine the 'normal' <a href="visudet.html#propdef-line-height" class="noxref"><span
1540-
class="propinst-line-height">'line-height'</span></a> value according to
1541-
the largest font size.
1542-
</p>
15431544
<p class=note><em><strong>Note.</strong> When there is only one value of <a href="visudet.html#propdef-line-height" class="noxref"><span
15441545
class="propinst-line-height">'line-height'</span></a> (other than 'normal') for all inline
15451546
boxes in a block container box and they all use the same first available font (and
@@ -1609,14 +1610,14 @@ <h3>10.8.1 <a name="leading">Leading and half-leading</a></h3>
16091610
<dd>Align the bottom of the box with the bottom of the parent's
16101611
content area (see <a
16111612
href="#inline-non-replaced">10.6.1</a>).</dd>
1612-
<dt><span class="index-inst" title="&lt;percentage&gt;" id="x23"><a href="syndata.html#value-def-percentage" class="noxref"><span
1613+
<dt><span class="index-inst" title="&lt;percentage&gt;" id="x22"><a href="syndata.html#value-def-percentage" class="noxref"><span
16131614
class="value-inst-percentage"><strong>&lt;percentage&gt;
16141615
</strong></span></a></span></dt>
16151616
<dd>Raise (positive value) or lower (negative value) the box
16161617
by this distance (a percentage of the <a href="visudet.html#propdef-line-height" class="noxref"><span
16171618
class="propinst-line-height">'line-height'</span></a> value).
16181619
The value '0%' means the same as 'baseline'.</dd>
1619-
<dt><span class="index-inst" title="&lt;length&gt;" id="x24"><a href="syndata.html#value-def-length" class="noxref"><span
1620+
<dt><span class="index-inst" title="&lt;length&gt;" id="x23"><a href="syndata.html#value-def-length" class="noxref"><span
16201621
class="value-inst-length"><strong>&lt;length&gt;
16211622
</strong></span></a></span></dt>
16221623
<dd>Raise (positive value) or lower (negative value) the box

‎css2/visudet.src‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1339,6 +1339,16 @@ do not impact the height or baseline of the inline box.
13391339

13401340
<p id="inline-box-height">Boxes of child elements do not influence this height.
13411341

1342+
<p>When the value of the <span class="propinst-line-heigh">'line-height'</span> property
1343+
is 'normal',
1344+
the height of the inline box encloses all glyphs, going from the highest <var>A</var> to the deepest <var>D</var>.
1345+
1346+
<p>User Agents may use different sets of font metrics when determining <var>A</var> and <var>D</var>
1347+
depending on whether the <span class="propinst-line-heigh">'line-height'</span> property
1348+
is 'normal' or some other value,
1349+
for instance taking external leading metrics into account
1350+
only in the 'normal' case.
1351+
13421352
<p>Although margins, borders, and padding of non-replaced elements do
13431353
not enter into the line box calculation, they are still rendered
13441354
around inline boxes. This means that if the height specified by <span
@@ -1387,13 +1397,9 @@ height.
13871397

13881398
<dl>
13891399
<dt><strong>normal</strong> </dt>
1390-
<dd>Tells user agents to set the used
1391-
value to a "reasonable" value based on the font of the element. The
1392-
value has the same meaning as <span class="index-inst"
1393-
title="&lt;number&gt;"><span
1394-
class="value-inst-number">&lt;number&gt;</span></span>. We recommend a
1395-
used value for 'normal' between 1.0 to 1.2. The <a
1396-
href="cascade.html#computed-value">computed value</a> is 'normal'.
1400+
<dd>Tells user agents to determine the height of the inline box
1401+
automatically based on font metrics.
1402+
See above for details.
13971403
</dd>
13981404
<dt><span class="index-inst" title="&lt;length&gt;"><span
13991405
class="value-inst-length"><strong>&lt;length&gt;</strong></span></span>
@@ -1428,11 +1434,6 @@ div { line-height: 120%; font-size: 10pt } /* percentage */
14281434
</pre>
14291435
</div>
14301436

1431-
<p>When an element contains text that is rendered
1432-
in more than one font, user agents may determine the 'normal' <span
1433-
class="propinst-line-height">'line-height'</span> value according to
1434-
the largest font size.
1435-
</p>
14361437
<p class=note><em><strong>Note.</strong> When there is only one value of <span
14371438
class="propinst-line-height">'line-height'</span> (other than 'normal') for all inline
14381439
boxes in a block container box and they all use the same first available font (and

0 commit comments

Comments
 (0)
<