Skip to content

Commit 54b2c2a

Browse files
frivoalfrivoal
committed
[css-inline-3] bikeshed the text imported from css2 section 10.8
1 parent b302253 commit 54b2c2a

File tree

1 file changed

+175
-185
lines changed

1 file changed

+175
-185
lines changed

‎css-inline-3/Overview.bs

+175-185
Original file line numberDiff line numberDiff line change
@@ -340,6 +340,116 @@ Alignment Shift: the 'baseline-shift' longhand</h4>
340340
<h3 id="line-height-property">
341341
Line Spacing: the 'line-height' property</h3>
342342

343+
344+
As described in the section on <a href="https://www.w3.org/TR/CSS2/visuren.html#inline-formatting">inline formatting contexts</a> [[CSS2/visuren.html#inline-formatting]],
345+
user agents flow inline-level boxes into a vertical stack of [=line boxes=].
346+
The height of a line box is determined as follows:
347+
348+
<ol>
349+
<li>
350+
The height of each [=inline-level box=] in the line box is calculated.
351+
For replaced elements, inline-block elements, and inline-table elements,
352+
this is the height of their [=margin box=];
353+
for [=inline boxes=], this is their 'line-height'.
354+
355+
<li>
356+
The inline-level boxes are aligned vertically
357+
according to their 'vertical-align' property.
358+
359+
In case they are aligned ''top'' or ''bottom'',
360+
they must be aligned so as to minimize the line box height.
361+
If such boxes are tall enough,
362+
there are multiple solutions
363+
and CSS&nbsp;2 does not define the position of the line box's baseline
364+
(i.e., the position of the [=strut=]).
365+
366+
<li>
367+
The line box height is the distance between
368+
the uppermost box top and the lowermost box bottom.
369+
(This includes the [=strut=],
370+
as explained under 'line-height' below.)
371+
</ol>
372+
373+
Empty inline elements generate empty inline boxes,
374+
but these boxes still have margins, padding, borders, and a line height,
375+
and thus influence these calculations just like elements with content.
376+
377+
<h4 id="leading">Leading and half-leading</h4>
378+
379+
CSS assumes that every font has font metrics
380+
that specify a characteristic height above the baseline and a depth below it.
381+
In this section we use <var>A</var> to mean that height
382+
(for a given font at a given size)
383+
and <var>D</var> the depth.
384+
We also define <var>AD</var> = <var>A</var> + <var>D</var>,
385+
the distance from the top to the bottom.
386+
(See the note below for <a href="#sTypoAscender">how to find <var>A</var> and <var>D</var> for TrueType and OpenType fonts.</a>)
387+
Note that these are metrics of the font as a whole
388+
and need not correspond to the ascender and descender of any individual glyph.
389+
390+
The User Agent must align the glyphs in a non-replaced inline box
391+
to each other by their relevant baselines.
392+
Then, for each glyph,
393+
determine the <var>A</var> and <var>D</var>.
394+
Note that glyphs in a single element
395+
may come from different fonts
396+
and thus need not all have the same <var>A</var> and <var>D</var>.
397+
If the inline box contains no glyphs at all,
398+
or if it contains only glyphs from fallback fonts,
399+
it is considered to contain a [=strut=] (an invisible glyph of zero width)
400+
with the <var>A</var> and <var>D</var> of the element's first available font.
401+
402+
<p id="inline-box-height">When the value of the 'line-height' property
403+
is something other than ''line-height/normal'',
404+
determine the leading <var>L</var> to add,
405+
where <var>L</var> = 'line-height' - <var>AD</var> of the first available font.
406+
Half the leading is added above <var>A</var> of the first available font,
407+
and the other half below <var>D</var> of the first available font,
408+
giving a total height above the baseline of
409+
<var>A'</var> = <var>A</var> + <var>L</var>/2,
410+
and a total depth of <var>D'</var> = <var>D</var> + <var>L</var>/2.
411+
Glyphs from fonts other than the first available font
412+
do not impact the height or baseline of the inline box
413+
for 'line-height' values other than ''line-height/normal''.
414+
415+
Note: <var>L</var> may be negative.
416+
417+
Boxes of child elements do not influence this height.
418+
419+
When the value of the 'line-height' property is ''line-height/normal'',
420+
the height of the inline box encloses all glyphs,
421+
going from the highest <var>A</var> to the deepest <var>D</var>.
422+
423+
User Agents may use different sets of font metrics
424+
when determining <var>A</var> and <var>D</var>
425+
depending on whether the 'line-height' property is
426+
''line-height/normal'' or some other value,
427+
for instance taking external leading metrics into account
428+
only in the ''line-height/normal'' case.
429+
430+
Although margins, borders, and padding of non-replaced elements
431+
do not enter into the line box calculation,
432+
they are still rendered around inline boxes.
433+
This means that if the height specified by 'line-height'
434+
is less than the content height of contained boxes,
435+
backgrounds and colors of padding and borders may "bleed" into adjoining line boxes.
436+
User agents should render the boxes in document order.
437+
This will cause the borders on subsequent lines
438+
to paint over the borders and text of previous lines.
439+
440+
Note: CSS&nbsp;2 does not define what the content area of an inline box is
441+
(see [[#line-fill]])
442+
and thus different UAs may draw the backgrounds and borders in different places.
443+
444+
<p class=note id=sTypoAscender>Note: It is recommended that
445+
implementations that use OpenType or TrueType fonts
446+
use the metrics <code>sTypoAscender</code> and <code>sTypoDescender</code>
447+
from the font's OS/2 table
448+
for <var>A</var> and <var>D</var>
449+
(after scaling to the current element's font size).
450+
In the absence of these metrics,
451+
the "Ascent" and "Descent" metrics from the HHEA table should be used.
452+
343453
<pre class="propdef">
344454
Name: line-height
345455
Value: normal | <<number>> || <<length-percentage>>
@@ -350,191 +460,71 @@ Line Spacing: the 'line-height' property</h3>
350460
Computed value: the specified keyword, a number, or a computed <<length>> value
351461
</pre>
352462

353-
<p>As described in the section on <a
354-
href="visuren.html#inline-formatting">inline formatting contexts</a>,
355-
user agents flow inline-level boxes into a vertical stack of <a
356-
href="visuren.html#line-box">line boxes</a>. The height of a line box
357-
is determined as follows:</p>
358-
359-
<ol>
360-
<li>The height of each inline-level box in the line box is calculated.
361-
<!-- Issue 181 -->
362-
For replaced elements, inline-block elements, and inline-table
363-
elements, this is the height of their margin box; for inline boxes,
364-
this is their 'line-height'.
365-
<!-- /Issue 181 -->
366-
(See <a href="#Computing_heights_and_margins">"Calculating heights and
367-
margins"</a> and the <a href="#inline-box-height">height of inline
368-
boxes</a> in <a href="#leading">"Leading and half-leading"</a>.)
369-
370-
</li>
371-
<li>The inline-level boxes are aligned vertically according
372-
to their <span class="propinst-vertical-align">'vertical-align'</span>
373-
property.
374-
375-
In case they are aligned 'top' or 'bottom', they must be aligned so as
376-
to minimize the line box height. If such boxes are tall enough, there
377-
are multiple solutions and CSS&nbsp;2 does not define the position
378-
of the line box's baseline (i.e., the position of the <a
379-
href="#strut">strut, see below</a>).
380-
</li>
381-
<li>The line box height is the distance between the uppermost
382-
box top and the lowermost box bottom. (This includes the <a
383-
href="#strut">strut,</a> as explained under <span
384-
class="propinst-line-height">'line-height'</span> below.)
385-
</li>
386-
</ol>
387-
388-
<p>Empty inline elements generate empty inline boxes, but these boxes
389-
still have margins, padding, borders and a line height, and thus
390-
influence these calculations just like elements with content.
391-
</p>
392-
393-
<h3><a name="leading">Leading and half-leading</a></h3>
394-
395-
<p>CSS assumes that every font has font metrics that specify a
396-
characteristic height above the baseline and a depth below it. In this
397-
section we use <var>A</var> to mean that height (for a given font at a
398-
given size) and <var>D</var> the depth. We also define <var>AD</var> =
399-
<var>A</var> + <var>D</var>, the distance from the top to the
400-
bottom. (See the note below for <a href="#sTypoAscender">how to find
401-
<var>A</var> and <var>D</var> for TrueType and OpenType fonts.</a>)
402-
Note that these are metrics of the font as a whole and need not
403-
correspond to the ascender and descender of any individual glyph.
404-
405-
<p>User agent must align the glyphs in a non-replaced inline box to
406-
each other by their relevant baselines. Then, for
407-
each glyph, determine the <var>A</var> and <var>D</var>. Note that
408-
glyphs in a single element may come from different fonts and thus need
409-
not all have the same <var>A</var> and <var>D</var>. If the inline box
410-
contains no glyphs at all,
411-
or if it contains only glyphs from fallback fonts,
412-
it is considered to contain a <a
413-
href="#strut">strut</a> (an invisible glyph of zero width) with the
414-
<var>A</var> and <var>D</var> of the element's first available font.
415-
416-
<p id="inline-box-height">When the value of the <span class="propinst-line-heigh">'line-height'</span> property
417-
is something other than 'normal',
418-
determine the leading <var>L</var> to add,
419-
where <var>L</var> = <span
420-
class="propinst-line-height">'line-height'</span> - <var>AD</var> of the first available font.
421-
Half the leading is added above <var>A</var> of the first available font, and the other half below
422-
<var>D</var> of the first available font, giving a total height above
423-
the baseline of <var>A'</var> = <var>A</var> + <var>L</var>/2 and a
424-
total depth of <var>D'</var> = <var>D</var> + <var>L</var>/2.
425-
Glyphs from fonts other than the first available font
426-
do not impact the height or baseline of the inline box
427-
for <span class="propinst-line-heigh">'line-height'</span> values other than 'normal'.
428-
429-
<p class=note><strong>Note.</strong> <var>L</var> may be negative.
430-
431-
<p>Boxes of child elements do not influence this height.
432-
433-
<p>When the value of the <span class="propinst-line-heigh">'line-height'</span> property
434-
is 'normal',
435-
the height of the inline box encloses all glyphs, going from the highest <var>A</var> to the deepest <var>D</var>.
436-
437-
<p>User Agents may use different sets of font metrics when determining <var>A</var> and <var>D</var>
438-
depending on whether the <span class="propinst-line-heigh">'line-height'</span> property
439-
is 'normal' or some other value,
440-
for instance taking external leading metrics into account
441-
only in the 'normal' case.
442-
443-
<p>Although margins, borders, and padding of non-replaced elements do
444-
not enter into the line box calculation, they are still rendered
445-
around inline boxes. This means that if the height specified by <span
446-
class="propinst-line-height">'line-height'</span> is less than the
447-
content height of contained boxes, backgrounds and colors of padding
448-
and borders may "bleed" into adjoining line boxes. User agents should
449-
render the boxes in document order. This will cause the borders on
450-
subsequent lines to paint over the borders and text of previous lines.
451-
</p>
452-
453-
<p class=note><em><strong>Note.</strong> CSS&nbsp;2 does not define
454-
what the content area of an inline box is (see <a
455-
href="#inline-non-replaced">10.6.1</a> above) and thus different UAs
456-
may draw the backgrounds and borders in different places.</em>
457-
458-
<p id=sTypoAscender class=note><em><strong>Note.</strong> It is
459-
recommended that implementations that use OpenType or TrueType fonts
460-
use the metrics "sTypoAscender" and "sTypoDescender" from the font's
461-
OS/2 table for A and D (after scaling to the current element's font
462-
size). In the absence of these metrics, the "Ascent" and "Descent"
463-
metrics from the HHEA table should be used.</em>
464-
465-
<!-- #include src=properties/line-height.srb -->
466-
467-
<p>On a <a href="visuren.html#block-boxes">block container element</a>
468-
whose content
469-
is composed of <a href="visuren.html#inline-level">inline-level</a>
470-
elements, 'line-height' specifies the <em>minimal</em> height of line boxes
471-
within the element. The minimum height consists of a minimum height above
472-
the baseline and a minimum depth below it, exactly as if each
473-
line box starts with a <a name="strut">zero-width inline box with the
474-
element's font and line height properties.</a> We call that imaginary
475-
box a "strut." (The name is inspired by TeX.).
476-
</p>
477-
478-
<p>The height and depth of the font above and below the baseline are
479-
assumed to be metrics that are contained in the font. (For more
480-
details, see CSS level&nbsp;3.)
481-
482-
<p>On a non-replaced <a
483-
href="visuren.html#inline-boxes">inline</a> element, 'line-height'
484-
specifies the height that is used in the calculation of the line box
485-
height.
486-
</p>
487-
<p>Values for this property have the following meanings:</p>
488-
489-
<dl>
490-
<dt><strong>normal</strong> </dt>
491-
<dd>Tells user agents to determine the height of the inline box
492-
automatically based on font metrics.
493-
See above for details.
494-
</dd>
495-
<dt><span class="index-inst" title="&lt;length&gt;"><span
496-
class="value-inst-length"><strong>&lt;length&gt;</strong></span></span>
497-
</dt>
498-
<dd>The specified length is used in the calculation of the line box
499-
height. Negative values are illegal.
500-
</dd>
501-
<dt><span class="index-inst" title="&lt;number&gt;"><span
502-
class="value-inst-number"><strong>&lt;number&gt;</strong></span></span>
503-
</dt>
504-
<dd>The used value of the property is this number multiplied by the
505-
element's font size. Negative values are illegal. The <a
506-
href="cascade.html#computed-value">computed value</a> is the same as
507-
the specified value.
508-
</dd>
509-
<dt><span class="index-inst" title="&lt;percentage&gt;"><span
510-
class="value-inst-percentage"><strong>&lt;percentage&gt;</strong></span></span>
511-
</dt>
512-
<dd>The <a href="cascade.html#computed-value">computed value</a> of the
513-
property is this percentage multiplied by the element's
514-
computed font size. Negative values are illegal.
515-
</dd>
516-
</dl>
517-
518-
<div class="example"><p>
519-
The three rules in the example below have the same resultant line height:
520-
</p>
521-
<pre>
522-
div { line-height: 1.2; font-size: 10pt } /* number */
523-
div { line-height: 1.2em; font-size: 10pt } /* length */
524-
div { line-height: 120%; font-size: 10pt } /* percentage */
525-
</pre>
526-
</div>
527-
528-
<p class=note><em><strong>Note.</strong> When there is only one value of <span
529-
class="propinst-line-height">'line-height'</span> (other than 'normal') for all inline
530-
boxes in a block container box and they all use the same first available font (and
531-
there are no replaced elements, inline-block
532-
elements, etc.), the above will ensure that
533-
baselines of successive lines are exactly <span
534-
class="propinst-line-height">'line-height'</span> apart. This is
535-
important when columns of text in different fonts have to be aligned,
536-
for example in a table.</em>
537-
</p>
463+
On a [=block container=] whose content is composed of [=inline-level boxes=],
464+
'line-height' specifies the <em>minimal</em> height of line boxes within the element.
465+
The minimum height consists of
466+
a minimum height above the baseline
467+
and a minimum depth below it,
468+
exactly as if each line box starts with a zero-width inline box
469+
with the element's font and line height properties.
470+
We call that imaginary box a <dfn>strut</dfn>.
471+
(The name is inspired by TeX.).
472+
473+
The height and depth of the font
474+
above and below the baseline
475+
are assumed to be metrics that are contained in the font.
476+
477+
On a non-replaced [=inline box=],
478+
'line-height' specifies the height that is used
479+
in the calculation of the [=line box=] height.
480+
481+
Values for this property have the following meanings:
482+
483+
<dl dfn-for=line-height dfn-type=value>
484+
<dt><dfn>normal</dfn>
485+
<dd>
486+
Tells user agents to determine the height of the inline box automatically
487+
based on font metrics.
488+
See above for details.
489+
490+
<dt><dfn><<length>></dfn>
491+
<dd>
492+
The specified length is used in the calculation of the line box height.
493+
Negative values are illegal.
494+
495+
<dt><dfn><<number>></dfn>
496+
<dd>
497+
The used value of the property is this number
498+
multiplied by the element's font size.
499+
Negative values are illegal.
500+
The [=computed value=] is the same as the [=specified value=].
501+
502+
<dt><dfn><<percentage>></dfn>
503+
<dd>
504+
The [=computed value=] of the property
505+
is this percentage multiplied by the element's computed 'font-size'.
506+
Negative values are illegal.
507+
</dl>
508+
509+
<div class="example">
510+
The three rules in the example below have the same resultant line height:
511+
512+
<pre><code highlight=css>
513+
div { line-height: 1.2; font-size: 10pt } /* number */
514+
div { line-height: 1.2em; font-size: 10pt } /* length */
515+
div { line-height: 120%; font-size: 10pt } /* percentage */
516+
</code></pre>
517+
</div>
518+
519+
Note: When there is only one value of 'line-height'
520+
(other than 'normal')
521+
for all inline boxes in a block container box
522+
and they all use the same first available font
523+
(and there are no replaced elements, inline-block elements, etc.),
524+
the above will ensure that baselines of successive lines
525+
are exactly 'line-height' apart.
526+
This is important when columns of text in different fonts have to be aligned,
527+
for example in a table.
538528

539529
ISSUE: The fact that percentages compute to lengths is annoying.
540530
See also href="https://github.com/w3c/csswg-drafts/issues/3118">Issue 3118</a>

0 commit comments

Comments
 (0)