Skip to content

[css-multicol] Pass at incorporating the new model plus clarification in the issue re naming #3999

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jun 15, 2019
Merged

[css-multicol] Pass at incorporating the new model plus clarification in the issue re naming #3999

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6838c78
Trying to incorporate the new model
rachelandrew Jun 3, 2019
c55a6b4
Tidying up section about gaps
rachelandrew Jun 3, 2019
ee6a5a2
update to PR based on discussion at F2F
rachelandrew Jun 5, 2019
d574b5b
Fixing up the multicol model
rachelandrew Jun 15, 2019
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
104 changes: 64 additions & 40 deletions css-multicol-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,41 +150,77 @@ Introduction</h2>
<h2 id="the-multi-column-model">
The multi-column model</h2>

A <dfn lt="multi-column container|multicol container" oldids="multi-column-element" export>multi-column container</dfn>
(or <i>multicol container</i> for short)
is an element whose 'column-width' or 'column-count'
property is not ''column-width/auto'' and therefore acts as a container for
multi-column layout.

<wpt>
multicol-count-computed-004.xht
</wpt>

In the traditional CSS box model, the content of an element is
flowed into the content box of the corresponding element. Multi-column
layout introduces a new type of container between the content box and
the content, namely the <dfn export local-lt=column>column box</dfn> (or <i>column</i> for
short). The content of a multicol container is flowed into its column
boxes.

Column boxes in a multi-column container are arranged into <dfn export lt="column row" local-lt=row>rows</dfn>.
Like table cells,
the column boxes in a row are ordered
in the inline direction of the multicol container.
The <dfn export>column width</dfn> is the length of the column box in the inline direction.
An element whose 'column-width' or 'column-count' property is not ''column-width/auto''
establishes a <dfn lt="multi-column container|multicol container" oldids="multi-column-element" export>multi-column container</dfn>
(or <i>multicol container</i> for short),
and therefore acts as a container for [=multi-column layout=].

In the traditional CSS box model,
the content of an element is
flowed into the content box of the corresponding element.
Multi-column layout introduces a [=fragmentation context=]
formed of <a lt="anonymous box">anonymous</a> [=fragmentation containers=]
called <dfn export lt="column box" local-lt=column>column boxes</dfn>
(or <i>columns</i> for short).
These [=column boxes=] establish
an independent [=block formatting context=]
into which the multi-column container's content flows,
and form the [=containing block=] for its non-positioned childen.
Content overflowing a [=column box=] in the [=block axis=]
[=fragments=] and continues in the next [=column box=].

Note: Column boxes, which are [=anonymous boxes=],
do not become the containing block
for [=absolutely-positioned boxes=].
The 'position' property, which establishes a containing block for such boxes,
applies to the [=multicol container=], it being the [=principal box=].

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 lines</dfn>.
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 row have the same column width,
and all column boxes in a row have the same column height.
Within each row in the multi-column container,
All column boxes in a line have the same column width,
and all column boxes in a line have the same column height.

Within each [=multi-col 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>.
All column gaps in the same row are equal.
All column rules in the same row are also equal, if they appear;
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 row
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
used height of the multi-column container's content box.
However, [=fragmentation=] or [=spanners=]
can split the content of the [=multi-column container=]
into multiple [=multi-col 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
balanced and shortened to fit their content. Content after the
spanning element then flows into a new, subsequent line of column boxes.

A [=multi-column container=] therefore is a regular [=block container=]
that establishes a new [=independent formatting context=]
whose contents consist of a series of
[=multi-col lines=] and [=multi-col spanners=].
Each [=multi-column line=] acts as a [=block-level box=]
that establishes a [=multi-column formatting context=]
for its [=column boxes=];
and each [=spanner=] acts as a [=block-level box=]
that establishes an [=independent formatting context=]
with its type depending on its 'display' value as usual.

<wpt>
multicol-count-computed-004.xht
</wpt>


<div class="example">
Column gaps (diagonal hatching) and column rules are shown in this
Expand All @@ -206,25 +242,13 @@ The multi-column model</h2>
</figure>
</div>

If the multi-column container is paginated, the height of each row is
constrained by the page and the content continues in a new row 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
balanced and shortened to fit their content. Content after the
spanning element then flows into a new row of column boxes.

<div class="example">
<figure>
<img alt="a diagram showing a spanning element causing the shortened columns above the element with text continuing in new columns below" src="images/simple-span-example.svg">
<figcaption>A demonstration of how the spanning element divides the multicol container.</figcaption>
</figure>
</div>

Column boxes are block container boxes. The multi-column container is the principal box, and column boxes are anonymous.

Note: Column boxes do not become the containing block for elements with ''position: fixed'' or ''position: absolute''. The containing block is the multicol container, it being the principal box.

<wpt>
multicol-containing-001.xht
Expand Down