Skip to content

Commit 47814d6

Browse files
committed
[css-multicol-1] Tidying up figures
Making figures more accurate and fixing some example code to help with clarity of diagrams.
1 parent cb965fd commit 47814d6

28 files changed

+36
-1542
lines changed

css-multicol-1/Overview.bs

+9-6
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ Previous Version: https://www.w3.org/TR/2001/WD-css3-multicol-20010118/
1818
Previous Version: http://www.w3.org/1999/06/WD-css3-multicol-19990623
1919
Editor: Håkon Wium Lie, Opera Software, howcome@opera.com, w3cid 9796
2020
Editor: Florian Rivoal, On behalf of Bloomberg, https://florian.rivoal.net, w3cid 43241
21-
Editor: Rachel Andrew, Invited Expert, https://rachelandrew.co.uk, w3cid 81117
21+
Editor: Rachel Andrew, Fronteers, https://rachelandrew.co.uk, w3cid 81117
2222
Issue Tracking: Disposition of Comments https://drafts.csswg.org/css-multicol-1/issues
2323
Abstract: This specification describes multi-column layouts in CSS, a style sheet language for the web. Using functionality described in the specification, content can be flowed into multiple columns with a gap and a rule between them.
2424
Link Defaults: css-color (property) color, css2 (property) max-height, css-backgrounds-3 (value) hidden
@@ -198,9 +198,12 @@ The multi-column model</h2>
198198

199199
<figure>
200200
<img alt="a diagram showing the various parts of multi-column layout" src="images/initial-example.svg">
201+
<img alt="key to the conventions used to display invisible parts of diagram" src="images/invisible-elements.svg">
201202
<figcaption>A multi-column layout with the non-visible column-span and padding inside the multicol container highlighted.</figcaption>
202203
</figure>
203204

205+
206+
204207
<figure>
205208
<img alt="a diagram showing the various parts of multi-column layout" src="images/initial-example-b.svg">
206209
<figcaption>The same layout as in the first image, as it would be displayed by an implementation.</figcaption>
@@ -847,8 +850,8 @@ Column gaps and rules</h2>
847850

848851
<pre highlight="css">
849852
body {
850-
column-gap: 1em;
851-
column-rule-width: 1em;
853+
column-gap: 35px;
854+
column-rule-width: 35px;
852855
column-rule-style: solid;
853856
column-rule-color: black;
854857
}
@@ -1075,11 +1078,11 @@ h2 {
10751078

10761079
<pre highlight="css">
10771080
h2 {
1078-
margin: 0.5em 0;
1081+
margin: 16px 0;
10791082
column-span: all;
10801083
background: silver
10811084
}
1082-
p { margin-top: 1em }
1085+
p { margin-top: 16px }
10831086
</pre>
10841087

10851088
<figure>
@@ -1347,7 +1350,7 @@ Pagination and overflow outside multicol containers</h3>
13471350

13481351
<div class="example">
13491352
In fragmented contexts, the overflow content goes into columns in subsequent fragments.
1350-
Given the same content as in the previous example
1353+
Given the same content as in example 31
13511354
and a page box that only has room for five lines of formatted text,
13521355
this would appear on the first page:
13531356

css-multicol-1/images/column-balancing-one-paragraph.svg

+1-64
Loading

css-multicol-1/images/column-balancing-with-column-break.svg

+1-61
Loading

css-multicol-1/images/column-balancing-with-figure.svg

+1-63
Loading

css-multicol-1/images/column-not-containing-block.svg

+1-37
Loading

css-multicol-1/images/h2-in-the-last-column-no-span.svg

+1-71
Loading

css-multicol-1/images/h2-in-the-overflow-no-span.svg

+1-84
Loading

css-multicol-1/images/h2-spanner.svg

+1-83
Loading

css-multicol-1/images/height-constraint-column-break-overflow-inline.svg

+1-68
Loading

css-multicol-1/images/height-constraint-overflow-inline.svg

+1-68
Loading

css-multicol-1/images/image-floated-in-column.svg

+1-64
Loading

css-multicol-1/images/image-inside-column.svg

+1-61
Loading

css-multicol-1/images/image-overflow-not-clipped.svg

+1-61
Loading

css-multicol-1/images/initial-example-b.svg

+1-15
Loading

css-multicol-1/images/initial-example.svg

+1-65
Loading

css-multicol-1/images/invisible-elements.svg

+1
Loading

css-multicol-1/images/margins-do-not-collapse.svg

+1-54
Loading

css-multicol-1/images/no-column-balancing-one-paragraph.svg

+1-58
Loading

css-multicol-1/images/overflow-column-effects-height.svg

+1-68
Loading

css-multicol-1/images/pagination-column-break-overflow-page1.svg

+1-49
Loading

css-multicol-1/images/pagination-column-break-overflow-page2.svg

+1-49
Loading

css-multicol-1/images/pagination-overflow-page1.svg

+1-49
Loading

css-multicol-1/images/pagination-overflow-page2.svg

+1-49
Loading

css-multicol-1/images/rule-same-width-as-gap.svg

+1-44
Loading

css-multicol-1/images/simple-span-example.svg

+1-83
Loading

css-multicol-1/images/spanner-page-break1.svg

+1-49
Loading

css-multicol-1/images/spanner-page-break2.svg

+1-62
Loading

css-multicol-1/images/two-spanners-margin-no-collapse.svg

+1-57
Loading

0 commit comments

Comments
 (0)