8000 csswg-drafts/css2/visuren.src at fd1d820a429e00def87b54554a9d619a895ab979 · w3c/csswg-drafts · GitHub
Skip to content

visuren.src

Latest commit

 

History

History
2244 lines (1988 loc) · 85.7 KB

visuren.src

File metadata and controls

2244 lines (1988 loc) · 85.7 KB
href="visudet.html#abs-replaced-height">height</a> of absolutely
positioned, replaced elements for details.
</dd>
</dl>
<h2><a name="normal-flow">Normal flow</a></h2>
<p>Boxes in the normal flow belong to a <span class="index-def"
title="formatting context">formatting context</span>, which may be
block or inline, but not both simultaneously. <a
href="#block-box">Block</a> boxes participate in a <a
href="#block-formatting">block formatting</a> context. <a
href="#inline-box">Inline boxes</a> participate in an <a
href="#inline-formatting">inline formatting</a> context.
</p>
<h3><a name="block-formatting">Block formatting contexts</a></h3>
<p>Floats, absolutely positioned elements, inline-blocks, table-cells,
table-captions, and elements with 'overflow' other than 'visible'
(except when that value has been propagated to the viewport) establish
new block formatting contexts.</p>
<p>In a block formatting context, boxes are laid out one after the
other, vertically, beginning at the top of a containing block. The
vertical distance between two sibling boxes is determined by the <span
class="propinst-margin">'margin'</span> properties. Vertical margins
between adjacent block boxes in a block formatting context <a
href="box.html#collapsing-margins">collapse</a>.
</p>
<p>
In a block formatting context, each box's left outer edge touches the
left edge of the containing block (for right-to-left formatting, right
edges touch). This is true even in the presence of floats (although a
box's <em>line boxes</em> may shrink due to the floats), unless the box
establishes a new block formatting context (in which case the box itself
<a href="#bfc-next-to-float"><em>may</em> become narrower</a> due to
the floats).
</p>
<p>For information about page breaks in paged media, please consult
the section on <a href="page.html#allowed-page-breaks& DD59 quot;>allowed
page breaks</a>.
</p>
<h3><a name="inline-formatting">Inline formatting context</a></h3>
<p>In an inline formatting context, boxes are laid out horizontally,
one after the other, beginning at the top of a containing
block. Horizontal margins, borders, and padding are respected between
these boxes. The boxes may be aligned vertically in different ways: their
bottoms or tops may be aligned, or the baselines of text within them
may be aligned. The rectangular area that contains the boxes that form
a line is called a <span class="index-def" title="line box"><a
name="line-box"><dfn>line box</dfn></a></span>.
</p>
<p>The width of a line box is determined by a <a
href="#containing-block">containing block</a> and the presence of floats.
The height of a line
box is determined by the rules given in the section on <a
href="visudet.html#line-height">line height calculations</a>.
</p>
<p>A line box is always tall enough for all of the boxes it contains.
However, it may be taller than the tallest box it contains
(if, for example, boxes are aligned so that baselines line up).
When the height of a box B is less than the height of the line box containing it,
the vertical alignment of B within the line box is determined by
the 'vertical-align' property.
When several inline boxes cannot fit horizontally within a single
line box, they are distributed among two or more vertically-stacked
line boxes. Thus, a paragraph is a vertical stack of line boxes. Line
boxes are stacked with no vertical separation and they never overlap.
</p>
<p>In general, the left edge of a line box touches the left edge
of its containing block and the right edge touches the right edge of
its containing block. However, floating boxes may come between the
containing block edge and the line box edge. Thus, although line
boxes in the same inline formatting context generally have the same
width (that of the containing block), they may vary in width if
available horizontal space is reduced due to <a
href="#floats">floats</a>. Line boxes in the same inline formatting
context generally vary in height (e.g., one line might contain a tall
image while the others contain only text).
</p>
<p>When the total width of the inline boxes on a line is less than the
width of the line box containing them, their horizontal distribution
within the line box is determined by the <span
class="propinst-text-align">'text-align'</span> property. If that
property has the value 'justify', the user agent may stretch spaces
and words in inline boxes (except for inline-table and inline-block
boxes) as well.
</p>
<p>
When an inline box exceeds the width of a line box, it is split into several boxes and these boxes are distributed across several line boxes. If an inline box cannot be split (e.g. if the inline box contains a single character, or language specific word breaking rules disallow a break within the inline box, or if the inline box is affected by a white-space value of nowrap or pre), then the inline box overflows the line box.
</p>
<p>
When an inline box is split, margins,
borders, and padding have no visual effect where the split occurs (or
at any split, when there are several).
</p>
<p>Inline boxes may also be split into several boxes <em>within the
same line box</em> due to <a href="#direction">bidirectional text
processing</a>.
</p>
<p>Line boxes that contain no text, no preserved white space, no
inline elements with non-zero margins, padding, or borders, and no
other in-flow content (such as images, inline blocks or inline
tables), and don't end with a line feed must be treated as zero-height
line boxes. For the purposes of margin collapsing, this line box must
be ignored.
</p>
<div class="html-example"><p>
Here is an example of inline box construction. The following paragraph
(created by the HTML block-level element P) contains anonymous text
interspersed with the elements EM and STRONG:
</p>
<pre><code class="html">
&lt;P&gt;Several &lt;EM&gt;emphasized words&lt;/EM&gt; appear
&lt;STRONG&gt;in this&lt;/STRONG&gt; sentence, dear.&lt;/P&gt;
</code></pre>
<p>The P element generates a block box that contains five inline
boxes, three of which are anonymous:</p>
<ul>
<li>Anonymous: "Several"</li>
<li>EM: "emphasized words"</li>
<li>Anonymous: "appear"</li>
<li>STRONG: "in this"</li>
<li>Anonymous: "sentence, dear."</li>
</ul>
<p>To format the paragraph, the user agent flows the five boxes into
line boxes. In this example, the box generated for the P element
establishes the containing block for the line boxes. If the containing
block is sufficiently wide, all the inline boxes will fit into a
single line box:
</p>
<pre>
Several <em>emphasized words</em> appear <strong>in this</strong> sentence, dear.
</pre>
<p>If not, the inline boxes will be split up and distributed across
several line boxes. The previous paragraph might be split as follows:
</p>
<pre>
Several <em>emphasized words</em> appear
<strong>in this</strong> sentence, dear.
</pre>
or like this:
<pre>
Several <em>emphasized</em>
<em>words</em> appear <strong>in this</strong>
sentence, dear.
</pre>
</div>
<p>In the previous example, the EM box was split into two EM boxes
(call them "split1" and "split2"). Margins, borders,
padding, or text decorations have no visible effect after split1 or
before split2.
</p>
<div class="html-example"><p>
Consider the following example:
</p>
<pre><code class="html">
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
&lt;HTML&gt;
&lt;HEAD&gt;
&lt;TITLE&gt;Example of inline flow on several lines&lt;/TITLE&gt;
&lt;STYLE type="text/css"&gt;
EM {
padding: 2px;
margin: 1em;
border-width: medium;
border-style: dashed;
line-height: 2.4em;
}
&lt;/STYLE&gt;
&lt;/HEAD&gt;
&lt;BODY&gt;
&lt;P&gt;Several &lt;EM&gt;emphasized words&lt;/EM&gt; appear here.&lt;/P&gt;
&lt;/BODY&gt;
&lt;/HTML&gt;
</code></pre>
<p>Depending on the width of the P, the boxes may be distributed as
follows:</p>
<div class="figure">
<p><img src="./images/inline-layout.png"
alt="Image illustrating the effect of line breaking on the
display of margins, borders, and padding."></p>
</div>
<ul>
<li> The margin is inserted before "emphasized" and after "words". </li>
<li> The padding is inserted before, above, and below
"emphasized" and after, above, and below "words". A
dashed border is rendered on three sides in each case.</li>
</ul>
</div>
<h3><a name="relative-positioning">Relative positioning</a></h3>
<p>Once a box has been laid out according to the <a
href="#normal-flow">normal flow</a> or floated, it may be shifted relative to
this position. This is called <span class="index-def" title="relative
positioning"><dfn>relative positioning</dfn></span>. Offsetting a box
(B1) in this way has no effect on the box (B2) that follows: B2 is
given a position as if B1 were not offset and B2 is not re-positioned
after B1's offset is applied. This implies that relative positioning
may cause boxes to overlap.
However, if relative positioning causes an 'overflow:auto' or
'overflow:scroll' box to have
overflow, the UA must allow the user to access this content (at its offset
position), which, through the creation of scrollbars, may affect layout.
</p>
<p>A relatively positioned box keeps its normal flow size, including
line breaks and the space originally reserved for it. The section on
<a href="#containing-block">containing blocks</a> explains when a
relatively positioned box establishes a new containing block.
</p>
<p>For relatively positioned elements, 'left' and 'right' move the
box(es) horizontally, without changing their size. 'left' moves the
boxes to the right, and 'right' moves them to the left. Since boxes
are not split or stretched as a result of 'left' or 'right', the
computed values are always: left = -right.
</p>
<p>If both 'left' and 'right' are 'auto' (their initial values), the
computed values are '0' (i.e., the boxes stay in their original
position).
</p>
<p>If 'left' is 'auto', its computed value is minus the value of 'right'
(i.e., the boxes move to the left by the value of 'right').
</p>
<p>If 'right' is specified as 'auto', its computed value is minus the
value of 'left'.
</p>
<p>If neither 'left' nor 'right' is 'auto', the position is
over-constrained, and one of them has to be ignored. If the 'direction' property of the containing block is 'ltr, the value of 'left' wins and 'right'
becomes -'left'. If 'direction' of the containing block is 'rtl', 'right' wins and 'left' is ignored.
</p>
<div class="example">
<p><strong>Example.</strong> The following three rules are equivalent:
</p>
<pre><code class="css">
div.a8 { position: relative; direction: ltr; left: -1em; right: auto }
div.a8 { position: relative; direction: ltr; left: auto; right: 1em }
div.a8 { position: relative; direction: ltr; left: -1em; right: 5em }
</code></pre>
</div>
<p>The 'top' and 'bottom' properties move relatively positioned
element(s) up or down without changing their size. 'top' moves the
boxes down, and 'bottom' moves them up. Since boxes
are not split or stretched as a result of 'top' or 'bottom', the
computed values are always: top = -bottom.
If both are 'auto', their computed values are both '0'. If one of them is
'auto', it becomes the negative of the other. If neither is 'auto',
'bottom' is ignored (i.e., the computed value of 'bottom' will be
minus the value of 'top').
</p>
<p class="note">
Note.
Dynamic movement of relatively positioned boxes can produce
animation effects in scripting environments (see also the <span
class="propinst-visibility">'visibility'</span> property).
Although relative positioning may be used as a form of superscripting and
subscripting, the line height is not automatically adjusted to take the
positioning into consideration. See the description of <a
href="visudet.html#line-height">line height calculations</a> for more
information.
</p>
<p>Examples of relative positioning are provided in the section <a
href="#comparison">comparing normal flow, floats, and absolute
positioning</a>.
</p>
<h2><a name="floats">Floats</a></h2>
<p>A float is a box that is shifted to the left or right on the
current line. The most interesting characteristic of a float (or
"floated" or "floating" box) is that content may flow along its side
(or be prohibited from doing so by the <span
class="propinst-clear">'clear'</span> property). Content flows down
the right side of a left-floated box and down the left side of a
right-floated box. The following is an introduction to float
positioning and content flow; the exact <a
href="#float-rules">rules</a> governing float behavior are given in
the description of the <span class="propinst-float">'float'</span>
property.
</p>
<p>
A floated box is
shifted to the left or right until its outer edge touches the
containing block edge or the outer edge of another float.
If there's a line box, the top of the floated box is aligned with
the top of the current line box.
</p>
<p>
If there isn't enough horizontal room for the
float, it is shifted downward until either it fits or there are no
more floats present.
</p>
<p>Since a float is not in the flow, non-positioned block boxes
created before and after the float box flow vertically as if the float
didn't exist. However, line boxes created next to the float are
shortened to make room for margin box of the float. If a shortened line box
is too small to contain any further content, then it is shifted downward until
either it fits or there are no more floats present.
Any content in the current line before a floated box is reflowed
in the first available line on the other side of the float.
In other words, if inline boxes are placed
on the line before a left float is encountered that fits in the remaining line box space,
the left float is placed on that line, aligned with the top of the line box, and then the inline boxes already on the line are moved accordingly to the right of the float (the right being the other side of the left float) and vice versa for rtl and right floats.
</p>
<p id="bfc-next-to-float">
The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new <a href="visuren.html#block-formatting">block formatting context</a>
(such as an element with 'overflow' other than 'visible')
must not overlap any floats in the same block formatting context as
the element itself. If necessary, implementations should clear the
said element by placing it below any preceding floats, but may place
it adjacent to such floats if there is sufficient space.
They may even make the border box of said element narrower than
defined by <a href="visudet.html#blockwidth">section&nbsp;10.3.3.</a>
CSS2 does not define when a UA may put said element next to the float
or by how much said element may become narrower.
</p>
<div class="example">
<p><strong>Example.</strong>
In the following document fragment, the containing block is too narrow
to contain the content next to the float,
so the content gets moved to below the floats
where it is aligned in the line box according to the text-align
View remainder of file in raw view