From 6838c78fd29805107b1c88abeed2ef6ec746e591 Mon Sep 17 00:00:00 2001 From: rachelandrew Date: Mon, 3 Jun 2019 16:07:53 -0400 Subject: [PATCH 1/4] Trying to incorporate the new model --- css-multicol-1/Overview.bs | 44 +++++++++++++++++++++++--------------- 1 file changed, 27 insertions(+), 17 deletions(-) diff --git a/css-multicol-1/Overview.bs b/css-multicol-1/Overview.bs index b1fd2fa23f5..2e88620516e 100644 --- a/css-multicol-1/Overview.bs +++ b/css-multicol-1/Overview.bs @@ -150,11 +150,18 @@ Introduction

The multi-column model

- A multi-column container - (or multicol container 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. + An element whose column-width or column-count property is not auto establishes a multi-column container + (or multicol container for short). + It's a regular block container, + that establishes a new block formatting context. + + It consists of zero or more anonymous multi-column rows (multicol rows). There may be multiple rows if there's an outer fragmentation context, such as e.g. pagination. + + These multicol rows in turn consist of one or more of the following types of children, in any order: + + - Anonymous multi-column line: Establishes a new formatting context, and is filled with column boxes. + + - Spanners: Establish a new formatting context. Type of formatting context depends on display type; block formatting context, flex, grid, table, and so on. multicol-count-computed-004.xht @@ -162,27 +169,30 @@ The multi-column model 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 column box (or column for - short). The content of a multicol container is flowed into its column + layout introduces an anonymous container inside the multi-column lines, + namely the column box (or column for + short). + The content of a multicol container is flowed into its column boxes. - Column boxes in a multi-column container are arranged into rows. - Like table cells, - the column boxes in a row are ordered + Column boxes in a multi-column container are arranged in their containing multicol lines. + Like flex items, + the column boxes in a multicol line are ordered in the inline direction of the multicol container. - The column width is the length of the column box in the inline direction. + The column width is the length of the column box in the inline direction. The column height 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 line in the multi-column container, adjacent column boxes are separated by a column gap, which may contain a column rule. - All column gaps in the same row are equal. + Even in cases where a spanner creates multiple lines with a multicol row, + all column gaps in the same row are equal. All column rules in the same row 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 row containing 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. From c55a6b442644a2b172853fef362a2dcbbe7202e8 Mon Sep 17 00:00:00 2001 From: rachelandrew Date: Mon, 3 Jun 2019 16:18:41 -0400 Subject: [PATCH 2/4] Tidying up section about gaps The gap is the same size in all rows and lines in the container. --- css-multicol-1/Overview.bs | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/css-multicol-1/Overview.bs b/css-multicol-1/Overview.bs index 2e88620516e..a370793e079 100644 --- a/css-multicol-1/Overview.bs +++ b/css-multicol-1/Overview.bs @@ -187,9 +187,10 @@ The multi-column model Within each line in the multi-column container, adjacent column boxes are separated by a column gap, which may contain a column rule. - Even in cases where a spanner creates multiple lines with a multicol row, - all column gaps in the same row are equal. - All column rules in the same row are also equal, if they appear; + Even in cases where there are multiple rows, + or a spanner creates multiple lines with a multicol row, + 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 containing one line From ee6a5a212cbe6b4a2ed0293bf3cfbd9f83424767 Mon Sep 17 00:00:00 2001 From: rachelandrew Date: Wed, 5 Jun 2019 13:31:31 -0400 Subject: [PATCH 3/4] update to PR based on discussion at F2F --- css-multicol-1/Overview.bs | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/css-multicol-1/Overview.bs b/css-multicol-1/Overview.bs index a370793e079..8245825b43c 100644 --- a/css-multicol-1/Overview.bs +++ b/css-multicol-1/Overview.bs @@ -153,15 +153,15 @@ The multi-column model An element whose column-width or column-count property is not auto establishes a multi-column container (or multicol container for short). It's a regular block container, - that establishes a new block formatting context. + that establishes a new [=block formatting context=]. - It consists of zero or more anonymous multi-column rows (multicol rows). There may be multiple rows if there's an outer fragmentation context, such as e.g. pagination. + By default this creates a single anonymous multi-column row (multicol row). There may be multiple multi-column rows if there's an outer fragmentation context, such as e.g. pagination. - These multicol rows in turn consist of one or more of the following types of children, in any order: + These multi-column rows in turn consist of one or more of the following types of children, in any order: - - Anonymous multi-column line: Establishes a new formatting context, and is filled with column boxes. + - Anonymous multi-column line: Establishes a new column-line [=formatting context=], and is filled with column boxes. - - Spanners: Establish a new formatting context. Type of formatting context depends on display type; block formatting context, flex, grid, table, and so on. + - Spanners: Establish a new [=independent formatting context=]. Type of formatting context depends on display type; block formatting context, flex, grid, table, and so on. multicol-count-computed-004.xht @@ -172,12 +172,12 @@ The multi-column model layout introduces an anonymous container inside the multi-column lines, namely the column box (or column for short). - The content of a multicol container is flowed into its column + A multi-column line may contain one or more of these column boxes. + The content of a multicol container is flowed into the column boxes. Column boxes in a multi-column container are arranged in their containing multicol lines. - Like flex items, - the column boxes in a multicol line are ordered + The column boxes in a multicol line are ordered in the inline direction of the multicol container. The column width is the length of the column box in the inline direction. The column height is the length of the column box in the block direction. From d574b5b1d9882c1e526c838db161e54325cc8175 Mon Sep 17 00:00:00 2001 From: rachelandrew Date: Sat, 15 Jun 2019 18:22:32 +0200 Subject: [PATCH 4/4] Fixing up the multicol model --- css-multicol-1/Overview.bs | 107 +++++++++++++++++++++---------------- 1 file changed, 60 insertions(+), 47 deletions(-) diff --git a/css-multicol-1/Overview.bs b/css-multicol-1/Overview.bs index 8245825b43c..df4dd45b482 100644 --- a/css-multicol-1/Overview.bs +++ b/css-multicol-1/Overview.bs @@ -150,52 +150,77 @@ Introduction

The multi-column model

- An element whose column-width or column-count property is not auto establishes a multi-column container - (or multicol container for short). - It's a regular block container, - that establishes a new [=block formatting context=]. - - By default this creates a single anonymous multi-column row (multicol row). There may be multiple multi-column rows if there's an outer fragmentation context, such as e.g. pagination. - - These multi-column rows in turn consist of one or more of the following types of children, in any order: - - - Anonymous multi-column line: Establishes a new column-line [=formatting context=], and is filled with column boxes. - - - Spanners: Establish a new [=independent formatting context=]. Type of formatting context depends on display type; block formatting context, flex, grid, table, and so on. - - - multicol-count-computed-004.xht - - - 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 an anonymous container inside the multi-column lines, - namely the column box (or column for - short). - A multi-column line may contain one or more of these column boxes. - The content of a multicol container is flowed into the column - boxes. - - Column boxes in a multi-column container are arranged in their containing multicol lines. - The column boxes in a multicol line are ordered - in the inline direction of the multicol container. + An element whose 'column-width' or 'column-count' property is not ''column-width/auto'' + establishes a multi-column container + (or multicol container 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 anonymous [=fragmentation containers=] + called column boxes + (or columns 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 multicol lines. The column width is the length of the column box in the inline direction. The column height is the length of the column box in the block direction. 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 line in the multi-column container, + + Within each [=multi-col line=] in the multi-column container, adjacent column boxes are separated by a column gap, which may contain a column rule. - Even in cases where there are multiple rows, - or a spanner creates multiple lines with a multicol row, - all column gaps in the same multi-column container are equal. + 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 containing one line + 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 spanning element 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. + + + multicol-count-computed-004.xht + +
Column gaps (diagonal hatching) and column rules are shown in this @@ -217,15 +242,6 @@ The multi-column model
- 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 spanning element 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. -
a diagram showing a spanning element causing the shortened columns above the element with text continuing in new columns below @@ -233,9 +249,6 @@ The multi-column model
- 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. multicol-containing-001.xht