Skip to content

[css-multicol-2] Initial pass at changes to the model section. #12544

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

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

[css-multicol-2] Initial pass at changes to the model section. #12544

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f75607a
Initial pass at changes to the model section.
rachelandrew Jul 30, 2025
ff0b7a0
changes.
rachelandrew Jul 31, 2025
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
34 changes: 24 additions & 10 deletions css-multicol-2/Overview.bs
View file
Open in desktop
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,37 @@ 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>column gap</dfn>,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

row gap

which may contain a <dfn noexport>column rule</dfn>.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

row rule

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,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why just continuous media?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see what the use case is for doing this in paged media, paged media already overflows into new pages. If there's a use case, then great, but this has always been discussed as for continuous media.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So column-wrap only applies in continuous media? It should probably also not apply in nested multicol then (even if media may be continuous in such cases).

Not sure about wording.

If a multi-column container that doesn't participate in a fragmentation context (such as paged media) is set to wrap [...]

?

If we add this limitation, and also do it for column-height, it also means that #11977 doesn't need to be resolved.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think adding a limitation for nesting is probably ok, I think the only nested multicols I come across are in test cases.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, if we want to avoid this in paged media, we should avoid it for any kind of nested fragmentation - e.g. nested multicol as well.

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.
This row contains at least one multicol line or one spanning element.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is true for all rows, and is also mentioned further up.


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 +570,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