8000 csswg-drafts/css-box/Overview.src.html at 343378c1e71db62f6b56a0fd42e6e30c0e00f9ad · w3c/csswg-drafts · GitHub
Skip to content

Overview.src.html

Latest commit

 

History

History
executable file
·
5851 lines (4663 loc) · 212 KB

Overview.src.html

File metadata and controls

executable file
·
5851 lines (4663 loc) · 212 KB
<td>bottom <td>left <td>top <td><img class=minidiagram
src="box-rl-ltr.svg" alt="">
<tr><!-- vertical-rl'' --><th>''rtl'' <td>right <td>top
<td>left <td>bottom <td><img class=minidiagram
src="box-rl-rtl.svg" alt="">
<tr><th rowspan=2>''vertical-lr'' <th>''ltr'' <td>left
<td>bottom <td>right <td>top <td><img class=minidiagram
src="box-lr-ltr.svg" alt="">
<tr><!-- vertical-lr --><th>''rtl'' <td>left <td>top <td>right
<td>bottom <td><img class=minidiagram src="box-lr-rtl.svg"
alt="">
</table>
<p class=note>For example, the “head padding” by default refers to the
'padding-top' and the “end border” is by default the 'border-right'.
<p>Similarly, the specification sometimes refers to the <dfn>inline
dimension</dfn> and <dfn>block dimension</dfn> of a box, instead of
width and height, as follows:
<table class=equiv-table>
<tr>
<th>'Writing mode'
<th>Meaning of “inline dimension”
<th>Meaning of “block dimension”
<tr><td>''horizontal-tb'' <td>width <td>height
<tr><td>''vertical-rl'' <td>height <td>width
<tr><td>''vertical-lr'' <td>height <td>width
</table>
<p>These correspond to the dimensions in the <em>inline base
direction</em> and the <em>block flow direction,</em> respectively.
<p>An alternative term for the inline dimension is <dfn title="logical
width|width!!logical" >logical width</dfn> and an alternative term for
block dimension is <dfn title="logical height|height!!logical"
>logical height.</dfn> These terms occasionally occur in other CSS
modules.
<p class=note>The block dimension of a box is thus the distance
between the head and foot edges, while the inline dimension of the box
is the distance between the start and end edges.
<p>When boxes are laid out in sequence to form a <em class=index
>flow</em> (see below), their edges play different roles in the
alignment of the boxes within that flow. The orientation of the flow
determines which edge of a box is aligned to which edge of another
box. These roles are independent of the orientation of the box
itself. We distinguish four roles for the edges of a box, called
<dfn>A edge,</dfn> <dfn>B edge,</dfn> <dfn>C edge</dfn> and <dfn>D
edge.</dfn> They depend on the 'writing-mode' and 'direction'
properties of the box's <em class=index >containing block</em>
(defined below), and map to the four sides as follows:
<table class=equiv-table>
<thead>
<tr>
<th rowspan=2>'writing-mode' of<br><em>containing block</em>
<th rowspan=2>'direction' of<br><em>containing block</em>
<th colspan=4>Meaning of…
<tr>
<th>“A”
<th>“B”
<th>“C”
<th>“D”
<tbody>
<tr><th rowspan=2>''horizontal-tb'' <th>''ltr''
<td>top <td>right <td>bottom <td>left
<tr><!-- horizontal-tb --><th>''rtl''
<td>top <td>left <td>bottom <td>right
<tr><th rowspan=2>''vertical-rl'' <th>''ltr''
<td>right <td>bottom <td>left <td>top
<tr><!-- vertical-rl --><th>''rtl''
<td>right <td>top <td>left <td>bottom
<tr><th rowspan=2>''vertical-lr'' <th>''rtl''
<td>left <td>bottom <td>right <td>top
<tr><!-- vertical-lr --><th>''ltr''
<td>left <td>top <td>right <td>bottom
</table>
<p class=note>For example, block-level boxes in a flow are laid out
such that the A edge of the first box is against the head edge of the
containing block and then the A edge of each subsequent box is put
against the C edge of its predecessor. For typical English text (i.e.,
<em>horizontal</em> text), this means the top edge (= A edge) of the
first paragraph is at the top edge (= head edge) of the document, the
top (A edge) A90C of the second paragraph is against the bottom (C edge) of
the first paragraph, and so on, until the bottom (C edge) of the last
paragraph becomes the bottom (foot edge) of the document.
<h2>The viewport and the canvas</h2>
<p>User agents for continuous media generally offer users a
<dfn>viewport</dfn> (a window or other viewing area on the screen)
through which users consult a document. User agents may change the
document's layout when the viewport is resized (see the <em>initial
containing block</em>).
<p>When the viewport is smaller than the area of the <em>canvas</em>
(see below) on which the document is rendered, the user agent should
offer a scrolling mechanism. There is at most one viewport per canvas,
but user agents may render to more than one canvas (i.e., provide
different views of the same document).
<p>For all media, the term <dfn>canvas</dfn> describes the space where
the formatting structure is rendered. The canvas is infinite for each
dimension of the space.
<h2 id=flows>Flows</h2>
<p>The <dfn>flow</dfn> (sometimes called <dfn>normal flow</dfn>) is
one of the two basic kinds of layout in CSS, together with line layout
[[CSS3LINE]]. It can be used, e.g., to layout a sequence of
paragraphs, headings, lists and floated elements in a single
column. Other CSS modules, such as tables [[CSS3TBL]], positioning
[[CSS3POS]], flex boxes [[CSS3-FLEXBOX]] and grid templates
[[CSS3LAYOUT]], build on the flow model by defining ways to split a
document into more than one flow and positioning and aligning those
flows in various ways on the canvas.
<p>A flow is constructed starting from a <span class=index title="flow
root!!box" >box</span> called the <dfn>flow root</dfn> by the <a
href="#construct-flow">rules below.</a> We say the flow is
<dfn>channeled</dfn> by the flow root.
<p class=issue>Are there more intuitive names than flow root?
<p>The <dfn title="initial flow|flow!!initial" >initial flow</dfn> is
the flow that contains the root of the box tree.
<p>Despite not being a box, the <em>initial containing block</em> is
said to be the flow root of the initial flow.
<p class=issue id=pagination-issue>How do we model pagination? If a
flow is broken over two pages or columns, do we call it a single flow
or two flows? I.e., is the page box the flow root of the flow, or is
the page box something else, more like the viewport, which influences
the layout of a flow but isn't part of it?
<p>Only <em title="block container box" >block container boxes</em>
(defined below) can be flow roots. (Which implies that the children of
a flow root are laid out in a <em>block formatting context.</em>)
<p>Several (combinations of) properties cause an element to generate
boxes that are flow roots. This module defines a few. Other modules
may define more.
<div class=note>
<p>For example, this module defines that any of the following make a
box into a flow root:
<ul>
<li>The value of 'float' is not 'none'.
<li>The used value of 'overflow' is not 'visible'.
<!-- <li>The box is a table wrapper, a table cell, an inline block, or an
align box. -->
<!-- <li>The value of 'position' is 'absolute' or 'fixed' (see
[CSS3POS]). -->
<li>The box is vertical and its parent is horizontal. <span
class=issue>[Add link to the relevant section.]</span>
<li>The box is horizontal and its parent is vertical.
<!-- <li>The value of 'transform' is not 'none'. -->
<li>The value of 'child-align' is not 'auto'. <span class=issue>[If
'child-align' is adopted, rather than, say, 'margin: fill']</span>
</ul>
<p>The table layout module [[CSS3TBL]] defines that a table cell
generates a box that is a flow root; the positioning module
[[CSS3POS]] defines that an absolutely positioned element generates a
flow root; the grid template module [[CSS3LAYOUT]] defines that a
template element generate several flow roots; and the transforms
module [[CSS3-TRANSFORMS]] defines that an element with a transform
generates a flow root
</div>
<p class=mtb id=construct-flow>The flow of a given <em>flow root</em>
is a set of boxes. A box belongs to the flow if all of the following
are true:
<ol>
<li>The used value of its 'display' is ''block'', ''list-item'' or
''table''.
<li>The used value of its 'float' is ''none''.
<li>The used value of its 'position' is ''static'' or ''relative''.
<li>It is either a child of the flow root or a child of a box that
belongs to the flow.
</ol>
<p class=note>Note that the flow root is itself not part of the flow
it channels and that each flow root channels at most one flow.
<p class=note>Note that the last rule above implies that a flow with
its flow root together are always a connected subset of the box
tree. In other words; together, they form a subtree of the box tree
with possibly some branches removed.
<p class=note>Note that the element tree and the box tree are not
necessarily parallel: the element a box belongs to need not be the
child of the element that generated the box's parent. E.g., run-in
elements may generate boxes that become children of boxes from sibling
elements; and the 'flow' property [[CSS3LAYOUT]] and the 'position'
property [[CSS3POS]] may cause an element to generate a box that
becomes the child of a box from a grandparent or other ancestor
element. E.g., 'DIV {flow: b}' (see [[CSS3LAYOUT]]) makes the DIV
generate boxes that become children of the box generated by slot b in
some ancestor. And 'DIV {position: absolute}' causes the DIV to
generate a box that becomes a child of the box generated by the
ancestor that established the DIV's <em>containing block.</em>
<div class=example>
<p>For example, the fragment
<pre>&lt;div class=sidebar&gt;
&lt;p&gt;Text in a sidebar.
&lt;p&gt;Here is quote:
&lt;blockquote lang=ja&gt;
&lt;p&gt;...
&lt;/blockquote&gt;
&lt;p&gt;Etc. etc.
&lt;/div&gt; </pre>
<p>with the style
<pre>div.sidebar { writing-mode: tb; float: left }
blockquote[lang|=ja] { writing-mode: rl; height: 10em }</pre>
<p>defines two flows:
<ol>
<li>The <code>div</code> is a flow root, because it floats. Its flow
consist of the 1st, 2nd and 4th <code>p</code> and the
<code>blockquote</code>.
<li>The <code>blockquote</code> is a <em>vertical</em> box inside a
<em>horizontal</em> parent and it is thus a flow root. Its flow is
formed by the 3rd <code>p</code>.
</ol>
<p>(The <code>div</code> itself belongs to a third flow, but its flow
root is not shown in the fragment.)
</div>
<p class=note>Note that a flow root is not necessarily block-level, it may
be an ''inline-block'', e.g.
<p class=note>Note that a box belongs to at most one flow. (Some boxes
do not belong to any flow, because they are part of a different kind of
layout, such as table layout.)
<p>An element that generates a flow root box is itself also called a
<span class=index title="flow root!!element">flow root.</span>
<p class=note>Note: The terminology in the CSS level 2 specification
is different. A flow root is called “an element that establishes a
<span class=index title="formatting context|new formatting
context">new formatting context.</span>”
<p class=note>A consequence of this terminology is that an
<em>element,</em> unlike a box, can be the flow root of several
flows. E.g., template elements [[CSS3LAYOUT]] generate several flow
root boxes. Depending on what properties are set on a list item and on
its marker pseudo-element, a list item can also generate zero, one or
two flow roots.
<!--
<p class=mtb>The following rules define the position of
<em>block-level</em> boxes relative to the box that is their <em>flow
root.</em> Other sections and other modules describe how other boxes
are laid out. E.g., floating boxes are described further down in this
module and absolutely positioned boxes are described in the Absolute
Positioning module [[CSS3POS]].
<p>Before applying these rules, the width, height and margins of each
box must be computed as described in the sections <a
href="#Calculating">“Calculating widths, heights and margins”</a>
and <a href="#Collapsing">“Collapsing margins.”</a>
<ul>
<li>
<p>Consider the first box (in document order) of a set of sibling
boxes that all belong to the same flow. There are four cases:
<ol>
<li>
<p>If none of its margins <span>collapse</span> with its
parent's <span>head</span> margin and the box is not
<span>collapsed through,</span> then the box is placed such
that the box's margin <span>A edge</span> coincides with the
parent's <span>head</span> <span>content edge</span>, the
margin <span>D edge</span> touches the parent's
<span>start</span> <span>content edge</span> and the margin
<span>B edge</span> touches the parent's <span>end</span>
<span>content edge.</span>
<div class=figure>
<p><img src="flow1.png" alt="For example:">
View remainder of file in raw view