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

Grid, Templates, and other coarse layout systems
Scribe: fantasai

   Alex wants to show a demo
   Alex: I'll start with something simple
   Alex: This is our internal test framework
   Alex: It does have Trident, but it's not IE
   Alex: This is my private build, which is very very experimental
   Alex: What we have here is a grid, and I'll show how it is defined
   Alex: This is the old syntax, it's not what we agreed when we discussed
         it and came up with repeat and fr unit
   Alex: but we're not discussing syntax
   Alex: This defines a grid with five columns
   <alexmog> 	grid-columns: 1* 2* 3* 4* 5*;
   <alexmog> <!DOCTYPE HTML>
   <alexmog> <html>
   <alexmog> <head>
   <alexmog> <meta http-equiv="X-UA-Compatible" content="IE=9" >
   <alexmog> <style>
   <alexmog> body, html
   <alexmog> {
   <alexmog> 	margin:0;
   <alexmog> 	padding:0;
   <alexmog> 	width:100%;
   <alexmog> 	height:100%;
   <alexmog> }
   <alexmog> div.grid
   <alexmog> {
   <alexmog> 	background:darkgray;
   <alexmog> 	position:relative;
   <alexmog> 	height:50%;
   <alexmog> 	width:50%;
   <alexmog> 	margin:50px;
   <alexmog> 	grid-columns: 1* 2* 3* 4* 5*;
   <alexmog> 	grid-rows: 1* 2* 3* 4* 5*;
   <alexmog> }
   <alexmog> .figure
   <alexmog> {
   <alexmog> 	position:absolute;
   <alexmog> 	-ms-filter:"Alpha(Opacity=70)";
   <alexmog> }
   <alexmog> </style>
   <alexmog> </head>
   <alexmog> <body id="Body">
   <alexmog> <div id="BlackSquare" class="grid">
   <alexmog>     <div class="figure" style="background:blue; top:1gr; left:1gr; width:1gr; height:1gr;"></div>
   <alexmog>     <div class="figure" style="background:yellow; top:1.5gr; left:1.5gr; width:1gr; height:1gr;"></div>
   <alexmog>     <div class="figure" style="background:green; top:2.5gr; left:2.5gr; width:1gr; height:1gr;"></div>
   <alexmog>     <div class="figure" style="background:orange; bottom:0.5gr; right:0.5gr; width:1gr; height:1gr;"></div>
   <alexmog> </div>
   <alexmog> </body>
   <alexmog> </html>

   Alex: These colored rectangles are absolute-positioned using grid units.
         They're all 1gr unit wide and 1gr unit tall. The first one is based
         at 11, the second at 1.5.
   Alex: The way gr works with fractional units, goes from center of one grid
         column to center of other grid column.
   Alex: The orange one is positioned from the right

     Alex shows a grid with five columns and five rows
     The first column and row is narrow, they gradually increase to wide for
     the last column and row
     A blue rectangle fills the second row second column
     Various other colored rectangles shift down, with their corners each in
     the center of a box in the grid

     Alex shows another demo with multicol text
     His build shows the debug grid lines at the edges of the column boxes,
     breaking the multicol element into grid columns of column boxes and
     column gaps
     He has manually set up a grid to match the multicol element (in the
     future a grid will be automatically created to match the multicol element)
     Colored boxes are given a width in grid units
     and the demo shows how they change size and position as they are shifted
     over, 0.5gr by 0.5gr
     A series of 3gr wide boxes is green
     the first one starts at the left edge, ends on the right edge of the
     second column
     the second one starts halfway in the first column, ends halfway through
     the second column gap
     the third one starts in the first column gap, ends at the right edge of
     the second columnn gap (start of the third column)

   howcome: There are a amazing things you can do with this
   howcome: but with abspos elements you can't tell how tall they'll be
   howcome: abspos elements would not intrude on the content.. but floats would
   howcome: have you implemented floats?
   howcome wants to see floats
   Alex suspects this will crash

   Molly: What happens if you use min or max heights?
   Molly: with an auto-height box
   Molly: Would that interfere with the grid system?
   howcome: no, you'll just get a fixed height if the auto goes over and
            need a scrollbar or something
   Alex shows a float that is centered in a 2-column element
   Alex has positioned it with gr units, using abspos, plus
     -ms-float-wrap: square;
   Alex: This is equivalent of float-offset of 1gr
   Alex: I thought of implementing float-offset as well, but we can simulate
         any float-offset with abspos with this
   howcome: So you position something absolutely, then flip a switch that
            makes it intrude
   howcome: wouldn't it be better to float it from the beginning?
   Alex: I started with this implementation for two reasons. It's the minimum
         amount of work to start using grid unit
   Alex: ... how it will work internally anyway
   Alex: Any system of complex floats, I will have two ...
   (talking too fast)

   dbaron: What if I give it top: 50%, which is 50% of the containers height,
           but we don't know the containers height until we've laid out the
   Alex: there's a lot of circular dependencies
   Alex ...
   Alex: Our thinking was that in any circular dependencies like this, we
         will do a two pass layout
   Alex: We will do normal layout that doesn't do any backwards positioning,
         that gives the enter points for auto positioning
   Alex: If we need to recalculate, we then do another pass, but don't
         reposition the auto
   dbaron: how does this interact with other two pass layouts, if you nest them?
   dbaron: There's stuff with various float -positioning stuff that already
           does two-pass layout
   dbaron: some of this circular stuff will be hard to get right
   howcome: I would like to see a bake-off here to see which is the best syntax
   Alex: I make no claims on syntax with this prototype, this prototype only
         tries to show up the units
   howcome: I think using float and float-offset better expresses
   Steve: no, because as I change the column widths, the figure goes all over
          the place
   howcome: no, float-offset works horizontally and vertically
   howcome: look at the gcpm draft
   discussion of whether it's floats or abspos
   Steve: The important part of float is that it keeps an anchor in the text
          and tries to stay near it
   howcome: In GCPM we extend float to be able to change the reference point
            to ancestor containers like the multicol element or the page
   howcome: I think we should see the same examples and syntax side by side
   Steve: Yes, we should look at it in both kinds of models
   Steve: If that's the only thing we're discussing, that's pretty good :)

   Alex shows another demo
   Alex: This is something like what a news site would look like

     Alex has NEWS in blue stretched across the top of a grid with
     six columns and narrow column gaps in between
     the horizontal grid is 1em straight through
     Article text is laid out in columns
     first article takes up two columns
     second three columns, split into 3 columns (muticol)
     last one slips into last column
     (first article is two grid columns, but only one column of text)

   howcome: what happens if you make the page narrower? do the columns collapse?
   howcome: multicol reduces the number of columns as you run out of room
            for them
   fantasai: I'm not sure absolutely positioning this layout is a good idea.
   fantasai: I would want to use in-flow layout, with snap-to-grid
   fantasai: so the boxes align on the grid lines, but they have the ability
             to adapt to the content and the available width
   Alex: ...
   Alex thinks snap-to-grid is a good idea, it would be the next step
   Steve: If I had float-position, and said float-position: 0 1gr, wouldn't
          that snap to grid?
   Alex: You just came up with a property that doesn't exist
   Alex: snap-to-grid would mean from your starting position, find the next
         grid line
   Alex: snap-to-grid should be a separate property

   dbaron: I think part of the question here is when people have layouts like
   dbaron: That has stuff wrapped around something in the middle
   dbaron: what rules are determining where that goes?
   dbaron: What leads people to chose to put something where it's put?
   dbaron: Learning that should determine how we design a system that lets
           them do that
   * fantasai thinks dbaron's question is very important
   Alex: In one process you have a grid, and you know exactly where everything
         goes (?)
   Alex: In another process, you have a bunch of stuff that you want to align
         to the grid, but you're not sure exactly where they go
   Alex: For the second system, you'd use snap-to-grid
   dbaron: I was asking more about the case where you have a thing with
           content flowing around it, is it floating, or abspos, or some
           new thing that's neither

   fantasai: So suppose I have a 2-column layout with a bunch of boxes in
             each of unknown heights, and I want the tops and bottoms of
             these boxes in the columns to snap to the grid [draws on whiteboard].
   dbaron: Can snap-to-grid be a length, so height: calc(auto + snap-to-grid),
           calc(5em + snap-to-grid)?
   Alex: I was thinking of snap-to-grid being a property.
   dbaron: If snap-to-grid is a property, what do you snap to the grid?
   howcome: I don't think it can be a property, you snap the height
   Alex says snap-to-grid would be a value
   Steve: So you could rop the calc() if you define snap-to-grid to mean
          auto plus snap-to-grid
   fantasai: but the height is the content-box height
   fantasai: What if I want the border-box height to snap to the grid rather
             than the content-box height to snap to the grid?
   fantasai: Consider interaction with min-height.
   Arron: and perhaps I want the min-height to be the previous gridline
   Arron: You might have an overflow condition
   Alex: We have a lot of pretty cool ideas
   Alex: We can try to come up with use cases and examples of syntax
   Alex: I would be willing to try an implementation
   howcome: We had a document of use cases for floats
   Alex: uc.html in the gcpm directory

   Alex: I didn't meant to make all this conversation about grid positioning,
         I think the agenda item was multiple proposals and how they interact
   fantasai: I think grid positioning plus snap-to-grid would interact very
             well with the template layout module
   Bert: The abspos intrusion is intriguing, but are other people willing to
         implement it?
   dbaron: With abspos, we lay out the abspos elements *after* we're done
           laying out their container
   dbaron: Because of percentages etc.
   dbaron: but that doesn't let you wrap text around it
   <howcome> http://dev.w3.org/csswg/css3-gcpm/uc.html
   dbaron: I don't understand how you do this
   Alex: abspos intrustions are really floats, just because the syntax is the
         same as abspos doesn't mean it has to be laid out as such
   dbaron: But if we're doing in the abspos model, we have features like
           top: 50% and bottom: 50%, that we might not want in this case
   Alex: We could disallow percentages on absolute intrusions
   Alex: Or we may have to deal with multiple pass layout
   dbaron: I'd like to avoid multiple-pass layout as much as possible
   dbaron: Because I don't think authors know what triggers it, and trigger
           it by accident
   dbaron: And then nest like five things with multiple-pass layout, which
           slows down pages considerably
   Molly: What would cause that? I know tables cause that
   dbaron: Tables have fewer passes because the passes are to do different things
   dbaron: And the first one you can cache
   dbaron: There's potentially a third pass there to do height recalculation
   dbaron: There's also some multiple pass stuff in our implementation for
           line breaking and floats.. that doesn't necessarily need to be
           multiple passes
   Steve: If you're doing floats that can cross columns backwards, that is
          enough to create most of the problems you're dealing with
   dbaron: fwiw, I've been investigating some float-wrapping bugs
   dbaron: And I've written testcases that no browsers get right according
           to spec
   dbaron: And I couldn't figure out how to implement in our implementation
           at all
   dbaron: so I just gave up
   dbaron: And that's the float stuff in our existing model
   Steve: ... length of total container is dependent on those
   Steve: We didn't allow circularity. One way to avoid that is to say you
          can't use percentage heights for this sort of thing
   Steve: You could use grid unit heights
   fantasai: you can do percentages with grid units
   fantasai: by defining the grid relative to the size of the block
   howcome: You could see a cocktail of calc and grid units and
            percentages ... :)

   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

   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
   howcome: Another thing I want from tables is some way to start a new row,
            without having to insert a row element
   snap-to-grid would not solve the equal heights problem in Molly and
   Steve's use cases
   dbaron: Another question I wanted to bring up is what defines the
           horizontal grid lines
   dbaron: Sometimes you want the horizontal grid lines to depend on the
           content in interesting ways like this
   Alex: So far we've tried to avoid fit-to-content with grid lines
   Alex: like template layout depending on content, then defining grid lines,
         that the content relies on
   Alex: that's pretty scary
   Steve: How do I define a sequence of grid cells that make up the region
          into which content is flowed?
   steve: e.g in his story, how do I know that the first story did columns
          1 and 2, and the second 3-4-5, the last 6
   Steve: What is the syntax for specifying the flow sequence?
   <br type="lunch"/>

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

   ?: 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
   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

Received on Wednesday, 17 June 2009 07:48:26 UTC