Skip to content

Commit

Permalink
[css-multicol] added example SVG images
Browse files Browse the repository at this point in the history
  • Loading branch information
@rachelandrew
rachelandrew committed Mar 15, 2018
1 parent 28220c1 commit ce8e44b
Show file tree
Hide file tree
Showing 6 changed files with 329 additions and 117 deletions.
150 changes: 33 additions & 117 deletions css-multicol-1/Overview.bs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -517,12 +517,19 @@ Two assumptions are being made by the pseudo-algorithm:
regard for explicit column breaks or constrained column heights,
while the actual value takes these into consideration.

<div class=example>
<div class="example">
In this example, the actual column-count is higher than the used column-count due to explicit column breaks:

<pre highlight="css">
div { width: 40em; columns: 20em; column-gap: 0 }
p { break-after: column }
div {
width: 40em;
columns: 20em;
column-gap: 0;
}

p {
break-after: column;
}
</pre>

<pre highlight="html">
Expand All @@ -532,8 +539,10 @@ Two assumptions are being made by the pseudo-algorithm:
&lt;p>three
&lt;/div>
</pre>

The computed column-count is auto, the used column-count is 2 and the actual column-count is 3.
<figure>
<img src="images/column-count-higher-than-used-count.svg" alt="Two columns drawn inside the container, one outside">
<figcaption>The computed column-count is auto, the used column-count is 2 and the actual column-count is 3.</figcaption>
</figure>
</div>

<div class=example>
Expand Down Expand Up @@ -709,6 +718,11 @@ Column gaps and rules</h2>
column-rule-color: black;
}
</pre>

<figure>
<img src="images/rule-same-width-as-gap.svg" alt="The rule completely covers any gap.">
<figcaption>The column rule and column gap occupy the same space.</figcaption>
</figure>
</div>


Expand Down Expand Up @@ -782,54 +796,20 @@ Spanning columns</h2>

<div class="example">
In this example, an <code>h2</code> element has been added to the
sample document after the sixth sentence (i.e., after the word "jkl."). This styling applies:
sample document after the sixth sentence (i.e., after the words "the leg of a"). This styling applies:

<pre highlight="css">
h2 { column-span: all; background: silver }
</pre>

By setting 'column-span' to ''column-span/all'', all content that appear before
By setting 'column-span' to ''column-span/all'', all content that appears before
the <code>h2</code> element is shown before the <code>h2</code>
element.

<div class=cols>
Ab cde fgh i jkl. Mno<br>
pqr stu vw xyz. A bc<br>
<br><br>
M nop qrst uv wx yz.<br>
Ab cde fgh i jkl. Mno<br>
pqr stu vw xyz. A bc<br>
def g hij klm nopqrs<br>
tuv wxy z. Abc de fg<br>
hi jklmno. Pqrstu vw<br>

<div class="col" style="left: 175px">
def g hij klm nopqrs<br>
tuv wxy z. Abc de fg<br>
<br><br>
x yz. Abc def ghi jkl.<br>
M nop qrst uv wx yz.<br>
Ab cde fgh i jkl. Mno<br>
pqr stu vw xyz. A bc<br>
def g hij klm nopqrs<br>
tuv wxy z. Abc de fg<br>
</div>

<div class="col" style="left: 350px">
hi jklmno. Pqrstu vw<br>
x yz. Abc def ghi jkl.<br>
<br><br>
hi jklmno. Pqrstu vw<br>
x yz. Abc def ghi jkl.<br>
M nop qrst uv wx yz.<br>
Ab cde fgh i jkl. Mno<br>
pqr stu vw xyz.
</div>

<div class=rep style="width: 490px; height: 20px; background: silver; font-size: 1.5em; padding: 5px">An H2 element</div>
<div class=gap style="left: 150px"></div>
<div class=gap style="left: 325px"></div>
</div>
<figure>
<img src="images/h2-spanner.svg" alt="An element spans all three columns">
<figcaption>The h2 element is set to column-span: all</figcaption>
</figure>
</div>

A spanning element takes up more space than the element would take
Expand All @@ -845,85 +825,21 @@ Spanning columns</h2>
As a result, the element appears as if 'column-span: none' was
specified.

<div class=cols style="height: 100px">
<div class="col" style="">
Ab cde fgh i jkl. Mno<br>
pqr stu vw xyz. A bc<br>
def g hij klm nopqrs<br>
tuv wxy z. Abc de fg<br>
hi jklmno. Pqrstu vw<br>
</div>

<div class="col" style="left: 175px">
x yz. Abc def ghi jkl.<br>
M nop qrst uv wx yz.<br>
Ab cde fgh i jkl. Mno<br>
pqr stu vw xyz. A bc<br>
def g hij klm nopqrs
</div>

<div class="col" style="left: 350px">
tuv wxy z. Abc de fg<br>
hi jklmno. Pqrstu vw<br>
x yz. Abc def ghi jkl.<br>
M nop qrst uv wx yz.<br>
Ab cde fgh i jkl. Mno<br>
</div>

<div class="col" style="left: 525px">
pqr stu vw xyz.
<div class=rep style="width: 140px; height: 40px; background: silver; font-size: 1.5em; padding: 5px; margin: 0; position: static">An H2 element</div>
A bc def g hij klm
</div>

<div class="col" style="left: 700px">
nopqrs tuv wxy z.
</div>

<div class=gap style="left: 150px"></div>
<div class=gap style="left: 325px"></div>
<div class=gap style="left: 500px"></div>
<div class=gap style="left: 675px"></div>
</div>
<figure>
<img src="images/h2-in-the-overflow-no-span.svg" alt="The h2 element is in an overflow column" style="max-height: 107px;">
<figcaption>The h2 element is in an overflow column and appears as if column-span none is specified</figcaption>
</figure>
</div>

<div class="example">
This example is similar to the previous example,
except that the H2 element appears naturally in the last column.
Still, there is not enough room to make the element spanning.

<div class=cols style="height: 100px">
<div class="col" style="">
Ab cde fgh i jkl. Mno<br>
pqr stu vw xyz. A bc<br>
def g hij klm nopqrs<br>
tuv wxy z. Abc de fg<br>
hi jklmno. Pqrstu vw<br>
</div>

<div class="col" style="left: 175px">
x yz. Abc def ghi jkl.<br>
M nop qrst uv wx yz.<br>
Ab cde fgh i jkl. Mno<br>
pqr stu vw xyz. A bc<br>
def g hij klm nopqrs
</div>

<div class="col" style="left: 350px">
tuv wxy z. Abc de fg<br>
hi jklmno.
<div class=rep style="width: 140px; height: 40px; background: silver; font-size: 1.5em; padding: 5px; margin: 0; position: static">An H2 element</div>
</div>

<div class="col" style="left: 525px">
A bc def g hij klm<br>
nop w rstu vw xyz.
</div>

<div class=gap style="left: 150px"></div>
<div class=gap style="left: 325px"></div>
<div class=gap style="left: 500px"></div>
</div>
<figure>
<img src="images/h2-in-the-last-column-no-span.svg" alt="The h2 element is in the final column" style="max-height: 107px;">
<figcaption>The h2 element is in the final column and appears as if column-span none is specified</figcaption>
</figure>
</div>

<div class="example">
Expand Down
14 changes: 14 additions & 0 deletions css-multicol-1/images/column-count-higher-than-used-count.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit ce8e44b

Please sign in to comment.