Skip to content

Commit 8dd9aff

Browse files
ianbjacobsianbjacobs
committed
[css2] Added scaling, min+max, new box width+height calculations
--HG-- extra : convert_revision : svn%3A73dc7c4b-06e6-40f3-b4f7-9ed1dbc14bfc/trunk%40149
1 parent 5f5b63e commit 8dd9aff

1 file changed

Lines changed: 167 additions & 95 deletions

File tree

‎css2/visudet.src‎

Lines changed: 167 additions & 95 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.13 1997-09-24 02:54:49 ian Exp $ -->
3+
<!-- $Id: visudet.src,v 1.14 1997-09-24 22:23:30 ian Exp $ -->
44
<HEAD>
55
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
66
<TITLE>Visual flow model details</TITLE>
@@ -13,7 +13,7 @@
1313
The following sections provide more detail about specific
1414
positioning-related calculations.
1515

16-
<H2><a name="box-width">Box content calculations</a></H2>
16+
<H2><a name="box-width">Box width calculations</a></H2>
1717
<P>The width of a box generated by an element does not depend on the
1818
width of its children nor on its content -- it is given by the
1919
<span class="propinst-width">'width'</span> property.
@@ -22,12 +22,10 @@ width of its children nor on its content -- it is given by the
2222
<!-- #include src=properties/width.srb -->
2323

2424
<P> This property can be applied to text elements, but it is most
25-
useful with replaced elements such as images. The width is to be
26-
enforced by scaling the image if necessary. When scaling, the aspect
27-
ratio of the image is preserved if the <span
28-
class="propinst-height">'height'</span> property is 'auto'.
25+
useful with replaced elements such as images.
2926

30-
<P> Negative values are not allowed.
27+
<P>Negative values for <span class="propinst-width">'width'</span> are
28+
not allowed.
3129

3230
<div class="example"><P>
3331
For example:
@@ -42,6 +40,9 @@ class="propinst-height">'height'</span> of a replaced element are both
4240
'auto', these properties will be set to the intrinsic dimensions of
4341
the element.
4442

43+
<P> See the section on <a href="#scaling">scaling</a> for information about
44+
setting aspect ratios.
45+
4546
<H3>Relationship of width dimensions</H3>
4647
<P><em>See the section on the <a href="flowobj.html#box-model">the box
4748
model</a> for an illustration of the box model.</em>
@@ -57,97 +58,113 @@ class="propinst-margin-right">'margin-right'</span>.
5758

5859
<P>For elements in the flow, the sum of these seven is equal to the
5960
content <span class="propinst-width">'width'</span> of the parent
60-
element. For elements not in the flow and for replaced elements, the
61-
calculations are given below.
61+
element.
62+
63+
<P> If 'auto' is set as the value for one of the seven properties in
64+
an element that is inline or floating, it will be treated as if it
65+
were set to zero.
66+
67+
<P>Horizontal margins are not collapsed.
68+
69+
<H3><a name="replaced-width">Width of floats and replaced elements</a></H3>
6270

63-
<P> Three of the seven properties can be set to 'auto': <span
71+
<P>For floats and replaced elements (i.e., block level or inline
72+
elements whose markup is replaced by other content such as the IMG
73+
element in HTML), the calculation of width is as follows:
74+
75+
<P> Three of the seven properties given above can be set to 'auto': <span
6476
class="propinst-margin-left">'margin-left'</span>, <span
6577
class="propinst-width">'width'</span>, and <span
66-
class="propinst-margin-right">'margin-right'</span>. For replaced elements, a value
67-
of 'auto' on <span class="propinst-width">'width'</span> is replaced by the
68-
intrinsic width, so for them there can only be two 'auto' values.
69-
70-
<P> The <span class="propinst-width">'width'</span> has a non-negative
71-
UA-defined minimum value (which may vary from element to element and
72-
even depend on other properties). If <span
73-
class="propinst-width">'width'</span> goes below this limit, either because
74-
it was set explicitly, or because it was 'auto' and the rules below
75-
would make it too small, the value will be replaced with the minimum
76-
value instead.
78+
class="propinst-margin-right">'margin-right'</span>. For replaced
79+
elements, a value of 'auto' on <span
80+
class="propinst-width">'width'</span> is replaced by the intrinsic
81+
width, so for them there can only be two 'auto' values.
7782

7883
<P> If <EM>exactly one</EM> of <span
7984
class="propinst-margin-left">'margin-left'</span>, <span
8085
class="propinst-width">'width'</span>, or <span
81-
class="propinst-margin-right">'margin-right'</span> is 'auto', the UA will assign
82-
that property a value that will make the sum of the seven equal to the
83-
parent's width.
86+
class="propinst-margin-right">'margin-right'</span> is 'auto', the UA
87+
will assign that property a value that will make the sum of the seven
88+
equal to the parent's width.
8489

85-
<P> If <EM>none</EM> of the properties are 'auto', the value of
86-
<span class="propinst-margin-right">'margin-right'</span> will be assigned 'auto'.
90+
<P> If <EM>none</EM> of the properties have the value 'auto', the
91+
value of <span class="propinst-margin-right">'margin-right'</span>
92+
will be assigned 'auto'.
8793

8894
<P> If <EM>more than one</EM> of the three is 'auto', and one of them
89-
is <span class="propinst-width">'width'</span>, then the others
90-
(<span class="propinst-margin-left">'margin-left'</span> and/or <span
91-
class="propinst-margin-right">'margin-right'</span>) will be set to zero and <span
92-
class="propinst-width">'width'</span> will get the value needed to make the
93-
sum of the seven equal to the parent's width.
94-
95-
<P> Otherwise, if both <span class="propinst-margin-right">'margin-right'</span>
96-
and <span class="propinst-margin-right">'margin-right'</span> are 'auto', they will
97-
be set to equal values. This will center the element inside its
98-
parent.
95+
is <span class="propinst-width">'width'</span>, then the others (<span
96+
class="propinst-margin-left">'margin-left'</span> and/or <span
97+
class="propinst-margin-right">'margin-right'</span>) will be set to
98+
zero and <span class="propinst-width">'width'</span> will get the
99+
value needed to make the sum of the seven equal to the parent's width.
100+
101+
<P> Otherwise, if both <span
102+
class="propinst-margin-left">'margin-left'</span> and <span
103+
class="propinst-margin-right">'margin-right'</span> are 'auto', they
104+
will be set to equal values. This will center the element inside its
105+
parent.
99106

100-
<P> If 'auto' is set as the value for one of the seven properties in
101-
an element that is inline or floating, it will be treated as if it
102-
were set to zero.
107+
<H3>Width of absolutely positioned elements</H3>
103108

104-
<P>Horizontal margins are not collapsed.
109+
<P>The width of an absolutely positioned element's box is specified
110+
with the <span class="propinst-width">'width'</span> property.
105111

106-
<H3>Width of absolutely positioned elements</H3>
107-
<p>The width of an absolutely positioned elements may be specified using
108-
the <span class="propinst-width">'width'</span> property. If the width
109-
is not specified, the element will extend to immediately inside the
110-
right inner edge of its enclosing element. If this places the right edge
111-
of the element to the left of its left edge, the width is set to
112-
zero.
112+
<P>However, if the <span class="propinst-width">'width'</span> has the
113+
value 'auto', the width of the box is given by the <span
114+
class="propinst-left">'left'</span> and <span
115+
class="propinst-right">'right'</span> properties. Note that these take
116+
the place of the <span
117+
class="propinst-left-margin">'left-margin'</span> and <span
118+
class="propinst-right-margin">'right-margin'</span> properties, which
119+
don't apply to absolutely positioned elements.
120+
121+
<P>If all three properties have the value 'auto', the box has
122+
exactly the width of the inherited box coordinate system.
123+
124+
<H3>Minimum and maximum widths</h3>
125+
126+
<P> The <span class="propinst-width">'width'</span> has a
127+
non-negative UA-defined minimum value (which may vary from element to
128+
element and even depend on other properties).
113129

114-
<P>A percentage value for the <span
115-
class="propinst-width">'width'</span> property is computed with
116-
respect to the width of the parent element.
130+
<P>Users may override the UA-defined value with the following
131+
property.
117132

118-
<H3><a name="replaced-width">Width of replaced elements</a></H3>
133+
<H4><a name="propdef-min-width">'min-width'</a></H4>
134+
<!-- #include src=properties/min-width.srb -->
119135

120-
<P>The width of <span class="index-def" title="replaced
121-
elements"><em>replaced elements</em></span>, i.e., elements whose
122-
markup is replaced by other content (e.g., the IMG element in HTML is
123-
replaced by an image), is calculated as follows. The width of a box
124-
generated by a replaced element is given by the <span
125-
class="propinst-width">'width'</span> property. If the value of the
126-
<span class="propinst-width">'width'</span> property is 'auto', the
127-
intrinsic width is used as the width of the element. If a value other
128-
than 'auto' is specified in the style sheet, this value is used and
129-
the replaced element is resized accordingly (the resize method will
130-
depend on the media type).
136+
<P>If <span class="propinst-width">'width'</span> goes below the minimum
137+
width, either because it was set explicitly, or because it was 'auto'
138+
and the box width calculations would make it too small, the value will
139+
be replaced with the minimum value instead.
131140

132-
<P> Replaced elements can be either block-level or inline.
141+
<P>Similarly, if an element's <span
142+
class="propinst-width">'width'</span> goes beyond the width of its
143+
parent or box coordinate system, either because it was set explicitly,
144+
or because it was 'auto' and the box width calculations would make it
145+
too large, the value will be replaced by either the width of the
146+
parent or box coordinate system, or the value set by <span
147+
class="propinst-max-width">'max-width'</span>, whichever is smaller.
148+
149+
<H4><a name="propdef-max-width">'max-width'</a></H4>
150+
<!-- #include src=properties/max-width.srb -->
133151

134152
<H2><a name="box-height">Box height calculations</a></H2>
153+
135154
<P>The height of a box is the minimal height necessary to include the
136-
vertical content of the element and that of all its flowed
137-
children. This is the height necessary *before* any relative offset of
138-
children.
155+
vertical content of the element and that of all its flowed children
156+
(see also the section on <a href="#minimum-heights">minimum and
157+
maximum heights</a>). This is the height necessary <em>before</em> any
158+
relative offset of children.
139159

140-
<P>However, the height of an element may be set explicitly with the
141-
<span class="propinst-height">'height'</span> property.
160+
<P>However, the height of an element may be set explicitly with
161+
the <span class="propinst-height">'height'</span> property.
142162

143163
<H4><a name="propdef-height">'height'</a></H4>
144164
<!-- #include src=properties/height.srb -->
145165

146166
<P> This property can be applied to text, but it is most useful with
147-
replaced elements such as images. The height is to be enforced by
148-
scaling the image if necessary. When scaling, the aspect ratio of the
149-
image is preserved if the <span class="propinst-width">'width'</span>
150-
property is 'auto'.
167+
replaced elements such as images.
151168

152169
<div class="example"><P>
153170
<PRE>
@@ -163,49 +180,104 @@ the element.
163180
<P> If applied to a textual element, the height can be enforced by the
164181
user interface (e.g., a scrollbar).
165182

166-
<P> Negative values are not allowed.
183+
<P> Negative values for <span class="propinst-height">'height'</span>
184+
are not allowed.
185+
186+
<P> See the section on <a href="#scaling">scaling</a> for information about
187+
setting aspect ratios.
167188

168-
<P>user agents may ignore the
189+
<!-- Ian: Is this true??? -->
190+
<P>User agents may ignore the
169191
<span class="propinst-height">'height'</span> property (i.e., treat it
170192
as 'auto') if the element is not a replaced element.
171193

194+
<H3>Height of replaced elements</H3>
195+
The height of a replaced element is calculated in a way analogous
196+
to the calculation of the <a href="#replaced-width">width of a
197+
replaced element</a>.
198+
199+
<H3>Height of absolutely positioned elements</H3>
200+
201+
<P>The height of an absolutely positioned element's box is specified
202+
with the <span class="propinst-height">'height'</span> property. A
203+
percentage value for the <span class="propinst-height">'height'</span>
204+
property is computed with respect to the height of the parent
205+
element. However, specifying a percentage value for <span
206+
class="propinst-height">'height'</span> when the parent element's height
207+
is set to 'auto' results in undefined behavior.
208+
209+
<P>If the <span class="propinst-width">'height'</span> has the
210+
value 'auto', the height of the box is given by the <span
211+
class="propinst-top">'top'</span> and <span
212+
class="propinst-bottom">'bottom'</span> properties. Note that these take
213+
the place of the <span
214+
class="propinst-top-margin">'top-margin'</span> and <span
215+
class="propinst-bottom-margin">'bottom-margin'</span> properties, which
216+
don't apply to absolutely positioned elements.
217+
218+
<P>If all three properties have the value 'auto', the box has
219+
exactly the height of the inherited box coordinate system.
220+
221+
<H3><a name="minimum-heights">Minimum and maximum heights</a></h3>
222+
223+
<P>The height of a box is either the minimal height necessary to
224+
include the vertical content of the element and that of all its flowed
225+
children, or the value of <span
226+
class="propinst-min-height">'min-height'</span>, whichever is larger.
227+
228+
<H4><a name="propdef-min-height">'min-height'</a></H4>
229+
<!-- #include src=properties/min-height.srb -->
230+
231+
<P>If <span class="propinst-height">'height'</span> goes below the minimum
232+
height, either because it was set explicitly, or because it was 'auto'
233+
and the box height calculations would make it too small, the value will
234+
be replaced with the minimum value instead.
235+
236+
<P>Similarly, if an element's <span
237+
class="propinst-height">'height'</span> goes beyond the height of its
238+
parent or box coordinate system, either because it was set explicitly,
239+
or because it was 'auto' and the box height calculations would make it
240+
too large, the value will be replaced by either the height of the
241+
parent or box coordinate system, or the value set by <span
242+
class="propinst-max-height">'max-height'</span>, whichever is smaller.
243+
244+
<H4><a name="propdef-max-height">'max-height'</a></H4>
245+
<!-- #include src=properties/max-height.srb -->
246+
172247
<H3><a name="collapsing-margins">Collapsing margins</a></H3>
173248

174249
<P> Two or more adjoining vertical margins (i.e., with no border,
175250
padding or content between them) are collapsed to use the maximum of
176251
the margin values. In most cases, after collapsing the vertical
177252
margins the result is visually more pleasing and closer to what the
178-
designer expects. In the example above, the margins between the two LI
179-
elements are collapsed by using the maximum of the first LI element's
180-
<span class="propinst-margin-bottom">'margin-bottom'</span> and the
181-
second LI element's <span
182-
class="propinst-margin-top">'margin-top'</span>. Similarly, if the
183-
padding between the UL and the first LI element (the "E" constant) had
184-
been zero, the margins of the UL and first LI elements would have been
185-
collapsed.
253+
designer expects. Please consult the <a
254+
href="./flowobj.html@mpb-examples">examples of margin, padding, and
255+
borders</a> for an illustration of collapsed margins.
186256

187257
<P> In the case of negative margins, the absolute maximum of the
188258
negative adjoining margins is deducted from the maximum of the
189259
positive adjoining margins. If there are no positive margins, the
190260
absolute maximum of the negative adjoining margins is deducted from
191261
zero.
192262

193-
<H3>Height of absolutely positioned elements</H3>
263+
<H2><a name="scaling">Scaling</a></h2>
194264

195-
<p>The height of an absolutely positioned elements may be specified using
196-
the <span class="propinst-height">'height'</span> property. If the height
197-
is not specified, it will be just enough to hold its contents and the
198-
contents of its children.
265+
<P>If necessary, user agents should enforce an element's width and height
266+
by scaling it. When scaling, the aspect ratio of the image is
267+
preserved if values for the <span
268+
class="propinst-width">'width'</span> and <span
269+
class="propinst-height">'height'</span> properties are set to 'auto'.
199270

200-
<P>A percentage value for the <span
201-
class="propinst-height">'height'</span> property is computed with
202-
respect to the height of the parent element. However, specifying a
203-
percentage value for <span class="propinst-height">'height'</span> if
204-
the parent element's height is set to 'auto' has undefined behavior.
271+
<P>Authors may also specify a different aspect ratio that should be
272+
preserved in scaling with the following property.
205273

206-
<H3>Height of replaced elements</H3>
207-
The height of a replaced element is calculated the same with the
208-
<a href="#replaced-width">width is calculated</a>.
274+
<H4><a name="propdef-aspect-ratio">'aspect-ratio'</a></H4>
275+
<!-- #include src=properties/aspect-ratio.srb -->
276+
277+
<P>This property specifies the aspect ratio that should be preserved
278+
by a user agent when scaling an element's box. The user agent
279+
should change the width or height in a way that results in the smallest
280+
change in size.
209281

210282
<H2><a name="line-height">Line height calculations</a></H2>
211283
<P> All elements have a <span class="propinst-line-height">'line-height'</span>

0 commit comments

Comments
 (0)