csswg-drafts/css2/visudet.src at b9459027d99a176438ee1e4b807e5c85cb26753e · w3c/csswg-drafts · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en">
<!-- $Id: visudet.src,v 1.23 1997-10-30 08:34:12 ian Exp $ -->
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<TITLE>Visual rendering model details</TITLE>
<LINK rel="next" href="page.html">
<LINK rel="previous" href="flowobj.html">
<LINK rel="STYLESHEET" href="style/default.css" type="text/css">
</HEAD>
<BODY>
<H1 align="center">Visual rendering model details</H1>

<H2><a name="box-width">Box width calculations</a>: the <span
	  class="propinst-width">'width'</span> property</H2>

<P>The width of a box generated by an element does not depend on the
width of its children nor on its content -- it is given by the
<span class="propinst-width">'width'</span> property.

<!-- #include src=properties/width.srb -->

<P> This property can be applied to text elements, but it is most
useful with replaced elements such as images.

<P>Negative values for <span class="propinst-width">'width'</span> are
not allowed.

<div class="example"><P>
For example:

<PRE>
  IMG.icon { width: 100px }
</PRE>
</div>

<P> If the <span class="propinst-width">'width'</span> and <span
class="propinst-height">'height'</span> of a replaced element are both
'auto', these properties will be set to the intrinsic dimensions of
the element.

<H3>Relationship of width dimensions</H3>
<P><em>See the section on the <a href="box.html#box-model">the box
model</a> for an illustration of box rendering objects.</em>

<P> The width of a block-level element's box is determined by seven
properties: <span class="propinst-margin-left">'margin-left'</span>,
<span class="propinst-border-left">'border-left'</span>, <span
class="propinst-padding-left">'padding-left'</span>, <span
class="propinst-width">'width'</span>, <span
class="propinst-padding-right">'padding-right'</span>, <span
class="propinst-border-right">'border-right'</span>, and <span
class="propinst-margin-right">'margin-right'</span>.

<P>For elements in the flow, the sum of these seven is equal to the
content <span class="propinst-width">'width'</span> of the parent
element.

<P> If 'auto' is set as the value for one of the seven properties in
an element that is inline or floating, it will be treated as if it
were set to zero.

<P>Horizontal margins are not collapsed.

<H3><a name="replaced-width">Width of floats and replaced elements</a></H3>

<P>For floats and replaced elements (i.e., block-level or inline
elements whose markup is replaced by other content such as the IMG
element in HTML), the calculation of width is as follows:

<P> Three of the seven properties given above can be set to 'auto': <span
class="propinst-margin-left">'margin-left'</span>, <span
class="propinst-width">'width'</span>, and <span
class="propinst-margin-right">'margin-right'</span>. For replaced
elements, a value of 'auto' on <span
class="propinst-width">'width'</span> is replaced by the intrinsic
width, so for them there can only be two 'auto' values.

<P> If <EM>exactly one</EM> of <span
class="propinst-margin-left">'margin-left'</span>, <span
class="propinst-width">'width'</span>, or <span
class="propinst-margin-right">'margin-right'</span> is 'auto', the UA
will assign that property a value that will make the sum of the seven
equal to the parent's width.

<P> If <EM>none</EM> of the properties have the value 'auto', the
value of <span class="propinst-margin-right">'margin-right'</span>
will be assigned 'auto'.

<P> If <EM>more than one</EM> of the three is 'auto', and one of them
is <span class="propinst-width">'width'</span>, then the others (<span
class="propinst-margin-left">'margin-left'</span> and/or <span
class="propinst-margin-right">'margin-right'</span>) will be set to
zero and <span class="propinst-width">'width'</span> will get the
value needed to make the sum of the seven equal to the parent's width.

<P> Otherwise, if both <span
class="propinst-margin-left">'margin-left'</span> and <span
class="propinst-margin-right">'margin-right'</span> are 'auto', they
will be set to equal values. This will center the element inside its
parent.

<H3>Width of absolutely positioned elements</H3>

<P>The width of an absolutely positioned element's box is specified
with the <span class="propinst-width">'width'</span> property.

<P>However, if the <span class="propinst-width">'width'</span> has the
value 'auto', the width of the box is given by the <span
class="propinst-left">'left'</span> and <span
class="propinst-right">'right'</span> properties. Note that these take
the place of the <span
class="propinst-left-margin">'left-margin'</span> and <span
class="propinst-right-margin">'right-margin'</span> properties, which
don't apply to absolutely positioned elements.

<P>If all three properties have the value 'auto', the box has
exactly the width of the inherited reference box.

<H3>Minimum and maximum widths: <span
class="propinst-min-width">'min-width'</span> and <span
class="propinst-max-width">'max-width'</span></h3>

<P>It is sometimes useful to constrain the width of elements to a
certain range. Two properties offer this functionality:

<!-- #include src=properties/min-width.srb -->
<!-- #include src=properties/max-width.srb -->

<P>This algorithm describes how the two properties influence the width
calculations:

<OL>

<LI>the normal width calculations (without 'min-width' and 'max-width')
are performed and the calculated width is found

<LI>if the value of 'min-width' is greater than the value of
'max-width', 'max-width' should be set to the value of 'min-width'

<LI>if the calculated width is greater than 'max-width', the
value of 'width' is set to 'max-width'. Goto step 1.

<LI>if the calculated width is smaller than 'min-width', the
value of 'width' is set to 'min-width'. Goto step 1.

<LI>terminate

</OL>

<P>When the algorithm terminates, use the calculated width as the
width of the element.

<!--

The <span class="propinst-width">'width'</span> has a
non-negative UA-defined minimum value (which may vary from element to
element and even depend on other properties).

<P>A style sheet may add an additional constraint on the Users may override the UA-defined value with the following
property.


<P>If <span class="propinst-width">'width'</span> goes below the minimum
width, either because it was set explicitly, or because it was 'auto'
and the box width calculations would make it too small, the value will
be replaced with the minimum value instead.

<P>Similarly, if an element's <span
class="propinst-width">'width'</span> goes beyond the width of its
parent or reference box, either because it was set explicitly,
or because it was 'auto' and the box width calculations would make it
too large, the value will be replaced by either the width of the
parent or reference box, or the value set by <span
class="propinst-max-width">'max-width'</span>, whichever is smaller.

-->

<H2><a name="box-height">Box height calculations</a>: the <span
class="propinst-height">'height'</span> property</H2>

<P>The height of a box is the minimal height necessary to include the
vertical content of the element and that of all its flowed children
(see also the section on <a href="#minimum-heights">minimum and
maximum heights</a>). This is the height necessary <em>before</em> any
relative offset of children.

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

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

<P> This property can be applied to text, but it is most useful with
replaced elements such as images.

<div class="example"><P>
<PRE>
  IMG.icon { height: 100px }
</PRE>
</div>

<P> If the <span class="propinst-width">'width'</span> and <span
class="propinst-height">'height'</span> of a replaced element are both
'auto', these properties will be set to the intrinsic dimensions of
the element.

<P> If applied to a textual element, the height can be enforced by the
user interface (e.g., a scrollbar).

<P> Negative values for <span class="propinst-height">'height'</span>
are not allowed.

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

<H3>Height of replaced elements</H3>

<P>The height of a replaced element is calculated in a way analogous
to the calculation of the <a href="#replaced-width">width of a
replaced element</a>.

<H3>Height of absolutely positioned elements</H3>

<P>The height of an absolutely positioned element's box is specified
with the <span class="propinst-height">'height'</span> property. A
percentage value for the <span class="propinst-height">'height'</span>
property is computed with respect to the height of the parent
element. However, specifying a percentage value for <span
class="propinst-height">'height'</span> when the parent element's height
is set to 'auto' results in undefined behavior.

<P>If the <span class="propinst-width">'height'</span> has the
value 'auto', the height of the box is given by the <span
class="propinst-top">'top'</span> and <span
class="propinst-bottom">'bottom'</span> properties. Note that these take
the place of the <span
class="propinst-top-margin">'top-margin'</span> and <span
class="propinst-bottom-margin">'bottom-margin'</span> properties, which
don't apply to absolutely positioned elements.

<P>If all three properties have the value 'auto', the box has
exactly the height of the inherited reference box.

<H3><a name="minimum-heights">Minimum and maximum heights</a>: <span
class="propinst-min-height">'min-height'</span> and <span
class="propinst-max-height">'max-height'</span></h3>


<P>It is sometimes useful to constrain the height of elements to a
certain range. Two properties offer this functionality:

<!-- #include src=properties/min-height.srb -->
<!-- #include src=properties/max-height.srb -->

<P>This algorithm describes how the two properties influence the height
calculations:

<OL>

<LI>the normal height calculations (without 'min-height' and 'max-height')
are performed and the calculated height is found

<LI>if the value of 'min-height' is greater than the value of
'max-height', 'max-height' should be set to the value of 'min-height'

<LI>if the calculated height is greater than 'max-height', the
value of 'height' is set to 'max-height'. Goto step 1.

<LI>if the calculated height is smaller than 'min-height', the
value of 'height' is set to 'min-height'. Goto step 1.

<LI>terminate

</OL>

<P>When the algorithm terminates, use the calculated height as the
height of the element.


<!--

<P>If <span class="propinst-height">'height'</span> goes below the minimum
height, either because it was set explicitly, or because it was 'auto'
and the box height calculations would make it too small, the value will
be replaced with the minimum value instead.

<P>Similarly, if an element's <span
class="propinst-height">'height'</span> goes beyond the height of its
parent or reference box, either because it was set explicitly,
or because it was 'auto' and the box height calculations would make it
too large, the value will be replaced by either the height of the
parent or reference box, or the value set by <span
class="propinst-max-height">'max-height'</span>, whichever is smaller.

-->

<H3><a name="collapsing-margins">Collapsing margins</a></H3>

<P> Two or more adjoining vertical margins (i.e., with no border,
padding or content between them) are collapsed to use the maximum of
the margin values. In most cases, after collapsing the vertical
margins the result is visually more pleasing and closer to what the
designer expects. Please consult the <a
href="./box.html#mpb-examples">examples of margin, padding, and
borders</a> for an illustration of collapsed margins.

<P> In the case of negative margins, the absolute maximum of the
negative adjoining margins is deducted from the maximum of the
positive adjoining margins. If there are no positive margins, the
absolute maximum of the negative adjoining margins is deducted from
zero.

<H2><a name="line-height">Line height calculations</a>: the <span
class="propinst-line-height">'line-height'</span> and <span
class="propinst-vertical-align">'vertical-align'</span>
properties</H2>

<P>As described in the section on <a href="flowobj.html#inline">inline
layout</a>, user agents flow inline boxes horizontally into a series
of line boxes. Each line box is a rectangle whose width is defined by
the first enclosing block element (see the section on <a
href="flowobj2.html#box-width">box width calculations</a>)

<P>The line box height is determined as follows. All elements have the
<span class="propinst-line-height">'line-height'</span> property,
which has the following meaning:

<ul>
<li>If the property is set on a block-level element, it
specifies the <em>minimal</em> line height for all lines of text
generated by the element.
<li>If the property is set on an inline element, it
specifies the <em>exact</em> line height for the element's inline box.
</ul>

<p>Since several inline elements may generate inline boxes on the same
line, the final height of a given line box is the maximum of the
minimal line height specified for the parent block-level element and
the heights required by all inline boxes on the current line. Replaced
elements that create inline boxes (e.g., inline images) also affect
the line height, but via the <span
class="propinst-height">'height'</span> and <span
class="propinst-vertical-align">'vertical-align'</span> properties,
not the <span class="propinst-line-height">'line-height'</span>
property. Replaced elements increase the line box height if the top of
the replaced element (i.e., including all of its padding, border and
margin) is above the tallest text section, or if the bottom is below
the lowest.

<P>When text on a line is smaller than the line box height, space may
be added above and below the text. For example, if the text is 12pt
high and the current line height is '14pt', 2pts of extra space is
added, namely 1pt above and 1pt below the line. Empty elements
influence these calculations just like elements with content.

<P>The difference between the font size and the line height is called
the <span class="index-def"
title="leading"><EM>leading</EM></span>. Half the leading is called
the <span class="index-def"
title="half-leading"><EM>half-leading</EM></span>. If a line of text
contains inline elements with different <span
class="propinst-line-height">'line-height'</span> values, then each
inline element has its own half-leading above and below.

<P>Note that the top and bottom of a line box do not necessarily
correspond to the tallest element, since elements can be positioned
vertically with the <span
class="propinst-vertical-align">'vertical-align'</span> property.
<!-- Give an example/drawing-->

<P>Padding, borders, or margins above and below non-replaced inline
elements do not influence the height of the line. In other words: if
the <span class="propinst-line-height">'line-height'</span> is too
small for the chosen padding or border, it will overlap with text on
other lines.

<P> In the normal case, when there is only one value of <span
class="propinst-line-height">'line-height'</span> throughout a
paragraph, and no tall images, the above definition will ensure that
baselines of successive lines are exactly <span
class="propinst-line-height">'line-height'</span> apart. This is
important when columns of text in different fonts have to be aligned,
for example in a table.

<P> Note that this doesn't prevent text on two adjacent lines from
overlapping. The <span
class="propinst-line-height">'line-height'</span> may be smaller than
the height of the text, in which case the leading will be
negative. This is useful if you know that the text will contain no
descenders (e.g., because it only contains uppercase), so the lines
can be put closer together.

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

<P> The property sets the distance between the baselines
of two adjacent lines.

<P> When a <span class="value-inst-number"
77EC
>&lt;number&gt;</span>, the
line height is given by the font size of the current element
multiplied by the <span
class="value-inst-number">&lt;number&gt;</span>. This differs from a
<span class="value-inst-percentage">&lt;percentage&gt;</span> value in
the way it inherits: when a <span
class="value-inst-number">&lt;number&gt;</span> value is specified,
child elements will inherit the factor itself, not the resultant value
(as is the case with <span
class="value-inst-percentage">&lt;percentage&gt;</span> and other
units).

<P> Negative values are not allowed.

<div class="example"><P>
The three rules in the example below have the same resultant line height:

<PRE>
  DIV { line-height: 1.2; font-size: 10pt }     /* number */
  DIV { line-height: 1.2em; font-size: 10pt }   /* length */
  DIV { line-height: 120%; font-size: 10pt }    /* percentage */
</PRE>
</div>

<P> A value of 'normal' sets the <span
class="propinst-line-height">'line-height'</span> to a reasonable
value for the element's font. It is suggested that UAs set the
'normal' value to be a number in the range of 1.0 to 1.2.

<!-- <length> added from frosting -->

<!-- #include src=properties/vertical-align.srb -->

<P>The property affects the vertical positioning of the element. Some
	    of the possible values refer to the parent element:

  <DL>
    <DT>
      'baseline'
    <DD>
      align the baseline of the element (or the bottom, if the element doesn't
      have a baseline) with the baseline of the parent
    <DT>
      'middle'
    <DD>
      align the vertical midpoint of the element (typically an image) with the
      baseline plus half the x-height of the parent
    <DT>
      'sub'
    <DD>
      subscript the element. This value has no effect on the font size
	      of the element's text.
    <DT>
      'super'
    <DD>
      superscript the element. This value has no effect on the font size
	      of the element's text.
    <DT>
      'text-top'
    <DD>
      align the top of the element with the top of the parent element's font
    <DT>
      'text-bottom'
    <DD>
      align the bottom of the element with the bottom of the parent element's font
  </DL>

<P> Other possible values refer to the formatted line that
the element is a part of:

  <DL>
    <DT>
      'top'
    <DD>
      align the top of the element with the tallest element on the line
    <DT>
      'bottom'
    <DD>
      align the bottom of the element with the lowest element on the line
  </DL>

<P> Using the 'top' and 'bottom' alignment, unsolvable situations can
occur where element dependencies form a loop.

<P> Percentage values refer to the value of the <span
class="propinst-line-height">'line-height'</span> property of the
element itself. They raise the baseline of the element (or the bottom,
if it has no baseline) the specified amount above the baseline of the
parent.  Negative values are possible, e.g., a value of '-100%' will
lower the element so that the baseline of the element ends up where
the baseline of the next line should have been. This allows precise
control over the vertical position of elements (such as images that
are used in place of letters) that don't have a baseline.

<H2><a name="floating-constraints">Floating constraints</a></H2>

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

<OL>
<LI> The left outer edge of a left-floating element may not be to the
left of the left inner edge of its parent element. The analogous rules
hold for right floating elements.

<LI> The left outer edge of a left floating element must be to the
right of the right outer edge of every earlier (in the HTML source)
left-floating element or the top of the former must be lower than the
bottom of the latter. The analogous rules hold for right floating
elements.

<LI> The right outer edge of a left-floating element may not be to the
right of the left outer edge of any right-floating element that is to
the right of it. The analogous rules
hold for right floating elements.

<LI> A floating element's top may not be higher than the inner top of
its parent.

<LI> A floating element's top may not be higher than the top of any
earlier floating or block-level element.

<LI> A floating element's top may not be higher than the top of any
<span class="index-inst" title="line-box">line-box</span> (see the
section on <a href="#line-height">line height calculations</a>) with
content that precedes the floating element in the HTML source.

<LI> A floating element must be placed as high as possible.

<LI> A left-floating element must be put as far to the left as
possible, a right-floating element as far to the right as possible. A
higher position is preferred over one that is further to the
left/right.
</OL>

<P>Elements that are after the floating element will overlap.


<H2><a name="overflow">Overflow and clipping</a></H2>
<!--
   Overflow and clipping

       Overflow must be considered when an element's content or that
       of its children exceeds the element's specified dimensions.

       [Note, may apply to relatively or absolutely positioned elements]
-->

<H3><a name="overflow">Overflow</a>: the <span
class="propinst-overflow">'overflow'</span> property</H3>

<P>Normally, child boxes are positioned within the box of their
parent. However, a child box may extend horizontally beyond the
bounding box of its parent in the following situations:

<ul>
<li>It is <a href="#floats">floated</a> and is too large for its
parent.
<li>It is <a href="#absolute-positioning">positioned absolutely</a>.
<li>It has <a href="#margin-properties">negative margins</a>.
</ul>

<p>The <span class="propinst-overflow">'overflow'</span> property is
used to specify the user agent's behavior when the contents of an
absolutely positioned element exceed its declared bounds.

<!-- #include src=properties/overflow.srb -->

<p>This property determines what happens when an element's rendered
contents exceed its height or width.</p>

<ul>

<li><strong>visible:</strong> A value of 'visible' indicates that the
element's bounding box should be enlarged enough to contain all of its
rendered contents.  In other words, its height or width can be made
bigger than the declared value. Any padding or border will remain
outside the rendered content. Any additional width will be added in
the direction specified by the current value of the <span
class="propinst-direction">'direction'</span> property. Additional
height will be added to the bottom.

<li><strong>hidden:</strong> A value of 'hidden' indicates that the
element's contents should be clipped to its height and width, and that
no scrolling mechanism should be provided. Padding and border will be
applied to the regular height and width of the element, as if its
contents did not exceed its bounds. Any contents that exceed the
element's bounds will be unavailable to the user.

<li><strong>auto:</strong> The behavior of the 'auto' value is
UA-dependent, but should cause a scrolling mechanism to be invoked
when the element's rendered contents exceed its bounds.

<li><strong>scroll:</strong> Finally, the 'scroll' value indicates
that if the UA supports a visible scrolling mechanism, that mechanism
should be displayed whether or not the element's rendered contents
exceed its bounds.  This avoids any problem with scrollbars appearing
and disappearing in a dynamic environment.
</ul>

<P> Even if <span class="propinst-overflow">'overflow'</span> is set
to 'visible', contents may be clipped to a UA's document window by the
native operating environment. In addition, the <span
class="propinst-clip">'clip'</span> property can cause otherwise
visible &quot;overflowed&quot; contents to be clipped.

The examples below utilize the following stylesheet, which
describes a simple 100 pixel box with a thin solid red border:

<div class="example"><P>
<PRE>
#overlay {position: absolute; top: 50px; left: 50px; height: 100px;
          width: 100px; border: thin solid red;}
</PRE>

<P>Applied to an empty &lt;DIV&gt;, this would look something like:</P>

<img src="./images/overflow1.gif" alt="Simple overlay">
</div>

<P> First, let's consider the default value of <span
class="propinst-overflow">'overflow'</span>, which is 'visible'. This
value indicates that all contents of an element should be rendered,
even if these contents exceed the declared width or height of the
element.

<div class="example"><P>
Consider a block of long, preformatted text:

<PRE>
&lt;P id="overlay"&gt;
&lt;PRE&gt;Here is some long preformatted text.
&lt;/PRE&gt;
&lt;P&gt;
</PRE>

<p>With <span class="propinst-overflow">'overflow'</span> set to
'visible', all of the text will be visible even though it exceeds the
declared width of the element. The element will be made wider than its
declared width, and any padding or border will be rendered outside of
this new width. The example might be rendered something like:</p>

<img src="./images/overflow2.gif" alt="Long overflow text which is visible.">

</div>

<div class="example"><P>
Similarly, the height of the element will be extended should the
rendered contents exceed the declared height. Consider the following:</P>

<div class="example"><P>
<PRE>
&lt;DIV id="overlay"&gt;Here is a block of text that will
cause this element to exceed its declared height of 100 pixels.
&lt;/DIV&gt;
</PRE>

<p>This division should be rendered something like thi
E9E5
s:</P>

<img src="./images/overflow3.gif" alt="Layout of an element whose contents exceed the declared height">
</div>

<p>The 'hidden' value of the <span
class="propinst-overflow">'overflow'</span> property indicates that
any content which exceeds the declared bounds of the element should not
be rendered at all. The user will have no way to view this
"overflowed" content. With <span
class="propinst-overflow">'overflow'</span> set to 'hidden', the two
examples above should be rendered something like this:</p>

<img src="./images/overflow4.gif" alt="Hiding overflow content">
</div>


<p>Another value for <span class="propinst-overflow">'overflow'</span>
is 'auto', which indicates that the user agent should provide for a
scrolling mechanism when the contents overflow the bounds of the
element. Finally, a value of 'scroll' indicates that a scrolling
mechanism should always be present, whether or not the contents exceed
the element's bounds.

<H3><a name="clipping">Clipping</a>: the <span
class="propinst-clip">'clip'</span> property</h3>

<p>Clipping alters a document's display, though it does not affect how
it is laid out. The clipping region defines what portion of the
element's physical representation is visible. It is computed by the
intersection of the parent's clipping region with the value of the
element's <span class="propinst-clip">'clip'</span> property.</p>

<!-- #include src=properties/clip.srb -->

The <span class="index-def" title="&lt;shape&gt;, definition of"><a
	      name="value-def-shape"
	      class="value-def">&lt;shape&gt;</a></span> value type may
have the following values:

<ul>
<li> rect (<span class="value-inst-top">&lt;top&gt;</span>
	   <span class="value-inst-right">&lt;right&gt;</span>
	   <span class="value-inst-bottom">&lt;bottom&gt;</span>
           <span class="value-inst-left">&lt;left&gt;</span>)
</ul>

<P>The value types <span class="index-def" title="&lt;top&gt;,
	      definition of"><a name="value-def-top"
		class="value-def">&lt;top&gt;</a></span>, <span
	      class="index-def" title="&lt;right&gt;, definition
	      of"><a name="value-def-right"
		class="value-def">&lt;right&gt;</a></span>, <span
	      class="index-def" title="&lt;bottom&gt;, definition
	      of"><a name="value-def-bottom"
		class="value-def">&lt;bottom&gt;</a></span>, and <span
	      class="index-def" title="&lt;left&gt;, definition of"><a
		name="value-def-left"
		class="value-def">&lt;left&gt;</a></span> may either
	    have the values <span
		class="value-inst-length">&lt;length&gt;</span>
	    or 'auto'.

<p>Lengths are specified with respect to the element's top-left
corner. Negative lengths are permitted.

<P>The values for <span class="value-inst-top">&lt;top&gt;</span>,
<span class="value-inst-bottom">&lt;bottom&gt;</span> <span
class="value-inst-right">&lt;right&gt;</span>, and <span
class="value-inst-left">&lt;left&gt;</span> are distances
from the respective extents of the parent element's clipping region.

<P> When converted to pixel coordinates, the bottom-right corner is
excluded from the clipping rectangle. This rule is necessary to permit
the definition of zero-width or zero-height rectangles.

<p>Any length can be replaced by the value 'auto', which causes
the respective extent of the clipping rectangle to match the
element's extent in the given direction, including padding,
borders and child elements. The default value for the 'clip'
property causes the clip rectangle to encompass the entire
element. In effect, 'auto' provides for an infinite clipping
region.</p>

<div class="note"><P>
<em><strong>Note.</strong>
For now, all clipping regions are rectangular. We anticipate
future extensions to permit non-rectangular clipping.
</em>
</div>

<P>If the clipping region exceeds the bounds of the UA's
document window, contents may be clipped to that window by the
native operating environment.

<H2><a name="visibility">Visibility</a>: the <span
class="propinst-visibility">'visibility'</span> property</H2>

<P>Some elements of the document tree cause boxes to be generated that
	    follow the normal positioning rules, but are not rendered;
	    their presence is "felt," but they are invisible.

<!-- #include src=properties/visibility.srb -->

<p>The <span class="propinst-visibility">'visibility'</span> property
determines whether or not an element is initially displayed. The
visibility of an element does not affect its layout.  Elements that
are hidden still take up the same physical space as they would were
they visible, they are just rendered transparently. This differs from
the behavior of <span class="propinst-display">'display:none'</span>,
in which the element is ignored, as if it were not present in the
document at all. Visibility can be used in a scripting environment to
dynamically display only one of several elements which overlap one
another.</p>

<div class="example"><P>

In the following example, pressing either form button invokes a
user-defined script function that causes the corresponding element to
become visible and the other element to be hidden. Since the
containers occupy the same position, and are the same size, the
effect is that one replaces the other.

<pre>
&lt;HEAD&gt;
&lt;STYLE type=&quot;text/css&quot;&gt;
&lt;!--
   #container1 { position: absolute; top: 2in; left: 2in; width: 2in}
   #container2 { position: absolute; top: 2in; left: 2in; width: 2in;
                 visibility: hidden; }
--&gt;
&lt;/STYLE&gt;
&lt;/HEAD&gt;
&lt;BODY&gt;
&lt;P&gt;Choose a suspect:&lt;/P&gt;
&lt;DIV id=&quot;container1&quot;&gt;
   &lt;IMG width=100 height=100 src=&quot;suspect1.jpg&quot;&gt;
   &lt;P&gt;Name: Al Capone&lt;/P&gt;
   &lt;P&gt;Residence: Chicago&lt;/P&gt;
&lt;/DIV&gt;

&lt;DIV id=&quot;container2&quot;&gt;
   &lt;IMG width=100 height=100 src=&quot;suspect2.jpg&quot;&gt;
   &lt;P&gt;Name: Lucky Luciano&lt;/P&gt;
   &lt;P&gt;Residence: New York&lt;/P&gt;
&lt;/DIV&gt;

&lt;FORM NAME=&quot;myform&quot;&gt;
   &lt;INPUT type=&quot;button&quot; value=&quot;Capone&quot; onclick='show(&quot;container1&quot;);hide(&quot;container2&quot;)'&gt;
   &lt;INPUT type=&quot;button&quot; value=&quot;Luciano&quot; onclick='show(&quot;container2&quot;);hide(&quot;container1&quot;)'&gt;
&lt;/FORM&gt;
</pre>

<P>Note that the <span class="propinst-position">'position'</span>
property of each DIV element has the value 'relative', so the elements
observe the standard <a href="./flowobj.html#flow-model">flow
model</a>. A more visually appealing version of the above might be
designed using overlapping 'absolute' positioned elements:</p>
</div>

<H2><a name="dynamic-positioning">Dynamic positioning</a></H2>
<P>Certain dynamic aspects of managing positioned elements, such
as hiding, displaying and movement can only be performed using an
external scripting language.

<P>This draft does not specify the behavior of dynamic elements in
scripting environments. For example, what happens when an element
having 'width: auto' is repositioned? Do the contents reflow, or do
they maintain their original formatting?  The answer is outside the
scope of this draft, and such behavior is likely to differ in initial
implementations of CSS2.

<H2><a name="filters">Filters</a></H2>
<em>This is a placeholder.</em>
</BODY>
</HTML>