Skip to content

Commit b55717c

Browse files
bert-githubbert-github
committed
[css2] Tantek's edit: overflow when set on BODY may apply to the viewport instead.
--HG-- extra : convert_revision : svn%3A73dc7c4b-06e6-40f3-b4f7-9ed1dbc14bfc/trunk%402054
1 parent b24705d commit b55717c

1 file changed

Lines changed: 91 additions & 60 deletions

File tree

‎css2/visufx.src‎

Lines changed: 91 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -3,38 +3,48 @@
33
<head>
44
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
55
<title>Visual effects</title>
6+
<!-- Changed by: Tantek Celik, 2003-01-27 -->
7+
<style type="text/css">
8+
.current,.proposed,span.delcurrent { background:#feb }
9+
ins.proposed,span.insproposed { background:#bfb }
10+
del.proposed,span.delproposed { background:#fbb }
11+
span.insproposed { text-decoration:underline }
12+
span.delproposed,span.delcurrent { text-decoration:line-through }
13+
body>del,body>ins {display:block}
14+
</style>
615
</head>
716
<body>
817
<h1>Visual effects</h1>
918

10-
<H2><a name="overflow-clipping">Overflow and clipping</a></H2>
19+
<h2><a name="overflow-clipping">Overflow and clipping</a></h2>
1120

12-
<P>Generally, the content of a block box is confined to the
21+
<p>Generally, the content of a block box is confined to the
1322
content edges of the box. In certain cases, a box may <span
1423
class="index-def"
1524
title="overflow|box::overflow"><dfn>overflow</dfn></span>, meaning its
16-
content lies partly or entirely outside of the box, e.g.:</P>
25+
content lies partly or entirely outside of the box, e.g.:</p>
1726

1827
<ul>
1928
<li>A line cannot be broken, causing the line box to be wider than the
2029
block box.
21-
30+
</li>
2231
<li>A block-level box is too wide for the containing block. This may
2332
happen when an
2433
element's <span class="propinst-width">'width'</span> property has a
2534
value that causes the generated block box to spill over
2635
sides of the containing block.
27-
36+
</li>
2837
<li>An element's height exceeds an explicit height assigned to the containing
2938
block (i.e., the containing block's height is determined by the <span
3039
class="propinst-height">'height'</span> property, not by content
3140
height).
32-
41+
</li>
3342
<li>A descendent box is <a href="visuren.html#absolute-positioning">positioned
3443
absolutely</a>, partly outside the box.
35-
44+
</li>
3645
<li>A descendent box has <a href="box.html#margin-properties">negative margins</a>, causing it
3746
to be positioned partly outside the box.
47+
</li>
3848
</ul>
3949

4050
<p>Whenever overflow occurs, the <span
@@ -43,71 +53,86 @@ whether a box is clipped to its content box, and if so, whether
4353
a scrolling mechanism is provided to access any clipped out content.
4454
</p>
4555

46-
<H3><a name="overflow">Overflow</a>: the <span
47-
class="propinst-overflow">'overflow'</span> property</H3>
56+
<h3><a name="overflow">Overflow</a>: the <span
57+
class="propinst-overflow">'overflow'</span> property</h3>
4858

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

51-
<P>This property specifies whether the content of a block-level
61+
<p>This property specifies whether the content of a block-level
5262
element is clipped when it overflows the element's box (which is
5363
acting as a containing block for the content). Values have the
5464
following meanings:</p>
5565

5666
<dl>
5767

58-
<dt><strong>visible</strong>
68+
<dt><strong>visible</strong></dt>
5969

6070
<dd>This value indicates that content is not clipped, i.e., it
6171
may be rendered outside the block box.
72+
</dd>
6273

63-
<dt><strong>hidden</strong>
74+
<dt><strong>hidden</strong></dt>
6475

6576
<dd>This value indicates that the content is clipped and that no
6677
scrolling mechanism should be provided to view the content outside the
6778
clipping region; users will not have access to clipped
6879
content.
80+
</dd>
6981

70-
<dt><strong>scroll</strong>
82+
<dt><strong>scroll</strong></dt>
7183

7284
<dd>This value indicates that the content is clipped and that if the
7385
user agent uses a scrolling mechanism that is visible on the screen
7486
(such as a scroll bar or a panner), that mechanism should be displayed
7587
for a box whether or not any of its content is clipped. This avoids
7688
any problem with scrollbars appearing and disappearing in a dynamic
77-
environment. When this value is specified and the target medium is
78-
'print', overflowing content should be printed.
89+
environment. <!--<span class="delproposed">-->
90+
When this value is specified and the target medium is
91+
'print', overflowing content
92+
<span class="delcurrent">should</span>
93+
<span class="insproposed">may</span> be printed. <!--</span>-->
94+
</dd>
7995

80-
<dt><strong>auto</strong>
96+
<dt><strong>auto</strong></dt>
8197

8298
<dd>The behavior of the 'auto' value is user agent-dependent, but
8399
should cause a scrolling mechanism to be provided for overflowing boxes.
100+
</dd>
84101

85102
</dl>
86103

87-
<P> Even if <span class="propinst-overflow">'overflow'</span> is set
104+
<p> Even if <span class="propinst-overflow">'overflow'</span> is set
88105
to 'visible', content may be clipped to a UA's document window by the
89106
native operating environment.
107+
</p>
108+
109+
<ins class="proposed">
110+
<p>
111+
HTML UAs may apply the overflow property from the BODY or HTML elements to the viewport.
112+
</p>
113+
</ins>
90114

91-
<div class="example"><P>
115+
<div class="example"><p>
92116
Consider the following example of a block quotation
93117
(BLOCKQUOTE) that is too big
94118
for its containing block (established by a DIV). Here is
95119
the source document:</p>
96120

97-
<PRE class="html-example">
121+
<pre class="html-example">
98122
&lt;DIV&gt;
99123
&lt;BLOCKQUOTE&gt;
100124
&lt;P&gt;I didn't like the play, but then I saw
101125
it under adverse conditions - the curtain was up.
102126
&lt;CITE&gt;- Groucho Marx&lt;/CITE&gt;
103127
&lt;/BLOCKQUOTE&gt;
104128
&lt;/DIV&gt;
105-
</PRE>
129+
</pre>
106130

107-
<P>Here is the style sheet controlling the sizes and style of the
131+
<p>Here is the style sheet controlling the sizes and style of the
108132
generated boxes:
133+
</p>
109134

110-
<PRE>
135+
<pre>
111136
div { width : 100px; height: 100px;
112137
border: thin solid red;
113138
}
@@ -121,30 +146,32 @@ cite { display: block;
121146
text-align : right;
122147
border: none
123148
}
124-
</PRE>
149+
</pre>
125150

126-
<P>The initial value of <span
151+
<p>The initial value of <span
127152
class="propinst-overflow">'overflow'</span> is 'visible', so
128-
the BLOCKQUOTE would be formatted without clipping, something like this:</P>
153+
the BLOCKQUOTE would be formatted without clipping, something like this:</p>
129154

130155
<div class="figure">
131-
<P><img src="./images/overflow1.png" alt="Rendered overflow"></p>
156+
<p><img src="./images/overflow1.png" alt="Rendered overflow"></p>
132157
</div>
133158

134-
<P>Setting <span class="propinst-overflow">'overflow'</span> to
159+
<p>Setting <span class="propinst-overflow">'overflow'</span> to
135160
'hidden' for the DIV element, on the other hand, causes the
136161
BLOCKQUOTE to be clipped by the containing block:
162+
</p>
137163

138164
<div class="figure">
139-
<P><img src="./images/overflow2.png" alt="Clipped overflow"></p>
165+
<p><img src="./images/overflow2.png" alt="Clipped overflow"></p>
140166
</div>
141167

142-
<P>A value of 'scroll' would tell UAs that support
168+
<p>A value of 'scroll' would tell UAs that support
143169
a visible scrolling mechanism to display one so that users
144170
could access the clipped content.
171+
</p>
145172
</div>
146173

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

150177
<!--
@@ -163,24 +190,25 @@ href="conform.html#rendered-content">rendered content</a>-->
163190
is visible. By default, the clipping region has the same size and shape
164191
as the element's border box. However, the clipping region may be
165192
modified by the <span class="propinst-clip">'clip'</span> property.
193+
</p>
166194

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

169-
<P>The 'clip' property applies only to absolutely positioned elements.
197+
<p>The 'clip' property applies only to absolutely positioned elements.
170198
<!--that have a <span
171199
class="propinst-overflow">'overflow'</span> property with a value
172200
other than 'visible'-->
173201
Values have the following meanings:</p>
174202

175203
<dl>
176-
<dt><strong>auto</strong>
204+
<dt><strong>auto</strong></dt>
177205
<dd>The clipping region has the same size and location
178206
as the element's box(es).
207+
</dd>
179208

180209
<dt><span class="index-def" title="&lt;shape&gt;::definition of"><a
181210
name="value-def-shape"
182-
class="value-def"><strong>&lt;shape&gt;</strong></a></span>
183-
211+
class="value-def"><strong>&lt;shape&gt;</strong></a></span></dt>
184212
<dd>In CSS&nbsp;2.1, the only valid &lt;shape&gt; value is:
185213
rect (<span
186214
class="value-inst-top">&lt;top&gt;</span>, <span
@@ -199,7 +227,7 @@ offset values with commas. User agents must support separation with
199227
commas, but may also support separation without commas, because a
200228
previous version of this specification was ambiguous in this respect.
201229

202-
<P><span class="index-def" title="&lt;top&gt;::definition of"><a
230+
<p><span class="index-def" title="&lt;top&gt;::definition of"><a
203231
name="value-def-top" class="value-def">&lt;top&gt;</a></span>, <span
204232
class="index-def" title="&lt;right&gt;::definition of"><a
205233
name="value-def-right" class="value-def">&lt;right&gt;</a></span>,
@@ -223,46 +251,48 @@ border widths for <span class="value-inst-right">&lt;right&gt;</span>
223251
class="value-inst-right">&lt;left&gt;</span> in right-to-left text),
224252
such that four 'auto' values result in the clipping region being fit
225253
with the border edge).
226-
227-
<P>When coordinates are rounded to pixel coordinates, care should be
254+
</p>
255+
<p>When coordinates are rounded to pixel coordinates, care should be
228256
taken that no pixels remain visible when &lt;left&gt; and
229257
&lt;right&gt; have the same value (or &lt;top&gt; and &lt;bottom&gt;
230258
have the same value), and conversely that no pixels within the
231259
element's box remain hidden when these values are 'auto'.
260+
</p>
261+
</dd>
232262
</dl>
233263

234-
<P>The element's ancestors may also have clipping regions (e.g. if
264+
<p>The element's ancestors may also have clipping regions (e.g. if
235265
their <span class="propinst-overflow">'overflow'</span> property is
236266
not 'visible'); what is rendered is the intersection of the various
237267
clipping regions.
238-
239-
<P>If the clipping region exceeds the bounds of the UA's
268+
</p>
269+
<p>If the clipping region exceeds the bounds of the UA's
240270
document window, content may be clipped to that window by the
241271
native operating environment.
242-
243-
<div class="example"><P>
244-
The following two rules:</P>
245-
<PRE>
272+
</p>
273+
<div class="example"><p>
274+
The following two rules:</p>
275+
<pre>
246276
p { clip: rect(5px, 40px, 45px, 5px); }
247277
p { clip: rect(5px, 55px, 45px, 5px); }
248-
</PRE>
278+
</pre>
249279

250-
<P>will create the rectangular clipping regions delimited
280+
<p>will create the rectangular clipping regions delimited
251281
by the dashed lines in the following illustrations:</p>
252282

253283
<div class="figure">
254-
<P><IMG src="images/clip.png" alt="Two clipping regions"></p>
284+
<p><img src="images/clip.png" alt="Two clipping regions"></p>
255285
</div>
256286
</div>
257287

258-
<div class="note"><P> <em><strong>Note.</strong> In CSS&nbsp;2.1, all clipping
288+
<div class="note"><p> <em><strong>Note.</strong> In CSS&nbsp;2.1, all clipping
259289
regions are rectangular. We anticipate future extensions to permit
260290
non-rectangular clipping. Future versions may also reintroduce a
261291
syntax for offsetting shapes from each edge instead of offsetting from
262-
a point.</em></div>
292+
a point.</em></p></div>
263293

264-
<H2><a name="visibility">Visibility</a>: the <span
265-
class="propinst-visibility">'visibility'</span> property</H2>
294+
<h2><a name="visibility">Visibility</a>: the <span
295+
class="propinst-visibility">'visibility'</span> property</h2>
266296

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

@@ -274,30 +304,31 @@ suppress box generation altogether). Values have the following
274304
meanings:</p>
275305

276306
<dl>
277-
<dt><strong>visible</strong>
278-
<dd>The generated box is visible.
279-
<dt><strong>hidden</strong>
307+
<dt><strong>visible</strong></dt>
308+
<dd>The generated box is visible.</dd>
309+
<dt><strong>hidden</strong></dt>
280310
<dd>The generated box is invisible (fully transparent), but still
281311
affects layout. Furthermore, descendents of the element will
282-
be visible if they have 'visibility: visible'.
283-
<dt><strong>collapse</strong>
312+
be visible if they have 'visibility: visible'.</dd>
313+
<dt><strong>collapse</strong></dt>
284314
<dd>Please consult the section on
285315
<a href="tables.html#dynamic-effects">dynamic row and column
286316
effects</a> in tables. If used on elements other than rows or columns,
287317
'collapse' has the same meaning as 'hidden'.
318+
</dd>
288319
</dl>
289320

290-
<P>This property may be used in conjunction with scripts to create
321+
<p>This property may be used in conjunction with scripts to create
291322
dynamic effects.
292-
293-
<div class="html-example"><P> In the following example, pressing
323+
</p>
324+
<div class="html-example"><p> In the following example, pressing
294325
either form button invokes a user-defined script function that causes
295326
the corresponding box to become visible and the other to be
296327
hidden. Since these boxes have the same size and position, the effect
297328
is that one replaces the other. (The script code is in a hypothetical
298329
script language. It may or may not have any effect in a CSS-capable
299330
UA.)
300-
331+
</p>
301332
<pre>
302333
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
303334
&lt;HTML&gt;

0 commit comments

Comments
 (0)