Feedback requested: Replaced elements that exceed the column width and Positioning in relation to column 'n'

Consider:

| Column 1 |
|          |
|          |
| IMAGEEXCEEDS COLUMN WIDTH

According to the CSS-2 specification, by default this
would give IMG a negative margin-right.

This is OK, but the effect of this is not sufficiently
defined. 

In normal flow, this would move the next column over,
if we adopt the box model (as per the :column
pseudo-element proposal). It is unlikely that this
would be intended by the page author. 

We thus have several options: 

1. Modify overflow: visible in a column context.

This is necessary, because at present overflow:
visible (i.e. the default) would cause subsequent
columns to be moved when a column cannot contain its
image.

This is clearly unacceptable, since it almost
invariably cause the columns to exceed the viewport
width.

Thus we change overflow: visible for replaced elements
in a column context to scale the replaced element to
fit the element width. This would prevent the element
causing columns to be badly drawn.

We also introduce a new overflow: always property,
which has the same meaning as (the modfied) visible,
except it never scales elements to fit in columns.

While on the subject, an overflow: scale property
would be useful. This would ALWAYS scale elements to
fit the parent element width.

2. Allow replaced elements that exceed the column
width to push columns over. UNACCEPTABLE.

3. Use the W3C column proposal (rather than the
pseudo-element proposal). This saves rewriting
existing properties to take into account the special
circumstances of columns.

The main reason IMHO for using the W3C proposal lies
in the column-span property.

With the modified box/psuedo-element model proposal,
there is no way to do this.

| A typical | Here is | And a | And a |
| newspaper | another | third | fourth|
| is in     | column  | column|       |
| columns   |         |       |       |
|           |         |       |       |
|           |------------------ 
|           | This image goes |
|           | with the columns|
|           |                 |
|           |                 |
------------- -----------------

With the W3C proposal this could be done thus:

<div style="columns: 4">
Some text about Bill Clinton.
Some text about Bill Clinton.
Some text about Bill Clinton.
Some text about Bill Clinton.
Some text about Bill Clinton.
Some text about Bill Clinton that wants a picture with
it.
<img style="column-span: 2" alt="a picture that goes
with the text above">
And some more text.
And some more text.
And some more text.
And some more text.
</div>

Cf.

<div style="display: 4 columns">
Some text about Bill Clinton.
Some text about Bill Clinton.
Some text about Bill Clinton.
Some text about Bill Clinton.
Some text about Bill Clinton.
Some text about Bill Clinton that wants a picture with
it.
<img alt="what's going to happen when Bill is too big
for his column?">
And some more text.
And some more text.
And some more text.
And some more text.
</div>

Clearly the advantages of retaining the block element
are obviated by the special features of columns, which
lend themselves to a special model, particularly to
column-span.

However, having defended the W3C proposal rather than
any of the alternatives, I would go on to point out
that the column-span proposal still does not cater for
our problem with replaced elements that exceed their
column width.

This is easily fixed - add an 'auto' value to the
column-span proposal. This would be the initial value,
rather than column-span: none.

This would mean that on non-replaced elements where
width>column-width and on replaced elements, auto =
column-span as much space as is necessary.

Note that as much space as is necessary != as many
columns as is necessary.

Cf. A (this is as many columns as is necessary)
| A typical | Here is | And a | And a |
| newspaper | another | third | fourth|
| is in     | column  | column|       |
| columns   |         |       |       |
|           |         |       |       |
|           |------------------ 
|           | This image goes |
|           | with the columns|
|           |                 |
|           |                 |
------------- -----------------

And: B (this is as much space as is necessary)
--------------------------------------
| A typical | Here is | And a | And a |
| newspaper | another | third | fourth|
| is in     | column  | column|       |
| columns   |         |       |       |
|           |         | wrap  |       |
|           |------------ aro |    
|           | This image |und | 
|           | with the co|it  |
|           |            |    |
|           |            |    |
------------- -----------------

In addition, I would dump column-span: none, for
column-span: element-fit (scale down the element to
fit), and column-fit (increase the column width to fit
the element content).

| A typical | Here is | And a | And a |
| newspaper | another | third | fourth|
| is in     | column  | column|       |
| columns   |         |       |       |
|           |         |       |       |
|           |------------------ 
|           | This image goes |
|           | with the columns|
|           |                 |
|           |                 |
------------- -----------------

Thus in conclusion we need:
(previous proposal(s)):
:column pseudo-class
This would take :column(1-whatever number),
:column(all): :column(odd), :column(even),
:column(middle) NEW SUGGESTION HERE
:column(last).
Valid on these would be colour, background, text, font
and visual effects. This p-class is needed because you
can't at present give different columns different
formats.

And:
(current proposal):

column-span: auto (VERY IMPORTANT)
column-span: element-fit and column-span: column-fit.

With these extensions, the existing proposal, which
DOES NOT currently allow many common column schemes
would be able to deal with any column design!

Further, there is a situation where the image or
heading or whatever doesn't accompany any particular
paragraph, but rather is wanted at the top or bottom,
or middle of column N. If we use positioning, we can
certainly position the element relative to the column
block, but not relative to a particular column. There
is a need for a positioning method that allows us to
specify position relative to a column.

It is not sensible to modify position, but instead I
suggest a relative-to-column property. This would take
the same values <integer>, 'middle' = the middle
column, which if not present (i.e. the number of
columns = even) would position relative to the n/2nd
column - NOT relative to halfway across column block -
this might look ridiculous because of the possibility
of columns that are not of equal size), 'last' = the
last column. Thus you might have DIV.column IMG
{position: relative; relative-to-column: 1}.

This idea DOES lend itself better to the
pseudo-element proposal, but this suggestion does
work.

PS. Call me pedantic, but I think the column shortcut
should be column: not columns:, simply by analogy with
every other shortcut (e.g., background: cf.
background-color, background-image; font: cf.
font-style; etc.)

PPS. The current W3C proposal doesn't state that
elements that are column-spanned shouldn't have
column-rules thru them. This is an omission.

PPPS. It is unlikely that you would want columns of
different widths. BUT you can't do it with the
column-* proposals, but you can with the
pseudo-element proposal. 

All this needs to be resolved; sorry to leave it in
such a mess.

=====

__________________________________________________
Do You Yahoo!?
Bid and sell for free at http://auctions.yahoo.com

Received on Wednesday, 20 October 1999 10:23:57 UTC