Re: [CSSWG] Minutes F2F 2009-06-05 Part II: Grid, Templates, and other coarse layout systems

>  howcome: Another thing I want from tables is some way to start a new row,
>           without having to insert a row element

I suggested this in February of this year:
http://lists.w3.org/Archives/Public/www-style/2009Feb/0522.html

display:table-row-start would make the element act like a table-cell,
but force the generation of a new anonymous table-row box.

>  Bert: Another thing that designers will want is some way to position
>        elements but then have them all be as tall as the tallest element
>  Molly: like tables
>  Bert: for example, the news articles in Alex's example, you would want
>        them boxes to be as tall as the tallest
>  Molly: This is one of the most disconcerting and difficult things to
>         explain to people moving from table layout to postinioning
>  fantasai: Template layout plus snap-to-grid would probably be better
>            for Alex's example
>  Daniel: we had this discussion this morning in the car and a proposal
>          could be height: inherit(/selector/)
>  Molly: So suppose you have three TDs in a row. Even if they have various
>         amounts of content, the boxes are all the same height
>  howcome: Now that IE8 has CSS tables, you can express it in CSS tables
>  ChrisL: CSS tables are for non-tabular data that you want to lay out as
> tables
>  Bert: The main shortcoming is that you can't reorder the cells
>  Molly: In an environment such as BBC, the lack of reordering of columns
>         is a huge problem

I agree that CSS Tables and Template Layout, together, can address
most concerns related to this.  I'm highly interested in seeing some
snap-to-grid ideas.

>  Steve: Use case, I have parallel English and French text. Sometimes one
>         is taller, some times another is taller, but in each case I want
>         each paragraph to start at the same level
>  howcome: We have row-based tables now. If you want to do that, you want
>           a column-based table

Yup, a column table is really required here.  I recall that there was
at first a proposal for a CSS tables property that would change a
row-based table to a column-based one, but that it got dropped early
on.  Could we revive this?  Then you could do:

<div #langs>
<div #english>
  <p>foo</p>
  <p>bar</p>
  <p>baz</p>
</div>
<div #french>
  <p>le foo</p>
  <p>le bar</p>
  <p>le baz</p>
</div>
</div>
<style>
#langs { display: table; table-major: column; }
#langs > div { display: table-row; }
#langs > div > * { display: table-cell; }
</style>

Alternately, you could intermix the english and french texts, and
utilize display:table-row-start from my earlier proposal.

> ScribeNick: jdaggett
>  <howcome> http://people.opera.com/howcome/2009/tests/three-column.html
>  steve z drawing grids on whiteboard
>  The grid has five columns, with 2 and 4 being narrow
>  All five rows are equal height
>  how does
>  a. which columns correspond to which flow
>  b. what's the flow order between columns
>  stevez: labeling graph in column major order
>  stevez: need to distinguish gaps too
>  stevez: indesign allows one to specify flow order
>  stevez draws non-rectangular flow example
>  stevez: could use cell indices to specify flow order
>  stevez: not proposing this, but need to consider this case
>  howcome: problem is you're defining an absolute size
>  howcome: so what happens when content spills out
>  stevez: regions may be growable
>  howcome: needs to be growable so fixed coords may not be the best way
>  bert: could still have growable model with coords
>  bert: name defines spaces not overall sizes
>  bert: sizes could be flexible
>  stevez: there are still relations that you want to keep in this example
>  alex: could define a way of specifying grow direction
>  stevez: point is we need to suggest a solution here
>  alex: another thing is need a way to specify linkage with other containers
>  howcome: that gets into page layout
>  howcome talks about pagination in gcpm
>  discussion of whether floats suffice or not
>  fantasai: floats can't intrude on other floats
>  howcome: not yet (threatening tone)
>  dbaron: need to think about borders/bg here
>  bert: want to mention flex unit could also be applied to grid
>  alex: grid syntax and flex model are not supersets of each other
>  bert: a designer liked using template layout but also likes gr units
>  stevez: how do we drive this forward?
>  stevez: we have grids, templates and flex units
>  stevez: how do we make progress?
>  alex: need use cases
>  alex: web/book/other sorts of layout
>  bert: have other examples from designers
>  anne: need to remember ui, example: gmail
>  dbaron comments on funky layout used by gmail
>  <dbaron> well, its use of tables

Regions do indeed need to be growable.  The gmail example gives an
obvious use-case: each of their major boxes can have an unbounded
number of items, and thus height.

>  ?: We should have a repository of use cases
>  stevez: maybe there are students who want to do this as a thesis topic
>  fantasai: hard to get details, not just images but src code
>  molly: yup
>  molly: designers don't understand src, that's rare, only a handful in
>         the whole wide world
>  fantasai: also, how does the model work when you change the window, etc.
>  <fantasai> We need to understand not just the static picture people want
>  <fantasai> but also how it corresponds to the source code
>  <fantasai> (ideally)
>  <fantasai> And then also how that static image changes in response to
>             changes in window size
>  <fantasai> and font size
>  Molly: and dynamic content
>  molly: some of the css11 folks my be a good resource
>  fantasai: static markups are fine if they reflect behavior
>  <fantasai> you'd need multiple pictures and explanation mixed in
>  molly discussing how to interact with design community
>  fantasai: not so much syntax but what the behavior / use case is
>  fantasai: they should not think of syntax at all, or of the constraints
>            CSS has, only what source code they want to input and what
>            they want the resulting layout and behavior to be
>  discussion in infinite loop
>  while (true) { talk to designers }
>  several: ask visual designers with no background in CSS
>  fantasai: consideration there is that most of those are stuck in print
> design, where you get static pixel-perfect layouts
>  fantasai: whereas we need to understand how the layout flexes
>  Alex ...
>  Steve: We want a set of pictures or content scenarios with changes
>  Steve: Give us a layout for this, now what happens if we swap this
>         content with that
>  Steve: And then we have to figure out what the requirements are from that
>  Molly: That's something I could ask via my own website
>  Molly: We could find a lot of people that would contribute to that
>  Molly: We just need some set criteria so we get useful results
>  Molly: It may be useful also to go to hybrid designers, good code and good
>         design
>  Arron: Start with the visual designers, then go to the more technical
> people
>  glazman: end of item
>  ACTION: Molly set up a list of criteria for fishing for layout reqs
>  ACTION: Molly find a place to host feedback

I have at least three recent examples from my own work that would have
benefitted from a good layout manager.  As it is they ended up rather
funky, and two of them require JS to work like I want them to.  I can
provide pictures, current code/layout, and desired code.  I can't
point to any of them right now, because they're company-internal, but
at request I can pull them out and make example standalone pages.


Btw, I like the talk about the grid layout in the email, and wish I
could have witnessed the examples!

Received on Wednesday, 17 June 2009 15:52:22 UTC