Skip to content

Commit 399aebf

Browse files
bert-githubbert-github
committed
[css2] Added 118 and 121
--HG-- extra : convert_revision : svn%3A73dc7c4b-06e6-40f3-b4f7-9ed1dbc14bfc/trunk%403015
1 parent c30ee48 commit 399aebf

File tree

1 file changed

+50
-67
lines changed

1 file changed

+50
-67
lines changed

‎css2/visudet.src

+50-67
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
22
<html lang="en">
3-
<!-- $Id: visudet.src,v 2.145 2010-08-06 19:42:21 bbos Exp $ -->
3+
<!-- $Id: visudet.src,v 2.146 2010-08-20 20:00:20 bbos Exp $ -->
44
<head>
55
<title>Visual formatting model details</title>
66
<style type="text/css">
@@ -1306,72 +1306,41 @@ still have margins, padding, borders and a line height, and thus
13061306
influence these calculations just like elements with content.
13071307
</p>
13081308

1309-
<!--
1310-
<div class=example>
1311-
<p>For example, a block element with two inline children like this
1312-
1313-
<pre>&lt;p&gt;&lt;span&gt;Fjord&lt;/span&gt; &lt;sup&gt;super&lt;/sup&gt;</pre>
1314-
1315-
<p>may consist of one line box whose height is calculated as shown in
1316-
the figure:
1317-
1318-
<div class=figure>
1319-
<p><img src="images/linebox.png" alt="(diagram)" style="max-width: 100%">
1320-
<p>A line box. See explanation in text.
1321-
</div>
1322-
1323-
<p>The font and the 'line-height' property of the P determine the
1324-
minimum height of the line box: (1) = ascender of P's first available
1325-
font; (2) = descender of that font; (3) P's 'line-height' value. (As
1326-
explained in 10.6, CSS2 also allows a UA to use another measure of the font
1327-
instead of the ascender and descender. In that case (1) + (2) is
1328-
likely to be bigger than 1em.) The solid red parts are the half-leading.
1329-
1330-
<p>Each glyph in the line box is placed relative to the line box's
1331-
baseline. Those in the SPAN have a 'vertical-align' value of
1332-
'baseline' and are thus placed on that baseline: (4) = the SPAN's
1333-
'line-height' value; (5) = the ascender of the letters in the SPAN;
1334-
(6) = their descender.
1335-
1336-
<p>The SUP element has a non-zero 'vertical-align' (b) and thus all
1337-
letters and the half-leading at the top and bottom are shifted up to
1338-
a new baseline position: (7) = ascender of glyphs in SUP; (8) =
1339-
descender; (9) is 'line-height' of the SUP element.
1340-
1341-
<p>The resulting line box (the grey box in the diagram) is tall enough
1342-
to enclose the tops and bottoms of all the contents. In this case, its
1343-
height (b) is larger than the line height of any individual part of
1344-
the line box.
1345-
</div>
1346-
-->
1347-
13481309
<h3><a name="leading">Leading and half-leading</a></h3>
13491310

1350-
<p>Since the value of <span
1351-
class="propinst-line-height">'line-height'</span> for an inline box
1352-
may be different
1353-
from the height of its content area there may be space above and below
1354-
rendered glyphs. The difference between the content height and the used
1355-
value of <span class="propinst-line-height">'line-height'</span> is
1356-
called the <span class="index-def"
1357-
title="leading"><em>leading</em></span>. Half the leading is called
1358-
the <span class="index-def"
1359-
title="half-leading"><em>half-leading</em></span>.
1360-
</p>
1361-
<p>User agents center glyphs vertically in an inline box, adding
1362-
half-leading on the top and bottom. For example, if a piece of text
1363-
is '12px' high and the <span
1364-
class="propinst-line-height">'line-height'</span> value is '14px',
1365-
2pxs of extra space should be added: 1px above and 1px below the
1366-
letters. (This applies to empty boxes as well, as if the empty box
1367-
contained an infinitely narrow letter.)
1368-
</p>
1369-
<p>When the <span class="propinst-line-height">'line-height'</span>
1370-
value is less than the content height, the final inline box height will be
1371-
less than the font size and the rendered glyphs will "bleed" outside
1372-
the box. If such a box touches the edge of a line box, the rendered
1373-
glyphs will also "bleed" into the adjoining line box.
1374-
</p>
1311+
<p>CSS assumes that every font has font metrics that specify a
1312+
characteristic height above the baseline and a depth below it. In this
1313+
section we use <var>A</var> to mean that height (for a given font at a
1314+
given size) and <var>D</var> the depth. We also define <var>AD</var> =
1315+
<var>A</var> + <var>D</var>, the distance from the top to the
1316+
bottom. (See the note below for <a href="#sTypoAscender">how to find
1317+
<var>A</var> and <var>D</var> for TrueType and OpenType fonts.</a>)
1318+
Note that these are metrics of the font as a whole and need not
1319+
correspond to the ascender and descender of any individual glyph.
1320+
1321+
<p>User agent must align the glyphs in a non-replaced inline box to
1322+
each other by their relevant baselines, and to nested inline boxes
1323+
according to <span
1324+
class="propinst-vertical-align">'vertical-align'</span>. Then, for
1325+
each glyph, determine the <var>A</var> and <var>D</var>. Note that
1326+
glyphs in a single element may come from different fonts and thus need
1327+
not all have the same <var>A</var> and <var>D</var>. If the inline box
1328+
contains no glyphs at all, it is considered to contain a <a
1329+
href="#strut">strut</a> (an invisible glyph of zero width) with the
1330+
<var>A</var> and <var>D</var> of the element's first available font.
1331+
1332+
<p>Still for each glyph, determine the leading <var>L</var> to add,
1333+
where <var>L</var> = <span
1334+
class="propinst-line-height">line-height</span> - <var>AD</var>. Half
1335+
the leading is added above <var>A</var> and the other half below
1336+
<var>D</var>, giving the glyph and its leading a total height above
1337+
the baseline of <avr>A'</avr> = <var>A</var> + <var>L</var>/2 and a
1338+
total depth of <var>D'</var> = <var>D</var> + <var>L</var>/2.
1339+
1340+
<p>The height of the inline box is then the smallest such that it
1341+
encloses all glyphs and their leading, as well as all nested inline
1342+
boxes.
1343+
13751344
<p>Although margins, borders, and padding of non-replaced elements do
13761345
not enter into the line box calculation, they are still rendered
13771346
around inline boxes. This means that if the height specified by <span
@@ -1381,6 +1350,19 @@ and borders may "bleed" into adjoining line boxes. User agents should
13811350
render the boxes in document order. This will cause the borders on
13821351
subsequent lines to paint over the borders and text of previous lines.
13831352
</p>
1353+
1354+
<p class=note><em><strong>Note.</strong> CSS&nbsp;2.1 does not define
1355+
what the content area of an inline box is (see <a
1356+
href="#inline-non-replaced">10.6.1</a> above) and thus different UAs
1357+
may draw the backgrounds and borders in different places.</em>
1358+
1359+
<p is=sTypoAscender class=note><em><strong>Note.</strong> It is
1360+
recommended that implementations that use OpenType or TrueType fonts
1361+
use the metrics "sTypoAscender" and "sTypoDescender" from the font's
1362+
OS/2 table for A and D (after scaling to the current element's font
1363+
size). In the absence of these metrics, the "Ascent" and "Descent"
1364+
metrics from the HHEA table should be used.</em>
1365+
13841366
<!-- #include src=properties/line-height.srb -->
13851367

13861368
<p>On a <a
@@ -1455,13 +1437,14 @@ div { line-height: 120%; font-size: 10pt } /* percentage */
14551437
</div>
14561438

14571439
<p>When an element contains text that is rendered
1458-
in more than one font, user agents may determine the <span
1440+
in more than one font, user agents may determine the 'normal' <span
14591441
class="propinst-line-height">'line-height'</span> value according to
14601442
the largest font size.
14611443
</p>
14621444
<p>Generally, when there is only one value of <span
14631445
class="propinst-line-height">'line-height'</span> for all inline
1464-
boxes in a paragraph (and no tall images), the above will ensure that
1446+
boxes in a block-level box (and no replaced elements, inline-block
1447+
elements, etc.), the above will ensure that
14651448
baselines of successive lines are exactly <span
14661449
class="propinst-line-height">'line-height'</span> apart. This is
14671450
important when columns of text in different fonts have to be aligned,

0 commit comments

Comments
 (0)