Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 23 additions & 10 deletions css-multicol-2/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -360,7 +360,9 @@ The multi-column model</h2>

The column boxes are ordered
in the [=inline base direction=] of the multicol container
and arranged into <dfn lt="multi-column line | multi-col line | multicol line">multicol lines</dfn>.
and arranged into <dfn lt="multi-column row | multi-col row | multicol row">multicol rows</dfn>.
A multicol row contains at least one <dfn lt="multi-column line | multi-col line | multicol line">multicol line</dfn>
or spanning element.
The <dfn export>column width</dfn> is the length of the column box in the inline direction.
The <dfn export>column height</dfn> is the length of the column box in the block direction.
All column boxes in a line have the same column width,
Expand Down Expand Up @@ -529,28 +531,36 @@ The multi-column model</h2>
hit-test-in-vertical-rl.html
</wpt>

Within each [=multicol line=] in the multi-column container,
In the inline direction, within each [=multicol line=] in the multi-column container,
adjacent column boxes are separated by a <dfn noexport>column gap</dfn>,
which may contain a <dfn noexport>column rule</dfn>.
In the block direction, [=column rows=] are separated by a <dfn noexport>row gap</dfn>,
which may contain a <dfn noexport>row rule</dfn>.
All column gaps in the same multi-column container are equal.
All column rules in the same multi-column container are also equal, if they appear;
column rules only appear between columns that both have content.

In the simplest case a multicol container will contain only one line
of columns, and the height of each column will be equivalent to the
In the simplest case a multicol container will contain only one line of columns,
inside one multicol row, and the height of each column will be equivalent to the
used height of the multi-column container's content box.
However, [=fragmentation=] or [=spanners=]
can split the content of the [=multi-column container=]
can split the content of the [=multicol row=]
into multiple [=multicol lines=].

If the multi-column container is paginated, the height of each column is
constrained by the page and the content continues in a new line of
column boxes on the next page; a column box never splits across pages.

The same effect occurs when a <i>spanning element</i> divides the
multi-column container: the columns before the spanning element are
If a multi-column container in continuous media is set to wrap,
the height of each column is defined by the 'column-height' property.
If there is more content than will fit in a single row a new multicol row is created
in the block direction, with columns of the size defined by the 'column-height' property.

When a <i>spanning element</i> divides the
multi-column container: a new multicol line is created.
The columns before the spanning element are
balanced and shortened to fit their content. Content after the
spanning element then flows into a new, subsequent line of column boxes.
spanning element then flows into a new, subsequent multicol line of column boxes.

<div class="example">
<figure>
Expand All @@ -559,10 +569,13 @@ The multi-column model</h2>
</figure>
</div>

Issue(11976): This issue deals with the scenario where there is not enough space
in the current multicol row for a spanning element. Once resolved, add details here.

A [=multi-column container=] therefore is a regular [=block container=]
that establishes a new [=independent formatting context=]
whose contents consist of a series of
[=multicol lines=] and multicol spanners.
whose contents consist of one or more
[=multicol rows=], containing [=multicol lines=] and multicol spanners.
Each [=multi-column line=] acts as a [=block-level box=]
that establishes a <dfn>multi-column formatting context</dfn>
for its [=column boxes=];
Expand Down