Re: [css3-exclusions][css3-gcpm] Reconciling exclusions and floats

David Hyatt wrote:

 > > ... with the GCPM approach, exclusions would be able to
 > > describe the most common (if not the simplest) use case: a pull quote
 > > positioned between two columns.
 > > 
 > >  http://lists.w3.org/Archives/Public/www-style/2011Dec/0271.html
 > >  http://dev.w3.org/csswg/css3-gcpm/#the-float-offset-property
 > 
 > I like having shorthands for common cases. For more power I really
 > want to use positioning. For example, a very common use case of
 > just putting a pull quote in the center of a page that happens to
 > be two columns could be done with the following syntax assuming you
 > had positioned floats:
 > 
 > #myImage {
 > float: positioned;
 > position: page center;  // (Note that the latest draft of CSS3 
 >                             positioning seems to make these two 
 >                             values exclusive, but you should obviously 
 >                             be able to center within a page).
 > }

When you have exactly two columns, this makes sense. But if the author
sets 'columns: <length>' (which is good practice for scalable designs)
end result may be one or three columns, depending on the width of the
viewport. When a centered exclusion added to a page with an odd number
of columns, you suddenly get text flowing on both sides of a wedge.
This isn't reader-friendly. It's so reader-unfriendly that I don't
want to provide ways in CSS to have text on the same line appear on
both sides of an exclusion.

Rather, positioning of the exclusion should be done wrt. columns. When
there are two columns, you should be able to have an exclusion between
column 1 and column 2 -- which is what your code above achives. When
there are three columns, you also want the exclusion between two
columns -- most newspapers put it between column 1 and column 2.

This use case cannot be handled with the current
exclusions/positioning proposals from MS/Adobe. As such, GCPM is the
more powerful alterative; in GCPM, this is handled with floats and
float-offset:

   http://dev.w3.org/csswg/css3-gcpm/#the-float-offset-property

 > You could imagine also allowing column based positioning too to do
 > floating to the top and bottom of columns.
 > 
 > #myImage { float: positioned; position: column; top:0 }

Yes. This seems identical to:

   #myImage { float: top }

in GCPM. If you need offsets, you can e.g. use

   #myImage { float: top left; float-offset: 10px 10px }

I'm not tied to a specific syntax, and using properties/values from
positioning may make sense. But positioning wrt. columns and pages
must be part of a solution.

 > I think we need to not lose sight of the fact that in many of these
 > magazine layout use cases the images are most definitely floating
 > (as are sidebars, etc.). I don't see any distinction between an
 > image that happens to intrude into multiple columns and float right
 > vs. an image that intrudes into a normal single column flow and
 > floats right. It would be silly to have to define the former using
 > some completely brand new concept, e.g., to state that you have to
 > make a region just to hold the float, etc.

Yes.

 > I believe if we allow floats to also be positioned objects
 > (something I have even already prototyped in WebKit and that turned
 > out to be a surprisingly simple change), then floats can simply
 > *be* exclusions, and we'll have all the power we need to put
 > exclusions everywhere authors would want.

I think this is a sensible approach. But, what happens in your
implementaiton if you position a float into a table, thereby
overshadowing (parts of) several cells? 

-h&kon
              Håkon Wium Lie                          CTO °þe®ª
howcome@opera.com                  http://people.opera.com/howcome

Received on Saturday, 18 February 2012 10:51:49 UTC