[CSS21] Distinguishing block boxes, block containers, and block-level elements

CSS2.1 Issue 120
   http://wiki.csswg.org/spec/css2.1#issue-120

The approach taken is to define existing terms more precisely, define a
couple of new terms, and use all of these terms more accurately throughout
the specification. Errors that were corrected include use of "block-level"
when "block box" was meant and vice versa, use of "inline-level" when
"inline box" was meant and vice versa, lists that mistakenly left out
table-cells or table-captions, and lists that mistakenly left out inline
blocks or inline tables.

These changes also make CSS easier to extend with new layout models,
as they make the text less dependent on specific 'display' values by
consistently using terms that capture key distinctions in how boxes
behave.

Proposed changes follow:

Section 8.3.1 Collapsing margins

   # Two or more adjoining vertical margins of block boxes in the normal
   # flow collapse.

   s/block boxes/block-level box/

   # The top margin of an in-flow block-level element is adjoining to its
   # first in-flow block-level child's top margin

   s/block-level element/block box/

   # The bottom margin of an in-flow block-level element with a 'height'
   # of 'auto'

   s/block-level element/block box/

Section 9.2.1 Block-level elements and block boxes

   Replace

   # Block-level elements (...) generate a principal block box that
   # contains either only block boxes or only inline boxes. The
   # principal block box establishes the containing block for descendant
   # boxes and generated content and is also the box involved in any
   # positioning scheme. Principal block boxes participate in a block
   # formatting context.

   with

   | Block-level elements generate a principal block-level box that
   | contains descendant boxes and generated content and is also
   | the box involved in any positioning scheme.

   and append contents of the next paragraph:

   # Some block-level elements generate additional boxes outside of the
   # principal box: 'list-item' elements. These additional boxes are
   # placed with respect to the principal box.

   Start a new paragraph.

   | Except for 'table' elements, which are described in a later chapter,
   | and replaced elements, the principal block-level box is also a
   | <dfn>block container box</dfn>. A block container box contains either
   | only block-level boxes or only inline-level boxes. Boxes that are
   | block-level block containers are called <dfn>block boxes</dfn>.
   | Inline blocks, table cells, and table captions are also block
   | container boxes, but are not block-level boxes. Replaced block-level
   | boxes are considered block boxes, but are not block container boxes.
   |
   | The three terms 'block-level box', 'block container box', and
   | 'block box' are sometimes abbreviated as 'block' where unambiguous.

   The effects of these changes are to define three terms:
     block-level box or element
     block container box
     block box ( = block-level block container box or replaced block-level box)

Section 9.2.1.1 Anonymous block boxes

   # In other words: if a block box (such as that generated for the DIV
   # above) has another block box or run-in box inside it (such as the P
   # above), then we force it to have only block boxes and run-in boxes
   # inside it.

   s/another block box or run-in box/a block-level box/
   s/only block boxes and run-in boxes/only block-level boxes/

   # When an inline box contains a block box, the inline box (and its
   # inline ancestors within the same line box) are broken around the
   # block. The line boxes before the break and after the break are
   # enclosed in anonymous boxes, and the block box becomes a sibling
   # of those anonymous boxes. When such an inline box is affected by
   # relative positioning, the relative positioning also affects the
   # block box.

   s/block/block-level/g

Section 9.2.2 Inline-level elements and inline boxes

   # Several values of the 'display' property make an element inline:

   s/inline/inline-level/

   # 'inline', 'inline-table', 'inline-block' and 'run-in' (part of
   # the time; see run-in boxes). Inline-level elements generate
   # inline boxes.

   Replace "inline boxes" with "inline-level boxes, which participate
   in an inline formatting context".

   Append a new paragraph:

   | An <dfn>inline box</dfn> is one that is both inline-level and whose
   | children (if any) would participate in its containing inline formatting
   | context. For non-replaced elements, a 'display' value of 'inline' and
   | sometimes 'run-in' (when it is not creating a block box) generates an
   | inline box. Inline-level boxes that are not inline boxes (such as
   | replaced inline elements, inline-block elements, and inline-table
   | elements) are called <dfn>atomic inline boxes</dfn> because they
   | participate in their inline formatting context as a single opaque box.

   The effects of this change is to define three terms:
     inline-level box or element
     inline box or inline
     atomic inline box
       (we can pick a different term, this is just what I came up with)

Section 9.2.3 Run-in boxes

   # If the run-in box contains a block box

   s/block/block-level/

Section 9.2.4 The 'display' property

   # inline-block
   #   This value causes an element to generate a block box, which itself
   #   is flowed as a single inline box, similar to a replaced element.
   #   The inside of an inline-block is formatted as a block box, and the
   #   element itself is formatted as an inline replaced element.

   s/generate a block/generate an inline-level block container, i.e. a block/
   s/single inline/single inline-level/

Section 9.3 Positioning Schemes

   # Normal flow. In CSS 2.1, normal flow includes block formatting of
   # block boxes, inline formatting of inline boxes, relative positioning
   # of block or inline boxes, and positioning of run-in boxes.

   s/block boxes/block-level boxes/
   s/inline boxes/inline-level boxes/
   s/block or inline/block-level and inline-level/

Section 9.4 Normal flow

   # Block boxes participate in a block formatting context. Inline boxes
   # participate in an inline formatting context.

   s/Block boxes/Block-level boxes/
   s/Inline boxes/Inline-level boxes/

Section 9.4.1 Block formatting contexts

   Replace

   # Floats, absolutely positioned elements, inline-blocks, table-cells,
   # table-captions, and elements with 'overflow' other than 'visible'

   with

   | Floats, absolutely positioned elements, block containers (such as
   | inline-blocks, table-cells, and table-captions) that are not block
   | boxes, and block boxes with 'overflow' other than 'visible'

   # Vertical margins between adjacent block boxes in a block formatting
   # context collapse.

   s/block boxes/block-level boxes/

Section 9.4.2 Inline formatting context

   # When several inline boxes cannot fit

   s/inline/inline-level/

   # When the total width of the inline boxes on a line

   s/inline/inline-level/

   # (except for inline-table and inline-block boxes)

   s/except for/but not/

   # When an inline box exceeds

   s/an inline/a non-replaced inline/

Section 9.5 Floats

   # In other words, if inline boxes are placed on the line ... and
   # then the inline boxes already on the line

   s/inline/inline-level/g

   # The outer top of a floating box may not be higher than the outer
   # top of any block or floated box

   s/block/block-level/

Section 9.5.2 Controlling flow next to floats: the 'clear' property

   # Values have the following meanings when applied to non-floating
   # block boxes

   s/block/block-level/


Section 9.9.1 Specifying the stack level: the 'z-index' property

   Replace

   # The contents of inline blocks and inline tables are stacked as

   with

   | The contents of atomic inlines such as inline blocks and inline
   | tables are stacked as

Section 9.10 Text direction: the 'direction' and 'unicode-bidi' properties

   # User agents that support bidirectional text must apply the Unicode
   # bidirectional algorithm to every sequence of inline boxes
   # uninterrupted by a forced line break or block boundary.

   s/inline/inline-level/

   # For the 'direction' property to affect reordering in inline-level
   # elements

   s/inline-level/inline/

   # For inline-level elements, implicit reordering works across elemen
   # boundaries.

   s/inline-level/inline/

   # If the element is inline-level

   s/inline-level/inline/

   # For inline-level elements this creates an override.

   s/inline-level/inline/

   # For block-level, table-cell, table-caption, or inline-block elements
   # this creates an override for inline-level descendants not within
   # another block-level, table-cell, table-caption, or inline-block element.

   s/block-level, table-cell, table-caption, or inline-block/block container/g

   # The final order of characters in each block-level element

   s/block-level element/block container/

Section 10.1 Definition of "containing block'

   # For other elements, if the element's position is 'relative' or 'static',
   # the containing block is formed by the content edge of the nearest
   # block-level, table cell or inline-block ancestor box.

   s/block-level, table cell or inline-block/block container/

   # In the case that the ancestor is inline-level

   s/inline-level/an inline box/

Section 10.2 Content width: the 'width' property

   # This property specifies the content width of boxes generated by
   # block-level and replaced elements.

   s/generated by block-level and replaced elements//

   # This property does not apply to non-replaced inline-level elements.

   s/inline-level/inline/

   # For absolutely positioned elements whose containing block
   # is based on a block-level element

   s/block-level/block container/

Section 10.5 Content height: the 'height' property

   # This property specifies the content height of boxes generated
   # by block-level, inline-block and replaced elements.

   s/generated by block-level, inline-block and replaced elements//

   # This property does not apply to non-replaced inline-level elements.

   s/inline-level/inline/

Section 10.8 Line height calculations: the 'line-height' and 'vertical-align'

   # user agents flow inline boxes into a vertical stack of line boxes

   s/inline/inline-level/

   # The height of each inline box in the line box

   s/inline/inline-level/

   # The inline boxes are aligned vertically

   s/inline/inline-level/

Section 10.8.1 Leading and half-leading

   # On a block-level, table-cell, table-caption or inline-block element
   # whose content is composed of inline-level element

   s/block-level, table-cell, table-caption or inline-block/block container/

   # On an inline-level element, 'line-height' specifies the height

   s/inline-level/inline/

   # The following values only have meaning with respect to a
   # parent inline-level element, or to the strut of a parent
   # block-level, table-cell, table-caption or inline-block element.

   s/inline-level/inline/

   s/block-level, table-cell, table-caption or inline-block/block container/

Section 11.1.1 Overflow: the 'overflow' property

   # This property specifies whether content of a block-level element
   # is clipped

   s/block-level/block container/

Section 13.3.2 Breaks inside elements: 'orphans', 'widows'

   s/block-level/block container/g

   s/block element/block container/g

Section 13.3.3 Allowed page breaks

   # In the vertical margin between block boxes.

   s/block/block-level/

   # Between line boxes inside a block box.

   s/block/block container/

   # Between the content edge of a block box

   s/block/block container/

Section 16.1 Indentation: the 'text-indent' property

   # Applies to: block-level elements, table cells and inline blocks

   Replace with

   | Applies to: block containers

   # This property specifies the indentation of the first line of text
   # in a block.

   s/block/block container/

Section 16.2 Alignment: the 'text-align'

   # Applies to: block-level elements, table cells and inline blocks

   Replace with:

   | Applies to: block containers

   # This property describes how inline content of a block is aligned.

   s/inline/inline-level/
   s/block/block container/

   # this property specifies how the inline boxes within each line box

   s/inline/inline-level/

   # that the inline boxes are to be made flush with both sides of the block.

   s/inline/inline-level/
   s/block/block container/

Section 16.6.1 The 'white-space' processing model

   # Any text that is directly contained inside a block element (not
   # inside an inline element) should be treated as an anonymous inline
   # element.

   s/block/block container/

   # Then, the entire block is rendered. Inlines are laid out

   Replace with

   | Then, the block container's inlines are laid out

Section 17.5.4 Horizontal alignment in a column

   # The horizontal alignment of a cell's inline content within a cell box

   s/a cell's inline content/inline-level content/

Section 5.12.1 The :first-line pseudo-element

   # The :first-line pseudo-element can only be attached to a block-level
   # element, inline-block, table-caption or a table-cell.

   s/block-level ... table-cell/block container element/

Section 5.12.2 The :first-letter pseudo-element

   # The :first-letter pseudo-element applies to block, list-item,
   # table-cell, table-caption and inline-block elements.

   s/block ... inline-block elements/block container elements/

~fantasai

Received on Wednesday, 21 July 2010 07:17:32 UTC