Re: Feedback requested: Replaced elements that ex...

> You will have to explain how the text flows around
> elements half-spanning columns!

By the browsers supporting the spec [surely not],
which would state that this is the behaviour for
column-span: auto.

The reason that this should be the default is that
normally columns are found in paged media, where the
width of the page is known, and where one can be sure
that an image of dimensions x and y will fit into a

Clearly it would be inappropriate for CSS (!) to
provide a PDF-like mechanism for representing paged
media in a continuous environment, thereby ensuring
that our picture fits our column perfectly.

In the absence of this kind of mechanism, the only
option is to provide a mechanism where a page designed
on one computer isn't a mass of overlapping images
(which, depending on color:, could completely obscure
subsequent columns' text) or, almost as bad, an
element spanning many columns, but only occupying one
on the user's high res computer, causing lots of ugly
empty space.

This would be satisified perfectly by my column-span:
auto property.

The other problem that we have is that it is
frequently necessary to ensure that an element stays
within its column or within 2 columns, not causing
nasty overlapping.

With my proposal of (altered) behaviour of
column-span: n, we could have this - column-span: 1,
which says that the element MUST NOT span or go out of
that column.

In case anyone suggests that you could do that by
having DIV.column IMG.mustgowiththiscolumn {width:
100%}, this would cause the image to span the whole
column block, and even some kind of pseudo-element
mechanism that allows you to say that the width is
100% of column n would not cater for column-span: 2 -
how would you say {width: 100% of the current column,
and 100% of the next one (which may be different)}.

Of course, this is where the :column pseudo-class
comes into its own.

Since instead of having

DIV.thishappenstobeacolumn IMG, P.asdoesthis IMG
top: somekindofvaluefortopthataddsup22othervalues;
left: somekindofvaluefor; width:
DIV.thishappenstobeacolumn IMG.span2columns,
P.asdoesthis IMG.span2columns {position:
left: somekindofmodificationtoleft}
DIV.thishappenstobeacolumn IMG
/* To stop our element going outside its box */

You have (using the :column pseudo-class):

:column IMG {column-span: auto} /* N.B. initial value
:column[last] IMG {column-span: 1} /* To stop our
element going outside its box */

And, if we wish to ensure that an element appears at
the top or bottom of a certain column instead of.

DIV.column {display: 5 columns}
:column(1) {width: nn%}
:column(2) {width: xx%}
:column(3) {width: yy%}
:column(4) {width: zz%}
IMG {width: nn+xx+yy+zz}

DIV.column {column-width: nn xx yy zz}
IMG {relative-to: 4}

> (I wonder which would have the shallowest learning
curve for authors?

Your proposal most definitely ([1]).
[1] A shallow learning curve indicates something that
is <em>difficult</em> to learn, since the graph is of
time (x-axis) and amount learned (y-axis), and
therefore a shallow learning curve indicates that very
little is being learned.


Do You Yahoo!?
Bid and sell for free at

Received on Friday, 22 October 1999 08:27:47 UTC