Layout Algorithm Improvements for Web User Interfaces
Traditional document layout
Traditional document layout
Traditional document layout
Traditional document layout
Traditional document layout
Traditional document layout
Traditional document layout, enhanced
Traditional document layout, on the Web
Traditional document layout, on the Web
Traditional document layout, on the Web
Percentage height tables for vertical centering
Table layout using intrinsic widths of content
Table layout using intrinsic widths of content
Common use of intrinsic widths
W = max(Wmin, min(Wpref, Wavail))
Intrinsic widths are good
tolerance to other user preferences or device characteristics
- small changes in window width
- varying font sizes
Table layout using intrinsic widths of content
Problems with layout not using intrinsic widths
narrow window width
Problems with layout not using intrinsic widths
large font size
Problems with layout not using intrinsic widths
narrow window width
Wrapping problems with table layout
(the layout problems, which are in addition to the semantic problems)
User interface layout
User interface layout
Author-controlled layout
Not useful for adapting to devices or preferences.
Purpose of floats
Text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
IMAGE
Figure 1: caption for image
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
Tabs built from floats
Why this is hard
- Wrong programming model
- The code doesn't look like the underlying concept being implemented
- We could write integer arithmetic code by representing integers as linked lists, but we don't, for good reason
- Depends on edge cases rather than main use cases
- Lots more implementation bugs
- Hard to fix implementations to improve main use cases
We need to provide integers!
XUL layout (horizontal boxes)
XUL layout (vertical boxes)
XUL layout (horizontal boxes, with properties)
just as before
XUL layout (horizontal boxes, with properties)
plus dir="reverse"
XUL layout (horizontal boxes, with properties)
plus pack="center"
XUL layout (horizontal boxes, with properties)
plus align="end"
XUL layout (horizontal boxes, with flex!)
just as before
XUL layout (horizontal boxes, with flex!)
flex on second box
XUL layout (horizontal boxes, with flex!)
flex on both boxes (1, 4)
XUL layout
Huge device differences
- Content reordering
- Limit separate versions
- Avoid increases in development costs
Content reordering
- Simple
- Disconnected from layout system
So authors use it instead of author-controlled layout
Requirements
- mix flexible box layout and traditional layout
- how much? where?
What we need in layout systems
- Flexible box layout
- Content reordering