[css3-floats][css3-exclusions] priorities and alternatives

The layout concepts in CSS are largely derived from the tradition of
document layout.  That was a sensible idea at the time CSS was
developed.  However, the evolution of the Web since then has made a
significant part of the Web more like user interface than like
documents.  User interfaces are typically designed using a different
set of layout primitives -- a set that CSS does not provide.  Their
absence has been a significant obstacle to users of CSS and a source
of a significant portion of the complaints about CSS (even if those
complaints are directed at details of CSS's current features).

I believe the focus for improving layout in CSS should be on
bringing in ideas from user interface layout into CSS, as flexbox
and grid do, rather than bringing in yet another round of advanced
document formatting features.  Thus I see work on css3-floats [1] /
css3-exclusions as diverting energy away from the layout problems
that we urgently need to address.

I also think css3-floats is taking the wrong approach to what it is
doing:  it is building on concepts (such as absolute positioning)
that are already known to be problematic in terms of producing
layouts that don't respond well to changes in device size and other
device characteristics.  I think many of the examples highlighted as
things that can be done with this specification are things that it
won't do a good job at when faced with different devices.  For
example, placing pull-quotes in the middle of pages using absolute
positioning will lead, after reformatting for a different device, to
some of those pull-quotes overlapping or flowing around each other
on the same page.


During the meeting in Seattle, I agreed (under some pressure) to
describe an alternative to css3-floats that I would prefer that
would address its use cases described in [2] (though I'm far from
convinced of the need for use case #2, and I don't address it).

The alternative I would like would be the combination of:

 * the 'wrap-shape', 'wrap-image', 'wrap-margin', and
   'wrap-padding' features from css3-floats (or something like them)

 * a new property for additional float placement types similar to
   the 'wrap-type' from css3-floats or the float types from
   css3-gcpm [3], which allows:
    * floats being placed some percentage of the way across their
      container, with flow on both sides of them, but otherwise
      similar to the current folat model
    * floats at or near the beginning of a multi-column element
      being placed on a column boundary (both sides of which have
      their contents *after* the float)

 * a general mechanism for content reordering to address cases where
   the floats are at a point in the content that doesn't match where
   they ought to be positioned

(Though they're not mentioned in the use cases list, I did here some
mention of page floats as a use case -- i.e., floats to the top or
bottom of a page.  If that's a use case, I think the correct way to
address it is via a page float mechanism designed for exactly that
-- figures that are pulled out of the text and float to the top or
bottom of an appropriate page, with collision handling that pushes
them to the next page.)

That said, as I said above, I think this is lower priority than user
interface layout features.

-David

[1] http://www.interoperabilitybridges.com/css3-floats/
[2] http://wiki.csswg.org/ideas/css3-floats-use-cases
[3] http://dev.w3.org/csswg/css3-gcpm/#page-floats

-- 
𝄞   L. David Baron                         http://dbaron.org/   𝄂
𝄢   Mozilla Corporation               http://www.mozilla.com/   𝄂

Received on Monday, 1 August 2011 23:00:06 UTC