css-gcpm-3/uc.html

<!doctype html>
<html>
<style>
body { margin: 1em; font: small "Trebuchet MS", sans-serif }
table { border-collapse: collapse }
td, th { border: thin solid black; padding: 0.2em; vertical-align: top }
img { border: thin solid black }
</style>

<h1>Advanced Multicol Use Cases</h1>

<!--

<p><img src="img/folkevett.jpg"/>

<p>How can the article above be represented? The essential components are:

<ul>
<li>a grid-based layout with 8 columns
<li>a heading that spans all 8 columns
<li>an image that span the right-most 4 columns, all the way to the page edge
<li>in introduction that spans the left-most 4 column
</ul>

<p>We will disregard these components:

<ul>
<li>header and footers
<li>the fact that the article stretches across two pages
</ul>

-->

<table class=border><tr><th>Challenge<th><a href="http://www.w3.org/Style/Group/css3-src/css3-grid/overview.src.html">Grid positioning</a><th><a href="http://www.w3.org/TR/2007/WD-css3-gcpm-20070504/">GCPM alt1</a><th>GCPM alt2</th><th>GCPM alt5</th>

<tr><td>#1 Float an image to the right in its containing block.
<pre>                  </pre>

<td><pre>img { float: right }</pre>
<td><pre>img { float: right }</pre>
<td><pre>img { float: right }</pre>
<td><pre>img { float: right }</pre>


<tr><td>#2 Float an image to the bottom of its containing block, <span class=change>allowing other content on its side.</span>
 
<td>
<pre>img { 
  position:absolute;
  bottom:0;  
  float-wrap:square; }
</pre>
<td>
<pre>img { 
  float: bottom }
</pre>
</td>
<td>
not possible
</td>
<td>
Syntactically, this is possible:

<pre>
img {
  float: bottom
}
</pre>

<p>However, the specification doesn't require UAs to implement
vertical floating within the containing block.

</td>


<tr><td>#3 In paged media, float the image to the bottom of the page, without there being content on the side.

<td><pre>
img { 
  position:page;
  bottom:0;  
  width:100%;
  float-wrap:square; }
</pre>
<td><pre>
img { 
  float: page bottom 
  width: 100% }
</pre>
<td><pre>
img { 
  float: bottom 
}
</pre>

<td><pre>
img { 
  float: page bottom;
  width: 
}
</pre>

 
<tr><td>#4 In paged media, float the image to the bottom right of the page with other content on its left side.

<td><pre>
img { 
  position: page; 
  bottom:0; 
  right:0;
  float-wrap:square; }
</pre>

<td><pre>
img { 
  float: page bottom right }
</pre>

<td>not possible

<td><pre>
img { 
  float: page bottom right;
}
</pre>


<tr><td>#5 In paged media, float the table to the top of the next page.

<td><pre>
table { 
  float: top next page }
</pre>

<td>
<pre>
table { 
  float: next page }
</pre>

<p class=comment>(top of page is default)


<td>
<pre>
table { 
  float: top-next }
</pre>

<td>
<pre>
table { 
  float: next page top  }
</pre>


<tr><td>#6 In paged media, float the image to the inside of its containing block.

 
<td><pre>object { 
  position:absolute;
  inside:0;
  float-wrap:square; }</pre> 

<td><pre>object { float: inside }</pre>

<td><pre>object { float: inside }</pre>

<td><pre>object { float: inside }</pre>


<tr><td>#7 In paged media, float the image to the top of the page, on the outside.


<td>
<pre>
object { 
  position: page; 
  top:0; 
  outside:0;
  float-wrap:square;  }
</pre>

<td>
<pre>
object { 
  float: page top outside }
</pre>

<td>
not possible

<td>
<pre>
object { 
  float: page top outside;
}
</pre>


<tr><td>#8 In paged media, float the note to the next page if there isn't room on the current page.

<td>
<pre>
div.note { 
  float: next page unless-room }
</pre>

<td><pre>
div.note { 
  float: next page unless-room }
</pre>

<td><pre>
div.note { 
  float: top-unless-room }
</pre>

<td><pre>
div.note { 
  float: here, next page;
}
</pre>


<tr><td>#8b In paged media, float the note to the next column if there isn't room in the current column, while continuing to fill the current column

<td>unknown

<td><pre>
div.note { 
  float: next column unless-room }
</pre>


<td><pre>
div.note { 
  float: column-top-next-unless-room 
}
</pre>

<tr>

<td><pre>
div.note { 
  float: none, next column; 
}
</pre>


<tr><td>#9 In paged media, hide the image if there isn't room enough on the page.
 
<td><pre>
img { 
  float: hide unless-room }
</pre>

<td><pre>
img { 
  float: hide unless-room }
</pre>

<td>not possible

<td>
<pre>
img { 
  float: none, hide;
}
</pre>


<tr><td>#10 In a multicolumn layout, float an image to the left within the column, with other content flowing on the right.

 
<td><pre>img { float: left }</pre>
<td><pre>img { float: left }</pre>
<td><pre>img { float: left}</pre>
<td><pre>img { float: left}</pre>
 

<tr><td>#11 In a multicolumn layout, float the note to the bottom of the current column with no other content on its sides.
 
<td><pre>div.note { 
  position:column;
  bottom:0;
  left:0;
  width:1gr;
  float-wrap:square; }</pre>
<td><pre>div.note { float: bottom column }</pre>
 
<td><pre>div.note { float: column-bottom }</pre>

<td><pre>div.note { float-vertical: bottom }</pre>


<tr><td>#12 In a multicolumn layout, float the image to the top right of the right-most column with text flowing on its left side:

<td>
<pre>
img {
  position:absolute;
  top:0;
  right:0;  
  float-wrap:square; }
</pre>
<td>
<pre>
img { 
  float: top right column }
</pre>

<td>not possible


<tr><td>#13 In a multicolumn layout, float an image that naturally occurs in the left-most column to the top left of the right-most column with text flowing on its right side:

 
<td>
<pre>
img {
  position:absolute;
  top:0;
  right:1gr;
  float-offset:100%;
  float-wrap:square; }
</pre>

<td><p class=comment>Not possible. If deemed necessary, this construct (where the overloading of 'left and 'right' has been replaced with 'right-'):

<pre>img { 
  float: top left right-column }
</pre>

<td>not possible

<tr><td>#14 In a multicolumn layout, float the image to the top of the right-most column, setting the width of the image to be the width of the column box:


<td>
<pre>img {
  position:absolute;
  top:0;
  right:0;
  width:1gr;
  float-wrap:square; }
</pre>

<td>
<pre>
img { 
  float: top right column;
  width: 1gr }
</pre>

<td>not possible

<tr><td>#15 In a multicolumn layout, float the image to the upper right corner of the multicolumn element, spanning two columns, setting the width of the image to be the width of both column boxes and the gap between them.

 
<td>
<pre>
img {
  position:absolute;
  right:0;
  top:0;
  width:3gr; 
  float-wrap:square; }
</pre>

<td>
<pre>
img { 
  float: top right column;
  width: 3gr }
</pre>

<td>not possible


<tr><td>#16 In a multicolumn layout, float the note to the bottom of the multi-column element, spanning all columns.

<td>
<pre>
div.note { 
  position:absolute;
  bottom:0;
  width:100%;
  float-wrap:square; }
</pre>

<td>
<pre>
div.note { 
  float: bottom; 
  column-span: all }
</pre>

<td>not possible


<tr><td>#17 In a multicolumn layout in paged media, float the note to the bottom of the page, spanning all columns.

<td>
<pre>
div.note { 
  position:page;
  bottom:0;
  width:100%;
  float-wrap:square; }
</pre>

<td>
<pre>
div.note { 
  float: page bottom; 
  column-span: all }
</pre>
 
<td>
<pre>
div.note {
  float: bottom;
}
</pre>

<tr><td>#18 In a multi-column layout, float the note to the bottom of the left-most column:

<td>
<pre>
div.note { 
  position:absolute;
  bottom:0;
  left:0;
  width:1gr;
  float-wrap:square; }
</pre>

<td>
<pre>
div.note { 
  float: bottom left column }
</pre>

<td>not possible

<tr><td>#19 In a multicolumn layout, put an image at the top of the next-to-rightmost column, setting the image width equal to the width of the column.

<td><pre>
div.note { 
  position:absolute;
  top:0;
  right:2gr;
  width:1gr;
  float-wrap:square; }</pre>

<td>
<pre>
img { 
  float: top right column; 
  float-offset: 2gr 0; 
  width: 1gr }
</pre>
</td>

<td>not possible

<tr><td>#20 In a three-column layout, put articles after each other in unbalanced columns.

<td>
<pre>
newspaper { 
  columns: 3; 
  column-fill: auto }
</pre>

<td>
<pre>
newspaper { 
  columns: 3; 
  column-fill: auto }
</pre>

<td>
<pre>
newspaper { 
  columns: 3; 
  column-fill: auto }
</pre>

 
<tr><td>#21 In a three-column layout, put articles after each other in balanced columns.

<td>
<pre>
newspaper { 
  columns: 3; 
  column-fill: balance }
</pre>
<td>
<pre>
newspaper { 
  columns: 3; 
  column-fill: balance }
</pre>

<td>
<pre>
newspaper { 
  columns: 3; 
  column-fill: balance }
</pre>

 
<tr><td>#22 In a three-column layout, make articles use exactly two balanced columns on the ending page (as The Economist does on occasion)

<td><p class=comment>(not possible)

<p class=comment>can be done by reserving the last column with a float (empty or an ad)...

<td><p class=comment>(not possible)

<td>not possible
 

<tr><td>#23 In a three-column layout, make articles use exactly two balanced columns on the starting page.

<td><p class=comment>...another option is using named flows (with a container spanning 3 grid units) 
<td><p class=comment>(not possible)

<td>not possible

 
<tr><td>#24 In a multicolumn layout, float an image to the upper right corner of the multicolumn element, spanning two columns, setting the width of the image to be the width of both column boxes and the gap between them. Further, the image has a caption that should be displayed below the image in the left column only.

<td><pre>img.large {
  position:absolute; 
  right:0;
  top:0;  
  width:3gr;
  float-wrap:square; }
div.caption { 
  position:absolute;
  top:0;
  right:2gr;
  width:1gr;
  float-wrap:square; }
</pre>

<td>
<pre>img.large { 
  float: top right column; 
  width: 3gr }
div.caption { 
  float: top right column; 
  float-offset: 2gr
  width: 1gr }
</pre>
</td>

<td>not possible

<tr><td>#25 In a multicolumn layout, float an image to the upper right corner of the multicolumn element, spanning two columns, setting the width of the image to be the width of both column boxes and the gap between them. Further, the image has a caption that should be displayed to the right of the image (i.e., outside of the content box of the multicol element). The top of the caption should be aligned with the top of the image.

<td>
<pre>
img {
  position:absolute;
  top:0;
  right:0;
  width:3gr; }
.caption {
  position:absolute;
  top:0;
  right:0;
  float-offset: 100%; }
</pre>
<td>
<pre>
img {
  float: top right column;
  width: 3gr;
}
.caption {
  float: top right column;
  float-offset: -2gr
}
</pre>

<td>not possible

<tr><td>#26 As #25, except that the bottom of the caption is aligned with the middle of the image. 

This markup is presumed:
<pre>
&lt;div class=multicol>
 ...
  &lt;div class=figure>
    &lt;img ...>
    &lt;p class=caption>
  &lt;/div>
  ...
&lt;/div>
</pre>


<td>
<pre>
.figure {
  position:absolute;
  top:0;
  right:0;
  width:3gr; }
.figure img {
  width:100%; }
.figure .caption {
  position:absolute;
  top:0.5gr;
  right:0;
  float-offset: 100%; }
</pre>

<td>
<pre>
.figure { 
  float: top right column;
  width: 5gr;
  float-offset: -2gr
}

.figure img {
  display: table-cell;
  width: 3gr;
}

.figure .caption {
  display: table-cell;
  vertical-align: middle;
}
</pre>

<td>not possible

<tr><td>#27 As #25, except that the bottom of the caption is aligned with the bottom of the image. 

<td><pre>
.figure {
  position:absolute;
  top:0;
  right:0;
  width:3gr; 
  float-wrap:square;}
.figure img {
  width:100%; }
.figure .caption {
  position:absolute;
  bottom:0;
  right:0;
  float-offset: 100%; }
</pre>
<td>
<p class=comment>(As in the previous example, except that 'vertical-align' is set to 'bottom')


<td>not possible

<tr><td>#28 In a multi-column layout, float an element (containing, say, a quote) to the second column, placing it 10em from the top of the column. The element should fill the width of the column.

<td>
<pre>
quote { 
  position:absolute;
  top:10em;
  left:2gr;
  width:1gr;
  float-wrap:square; }
</pre>
<td>
<pre>
quote { 
  float: top left column; 
  float-offset: 2gr 10em; 
  width: 1gr; }
</pre>
</td>

<td>not possible


<tr><td>#29 as #28, except that the quote should be centered vertically in the column. 

<td><pre>
quote { 
  position:absolute;
  top:0.5gr;
  left:2gr;
  width:1gr;
  float-offset:0 50%;
  float-wrap:square; }
</pre>
<td>
<pre>
quote { 
  float: top left column; 
  float-offset: 2gr 50%; 
  width: 1gr }
</pre>


<td>not possible

<tr><td>#30 In a multi-column layout, float an element (containing, say, a quote) between the first and second column so that the element intrudes into the two neighboring columns. Horizontally, the element should be centered wrt the column gap which is 1em. Vertically, the quote should be in the middle.

<td><pre>blockquote { 
  position:absolute;
  top:0.5gr;
  left:1.5gr;
  float-offset:50% 50%;
  float-wrap:square; }</pre>
<td>
<pre>
blockquote {
  float: top left column;
  float-offset: 1.5gr 50% }
</pre>
</td>

<td>not possible


<tr><td>#31 In a four-column layout, the outside column should not have any normal content. Instead, images present in the content should be floated to this column, stacked underneath each other in the order they appear. This use case can also be thought of as a three-column layout with an outside margin equal to the width of one column, into which the images are floated.

<td>
<pre>
html { grid-columns: * (1em *)[3]; }
body { 
  width: 5gr;
  columns: 3; }
img { 
  position:absolute;
  top:0;
  right:0;
  width:1gr;
  float-wrap:square; }
</pre>
<td>

<pre>
@page :left { margin-left: 10em }
@page :right { margin-right: 10em }
body { columns: 3 }
img { float: top outside page }
</pre>

<td>
unsure


<!--<pre>@page :left { 
  margin-left: 10em;
  @sidenote { 
    position: fixed; 
    left: -8em; 
    width: 6em }
}
@page :right { 
  margin-right: 10em;
  @sidenote { 
    position: fixed; 
    right: -8em; 
    width: 6em }
}
body { 
  width: 30em;
  columns: 3 }
img { float: sidenote }
</pre>-->
</table>