- From: fantasai <fantasai.lists@inkedblade.net>
- Date: Tue, 16 Jun 2009 23:46:11 -0700
- To: www-style@w3.org
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)
etc
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
contents
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
this
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
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
Received on Wednesday, 17 June 2009 07:48:26 UTC