Skip to content

Commit 9c37981

Browse files
ianbjacobsianbjacobs
committed
[css2] Rewrote section on line height calculations
--HG-- extra : convert_revision : svn%3A73dc7c4b-06e6-40f3-b4f7-9ed1dbc14bfc/trunk%40282
1 parent 37cd85d commit 9c37981

1 file changed

Lines changed: 78 additions & 84 deletions

File tree

‎css2/visudet.src‎

Lines changed: 78 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
22
<html lang="en">
3-
<!-- $Id: visudet.src,v 1.18 1997-10-21 00:28:03 ian Exp $ -->
3+
<!-- $Id: visudet.src,v 1.19 1997-10-29 04:31:38 ian Exp $ -->
44
<HEAD>
55
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
66
<TITLE>Visual rendering model details</TITLE>
@@ -41,11 +41,8 @@ class="propinst-height">'height'</span> of a replaced element are both
4141
'auto', these properties will be set to the intrinsic dimensions of
4242
the element.
4343

44-
<P> See the section on <a href="#scaling">scaling</a> for information about
45-
setting aspect ratios.
46-
4744
<H3>Relationship of width dimensions</H3>
48-
<P><em>See the section on the <a href="flowobj.html#box-model">the box
45+
<P><em>See the section on the <a href="box.html#box-model">the box
4946
model</a> for an illustration of the box model.</em>
5047

5148
<P> The width of a block-level element's box is determined by seven
@@ -184,9 +181,6 @@ user interface (e.g., a scrollbar).
184181
<P> Negative values for <span class="propinst-height">'height'</span>
185182
are not allowed.
186183

187-
<P> See the section on <a href="#scaling">scaling</a> for information about
188-
setting aspect ratios.
189-
190184
<!-- Ian: Is this true??? -->
191185
<P>User agents may ignore the
192186
<span class="propinst-height">'height'</span> property (i.e., treat it
@@ -252,7 +246,7 @@ padding or content between them) are collapsed to use the maximum of
252246
the margin values. In most cases, after collapsing the vertical
253247
margins the result is visually more pleasing and closer to what the
254248
designer expects. Please consult the <a
255-
href="./flowobj.html@mpb-examples">examples of margin, padding, and
249+
href="./box.html#mpb-examples">examples of margin, padding, and
256250
borders</a> for an illustration of collapsed margins.
257251

258252
<P> In the case of negative margins, the absolute maximum of the
@@ -261,88 +255,90 @@ positive adjoining margins. If there are no positive margins, the
261255
absolute maximum of the negative adjoining margins is deducted from
262256
zero.
263257

264-
<H2><a name="scaling">Scaling</a>: the <span
265-
class="propinst-aspect-ratio">'aspect-ratio'</span> property</h2>
266-
267-
<P>If necessary, user agents should enforce an element's width and height
268-
by scaling it. When scaling, the aspect ratio of the image is
269-
preserved if values for the <span
270-
class="propinst-width">'width'</span> and <span
271-
class="propinst-height">'height'</span> properties are set to 'auto'.
272-
273-
<P>Authors may also specify a different aspect ratio that should be
274-
preserved in scaling with the following property.
275-
276-
<!-- #include src=properties/aspect-ratio.srb -->
277-
278-
<P>This property specifies the aspect ratio that should be preserved
279-
by a user agent when scaling an element's box. The user agent
280-
should change the width or height in a way that results in the smallest
281-
change in size.
282-
283258
<H2><a name="line-height">Line height calculations</a>: the <span
284259
class="propinst-line-height">'line-height'</span> and <span
285260
class="propinst-vertical-align">'vertical-align'</span>
286261
properties</H2>
287262

288-
<P> All elements have a <span class="propinst-line-height">'line-height'</span>
289-
property that, in principle, gives the total height of a line of
290-
text. Space is added above and below the text of the line to arrive at
291-
that line height. For example, if the text is 12pt high and <span
292-
class="propinst-line-height">'line-height'</span> is set to '14pt', an extra space
293-
of 2pt is added, namely 1pt above and 1pt below the line. Empty
294-
elements influence these calculations just like elements with content.
295-
296-
<P> The difference between the font size and the <span
297-
class="propinst-line-height">'line-height'</span> is called the <span
298-
class="index-def" title="leading"><EM>leading</EM></span>. Half the
299-
leading is called the <span class="index-def"
300-
title="half-leading"><EM>half-leading</EM></span>. After formatting,
301-
each line will form a rectangular <span class="index-def"
302-
title="line-box"><EM>line-box</EM></span>.
303-
304-
<P> If a line of text contains sections with different <span
305-
class="propinst-line-height">'line-height'</span> values (because
306-
there are inline elements on the line), then each of those sections
307-
has its own half-leading above and below. The height of the line-box
308-
is from the top of the highest section to the bottom of the lowest
309-
one. Note that the top and bottom do not necessarily correspond to the
310-
tallest element, since elements can be positioned vertically with the
311-
<span class="propinst-vertical-align">'vertical-align'</span>
312-
property. To form a paragraph, each line-box is stacked immediately
313-
below the previous line.
314-
315-
<P> Note that any padding, border or margin above and below
316-
non-replaced inline elements does not influence the height of the
317-
line. In other words: if the <span
318-
class="propinst-line-height">'line-height'</span> is too small for the chosen
319-
padding or border, it will overlap with text on other lines.
320-
321-
<P> Replaced elements (e.g., images) on the line can make the line-box
322-
bigger, if the top of the replaced element (i.e., including all of its
323-
padding, border and margin) is above the tallest text section, or if
324-
the bottom is below the lowest.
263+
<P>As described in the section on <a href="flowobj.html#inline">inline
264+
layout</a>, user agents flow inline boxes horizontally into a series
265+
of line boxes. Each line box is a rectangle whose width is defined by
266+
the first enclosing block element (see the section on <a
267+
href="flowobj2.html#box-width">box width calculations</a>)
268+
269+
<P>The line box height is determined as follows. All elements have the
270+
<span class="propinst-line-height">'line-height'</span> property,
271+
which has the following meaning:
272+
273+
<ul>
274+
<li>If the property is set on a block-level element, it
275+
specifies the <em>minimal</em> line height for all lines of text
276+
generated by the element.
277+
<li>If the property is set on an inline element, it
278+
specifies the <em>exact</em> line height for the element's inline box.
279+
</ul>
280+
281+
<p>Since several inline elements may generate inline boxes on the same
282+
line, the final height of a given line box is the maximum of the
283+
minimal line height specified for the parent block-level element and
284+
the heights required by all inline boxes on the current line. Replaced
285+
elements that create inline boxes (e.g., inline images) also affect
286+
the line height, but via the <span
287+
class="propinst-height">'height'</span> and <span
288+
class="propinst-vertical-align">'vertical-align'</span> properties,
289+
not the <span class="propinst-line-height">'line-height'</span>
290+
property. Replaced elements increase the line box height if the top of
291+
the replaced element (i.e., including all of its padding, border and
292+
margin) is above the tallest text section, or if the bottom is below
293+
the lowest.
294+
295+
<P>When text on a line is smaller than the line box height, space may
296+
be added above and below the text. For example, if the text is 12pt
297+
high and the current line height is '14pt', 2pts of extra space is
298+
added, namely 1pt above and 1pt below the line. Empty elements
299+
influence these calculations just like elements with content.
300+
301+
<P>The difference between the font size and the line height is called
302+
the <span class="index-def"
303+
title="leading"><EM>leading</EM></span>. Half the leading is called
304+
the <span class="index-def"
305+
title="half-leading"><EM>half-leading</EM></span>. If a line of text
306+
contains inline elements with different <span
307+
class="propinst-line-height">'line-height'</span> values, then each
308+
inline element has its own half-leading above and below.
309+
310+
<P>Note that the top and bottom of a line box do not necessarily
311+
correspond to the tallest element, since elements can be positioned
312+
vertically with the <span
313+
class="propinst-vertical-align">'vertical-align'</span> property.
314+
<!-- Give an example/drawing-->
315+
316+
<P>Padding, borders, or margins above and below non-replaced inline
317+
elements do not influence the height of the line. In other words: if
318+
the <span class="propinst-line-height">'line-height'</span> is too
319+
small for the chosen padding or border, it will overlap with text on
320+
other lines.
325321

326322
<P> In the normal case, when there is only one value of <span
327-
class="propinst-line-height">'line-height'</span> throughout a paragraph, and no
328-
tall images, the definition above will ensure that baselines of
329-
successive lines are exactly <span
330-
class="propinst-line-height">'line-height'</span> apart. This is important when
331-
columns of text in different fonts have to be aligned, for example in
332-
a table.
333-
334-
<P> Note that this doesn't preclude the text on two adjacent lines
335-
from overlapping each other. The <span
336-
class="propinst-line-height">'line-height'</span> may be smaller than the height
337-
of the text, in which case the leading will be negative. This is
338-
useful if you know that the text will contain no descenders (e.g.,
339-
because it only contains uppercase), so the lines can be put closer
340-
together.
323+
class="propinst-line-height">'line-height'</span> throughout a
324+
paragraph, and no tall images, the above definition will ensure that
325+
baselines of successive lines are exactly <span
326+
class="propinst-line-height">'line-height'</span> apart. This is
327+
important when columns of text in different fonts have to be aligned,
328+
for example in a table.
329+
330+
<P> Note that this doesn't prevent text on two adjacent lines from
331+
overlapping. The <span
332+
class="propinst-line-height">'line-height'</span> may be smaller than
333+
the height of the text, in which case the leading will be
334+
negative. This is useful if you know that the text will contain no
335+
descenders (e.g., because it only contains uppercase), so the lines
336+
can be put closer together.
341337

342338
<!-- #include src=properties/line-height.srb -->
343339

344-
<P> The property sets the distance between two adjacent lines'
345-
baselines.
340+
<P> The property sets the distance between the baselines
341+
of two adjacent lines.
346342

347343
<P> When a <span class="value-inst-number">&lt;number&gt;</span>, the
348344
line height is given by the font size of the current element
@@ -442,7 +438,7 @@ are used in place of letters) that don't have a baseline.
442438

443439
<P> A floating element is positioned subject to the following
444440
constraints (see the section on <a
445-
href="./flowobj.html#box-dimensions">box dimensions</a> for an
441+
href="./box.html#box-dimensions">box dimensions</a> for an
446442
explanation of the terms):
447443

448444
<OL>
@@ -767,8 +763,6 @@ model</a>. A more visually appealing version of the above might be
767763
designed using overlapping 'absolute' positioned elements:</p>
768764
</div>
769765

770-
771-
772766
<H2><a name="dynamic-positioning">Dynamic positioning</a></H2>
773767
<P>Certain dynamic aspects of managing positioned elements, such
774768
as hiding, displaying and movement can only be performed using an

0 commit comments

Comments
 (0)