Skip to content

Commit 8dde186

Browse files
frivoalfrivoal
committed
[css-inline-3] Copy over css2 10.8
1 parent 8901f69 commit 8dde186

File tree

1 file changed

+180
-8
lines changed

1 file changed

+180
-8
lines changed

‎css-inline-3/Overview.bs‎

Lines changed: 180 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -350,14 +350,186 @@ Line Spacing: the 'line-height' property</h3>
350350
Computed value: the specified keyword, a number, or a computed <<length>> value
351351
</pre>
352352

353-
<dl dfn-type=value dfn-for=line-height>
354-
<dt><dfn>normal</dfn>
355-
<dt><dfn><<number>></dfn>
356-
<dt><dfn><<length-percentage>></dfn>
357-
<dd>See <a href="https://www.w3.org/TR/CSS2/visudet.html#line-height">CSS2&sect;10.8.1</a>.
358-
</dl>
359-
360-
ISSUE: Fill out this definition so that it fully replaces CSS2.
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, it is considered to contain a <a
411+
href="#strut">strut</a> (an invisible glyph of zero width) with the
412+
<var>A</var> and <var>D</var> of the element's first available font.
413+
414+
<p>Still for each glyph, determine the leading <var>L</var> to add,
415+
where <var>L</var> = <span
416+
class="propinst-line-height">'line-height'</span> - <var>AD</var>. Half
417+
the leading is added above <var>A</var> and the other half below
418+
<var>D</var>, giving the glyph and its leading a total height above
419+
the baseline of <var>A'</var> = <var>A</var> + <var>L</var>/2 and a
420+
total depth of <var>D'</var> = <var>D</var> + <var>L</var>/2.
421+
422+
<p class=note><strong>Note.</strong> <var>L</var> may be negative.
423+
424+
<p id="inline-box-height">The height of the inline box encloses all
425+
glyphs and their half-leading on each side and is thus exactly
426+
'line-height'. Boxes of
427+
child elements do not influence this height.
428+
429+
<p>Although margins, borders, and padding of non-replaced elements do
430+
not enter into the line box calculation, they are still rendered
431+
around inline boxes. This means that if the height specified by <span
432+
class="propinst-line-height">'line-height'</span> is less than the
433+
content height of contained boxes, backgrounds and colors of padding
434+
and borders may "bleed" into adjoining line boxes. User agents should
435+
render the boxes in document order. This will cause the borders on
436+
subsequent lines to paint over the borders and text of previous lines.
437+
</p>
438+
439+
<p class=note><em><strong>Note.</strong> CSS&nbsp;2 does not define
440+
what the content area of an inline box is (see <a
441+
href="#inline-non-replaced">10.6.1</a> above) and thus different UAs
442+
may draw the backgrounds and borders in different places.</em>
443+
444+
<p id=sTypoAscender class=note><em><strong>Note.</strong> It is
445+
recommended that implementations that use OpenType or TrueType fonts
446+
use the metrics "sTypoAscender" and "sTypoDescender" from the font's
447+
OS/2 table for A and D (after scaling to the current element's font
448+
size). In the absence of these metrics, the "Ascent" and "Descent"
449+
metrics from the HHEA table should be used.</em>
450+
451+
<!-- #include src=properties/line-height.srb -->
452+
453+
<p>On a <a href="visuren.html#block-boxes">block container element</a>
454+
whose content
455+
is composed of <a href="visuren.html#inline-level">inline-level</a>
456+
elements, 'line-height' specifies the <em>minimal</em> height of line boxes
457+
within the element. The minimum height consists of a minimum height above
458+
the baseline and a minimum depth below it, exactly as if each
459+
line box starts with a <a name="strut">zero-width inline box with the
460+
element's font and line height properties.</a> We call that imaginary
461+
box a "strut." (The name is inspired by TeX.).
462+
</p>
463+
464+
<p>The height and depth of the font above and below the baseline are
465+
assumed to be metrics that are contained in the font. (For more
466+
details, see CSS level&nbsp;3.)
467+
468+
<p>On a non-replaced <a
469+
href="visuren.html#inline-boxes">inline</a> element, 'line-height'
470+
specifies the height that is used in the calculation of the line box
471+
height.
472+
</p>
473+
<p>Values for this property have the following meanings:</p>
474+
475+
<dl>
476+
<dt><strong>normal</strong> </dt>
477+
<dd>Tells user agents to set the used
478+
value to a "reasonable" value based on the font of the element. The
479+
value has the same meaning as <span class="index-inst"
480+
title="&lt;number&gt;"><span
481+
class="value-inst-number">&lt;number&gt;</span></span>. We recommend a
482+
used value for 'normal' between 1.0 to 1.2. The <a
483+
href="cascade.html#computed-value">computed value</a> is 'normal'.
484+
</dd>
485+
<dt><span class="index-inst" title="&lt;length&gt;"><span
486+
class="value-inst-length"><strong>&lt;length&gt;</strong></span></span>
487+
</dt>
488+
<dd>The specified length is used in the calculation of the line box
489+
height. Negative values are illegal.
490+
</dd>
491+
<dt><span class="index-inst" title="&lt;number&gt;"><span
492+
class="value-inst-number"><strong>&lt;number&gt;</strong></span></span>
493+
</dt>
494+
<dd>The used value of the property is this number multiplied by the
495+
element's font size. Negative values are illegal. The <a
496+
href="cascade.html#computed-value">computed value</a> is the same as
497+
the specified value.
498+
</dd>
499+
<dt><span class="index-inst" title="&lt;percentage&gt;"><span
500+
class="value-inst-percentage"><strong>&lt;percentage&gt;</strong></span></span>
501+
</dt>
502+
<dd>The <a href="cascade.html#computed-value">computed value</a> of the
503+
property is this percentage multiplied by the element's
504+
computed font size. Negative values are illegal.
505+
</dd>
506+
</dl>
507+
508+
<div class="example"><p>
509+
The three rules in the example below have the same resultant line height:
510+
</p>
511+
<pre>
512+
div { line-height: 1.2; font-size: 10pt } /* number */
513+
div { line-height: 1.2em; font-size: 10pt } /* length */
514+
div { line-height: 120%; font-size: 10pt } /* percentage */
515+
</pre>
516+
</div>
517+
518+
<p>When an element contains text that is rendered
519+
in more than one font, user agents may determine the 'normal' <span
520+
class="propinst-line-height">'line-height'</span> value according to
521+
the largest font size.
522+
</p>
523+
<p class=note><em><strong>Note.</strong> When there is only one value of <span
524+
class="propinst-line-height">'line-height'</span> (other than 'normal') for all inline
525+
boxes in a block container box and they all use the same first available font (and
526+
there are no replaced elements, inline-block
527+
elements, etc.), the above will ensure that
528+
baselines of successive lines are exactly <span
529+
class="propinst-line-height">'line-height'</span> apart. This is
530+
important when columns of text in different fonts have to be aligned,
531+
for example in a table.</em>
532+
</p>
361533

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

0 commit comments

Comments
 (0)