=======================================================================
THIS DOCUMENT IS COMPLETELY INCOMPLETE. IT IS PUBLISHED FOR YOUR
INFORMATION AND SO THAT YOU CAN MAKE COMMENTS ON IT.
=======================================================================
GLOSSARY
Since this model is totally writing-system-independent, generic terms
are used to refer to concepts like "width" and "down". Here is a
guide to these words in terms of the western script conventions:
height - block-progression-dimension
width - inline-progression-dimension
vertically - along the block-progression axis
horizontally - along the inline-progression axis
top - before edge
bottom - after edge
left - start edge
right - end edge
up - in the reverse-block-progression direction
down - in the block-progression direction
left to right - in the inline-progression direction
right to left - in the reverse-inline-progression direction
CSS3 is likely to separate what's 'inside' a box from how the box acts
amongst its siblings and its parents, so that, for example, you can
set an element to display:math and it would then act as an inline
element to its siblings and its parent, but internally it would host
MathML; similarly you could set an element to display:svg and it would
act as a block to the outside world but internally it would hold an
SVG rendering context.
Each box in this model (as I understand it, and it's only a draft at
the moment anyway) has an intrinsic width and height which is used if
width is set to auto, or if the outer formatting context is "inline
element".
Formatting Contexts
* block -- the block box model as described by CSS2.
The containing 'block' formatting context (i.e., the box whose
inner formatting context is 'block') has a writing-mode and a
direction. It may also have explicit dimensions. If it does not,
then its intrinsic size in the direction perpendicular to
writing-mode is set from the parent formatting context if that is a
'block' formatting context and the parent formatting context has an
explicit size in that direction.
The intrinsic size of a 'block' formatting context, in the absence
of other constraints, is defined to be the smallest possibly size
that does not result in overflow of the children (excluding allowed
margin overflow), when all the children are given their intrinsic
sizes.
The 'block' display type and the 'width' property explain this in
more detail.
The formatting context may be said to be either bounded or open.
This is defined as follows:
display type bounded?
block [1]
list-item [1]
run-in (as block) [1]
compact (as block) [1]
inline-block yes
table-cell yes
table-caption yes
[1] These display types are said to be bounded if they have
non-zero padding or borders in their writing-mode direction.
Each box in the 'block' formatting context (i.e., each box whose
outer formatting contexts is 'block') has an outer edge and an
intrinsic size. Boxes may have margins in the writing-mode
direction, in which case they are treated specially by the stacking
algorithm.
Boxes are stacked in the writing-mode direction, with their outer
edges touching. If two adjacent boxes have margins, then the
margins should overlap each other as much as possible without
overlapping the boxes' contents. If a box has zero size in the
writing-mode direction, then margins may completely overlap it, and
any margins of its own that it has are overlapped as well. (Note
that for the purposes of treating that box as a containing block
for positioned content, it is assumed to be placed as if it did
have a size.)
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.
If the containing 'block' formatting context is not bounded, then
the margins of all the children boxes until the first box with a
non-zero size in the writing-mode direction are placed outside the
top of the containing 'block' formatting context. Similarly for the
bottom margin.
e.g.:
...if every has a margin of 2em and the writing-mode is top
to bottom, then the result is a block whose intrinsic height is
zero, and which has top and bottom margins of 2em (which will of
course be overlapped when the block is positioned in its outer
formatting context).
The more complex case: if every in the example above has a
margin of -2em and the writing-mode is top to bottom, then the
result is a block whose intrinsic height is zero, and which has top
and bottom margins of -2em (which will of course be overlapped when
the block is positioned in its outer formatting context).
In the direction perpendicular to the writing-mode, boxes are
aligned as per the direction of the formatting context.
* table -- the 'table' formatting context contains rows, columns, and
captions. See CSS2 for details.
* rows -- the 'rows' formatting context contains rows of 'cells'
formatting contexts. See CSS2.
* cells -- the 'cells' formatting context is that which is found
within rows. If the formatting context has no explicit size (as
given by the 'cells' formatting context's grandparent 'table'
formatting context) in the writing-mode direction then that
intrinsic size is the sum of the sizes in that direction of all the
cells in the formatting context.
The exact algorithm for laying out cells in a row is described in
CSS2, and would be inserted somewhere around here.
* column -- see CSS2.
* line -- the 'line' formatting context is the formatting context in
which line boxes are stacked. The size in the 'direction' dimension
of a line box is given by the available space in the parent
formatting context, or, if that is unconstrained, the smallest
possible size required to fit all the line boxes without wrapping.
line boxes are stacked as per
http://www.people.fas.harvard.edu/~dbaron/css/2000/01/dibm
inline -- see
http://www.people.fas.harvard.edu/~dbaron/css/2000/01/dibm
The intrinsic size of an inline box is that given by
mathml
svg
any --
none
float
positioned
Every box has an outer formatting context and an inner formatting
context. In addition, display types can have special Things happen,
for instance list-item creates two boxes.
display type outer fc inner fc notes floatable
none any none [1] no
block block block yes
[ablock] block line
[linebox] line inline
inline inline inline yes
inline-block inline block yes
list-item block block [2] yes
marker inline inline no
run-in (as inline) inline inline [3] yes
run-in (as block) block block [3] yes
compact (as inline) inline inline [3] yes
compact (as block) block block [3] yes
table block table yes
inline-table inline table yes
table-row rows cells no
table-row-group table rows no
table-header-group table rows no
table-footer-group table rows no
table-column column none no
table-column-group table column no
table-cell cells block no
table-caption table block no
svg block svg yes
inline-svg inline svg yes
display-math block mathml yes
math inline mathml yes
(replaced) block none
(text) inline none
[1] Elements with display:none are ignored. This display type should
only be automatically inserted anonymously as a last resort (and
causes all children to be ignored too). The only cases where this
would happen with the above display types are: children of
elements in the 'none' display type, children of 'column'
elements, and nodes that are inserted inside text nodes or
replaced content nodes (e.g., images or applets).
[2] If the computed value of list-style-position is 'outside', this
implies :before { display: marker }.
[3] The rules to determine if a run-in or compact box is inline or
block are given in CSS2.
Setting 'float' to a value other than 'none' when the display type is
floatable causes the outer formatting context of the box to be set to
'float' and the inner formatting context to be set to 'block'. If the
display type is not floatable then 'float' is ignored.
Setting 'position' to 'absolute' or 'fixed' causes the outer
formatting context to be set to 'positioned'.
Outer Formatting Contexts
n/a The element does not exist in the
Inner Formatting Contexts
Implied Formatting Contexts
If an element has an outer formatting context of A and its parent
has an inner formatting context of B, then the minimum number of
anonymous boxes (each with a display type from the list above) that
is required to go from a formatting context of B to a formatting
context of A are inserted as descendants of the parent element and
ancestors of the said element. These anonymous boxes will span as
many elements (and other anonymous boxes) as possible, so for
example two *anonymous* 'table-row' boxes can never be siblings.
Examples (note: these all avoid mentioning text, see below for that
long story):
...will become:
[ablock]
[/ablock]
...will become:
[ablock]
[/ablock]
...will become something like (it's more complex really):
[ablock] [marker][/marker] [/ablock]
=======================================================================
THIS DOCUMENT IS COMPLETELY INCOMPLETE. IT IS PUBLISHED FOR YOUR
INFORMATION AND SO THAT YOU CAN MAKE COMMENTS ON IT.
=======================================================================