Layout Algorithm Improvements for Web User Interfaces

L. David Baron

Mozilla Corporation

dbaron@dbaron.org

Xtech 2006, Amsterdam

Wednesday, May 17, 2006

Traditional document layout

Image of Rosetta Stone, with lines of text

Traditional document layout

Image of Koran, with lines of text

Traditional document layout

Image of part of Strasbourg Oaths, with lines of text

Traditional document layout

Image of Rigveda, showing lines of text

Traditional document layout

Image of Chinese calligraphy, showing vertical lines of text

Traditional document layout

Image of Chinese calligraphy, showing vertical lines of text

Traditional document layout, enhanced

Image of Gutenberg Bible, showing two columns of text, with some enhanced first-letter effects

Traditional document layout, on the Web

W3C HTML4 specification, showing traditional document layout

Traditional document layout, on the Web

W3C TR page, showing mostly traditional document layout

Traditional document layout, on the Web

W3C CSS2 specification, showing traditional document layout with tables

Percentage height tables for vertical centering

amstel.com, with a fixed-size page vertically and horizontally centered using percentage height tables

Table layout using intrinsic widths of content

W3C CSS2 specification, showing table laid out using intrinsic widths

Table layout using intrinsic widths of content

Firefox tinderbox, showing table laid out using intrinsic widths

Common use of intrinsic widths

W = max(Wmin, min(Wpref, Wavail))

Intrinsic widths are good

tolerance to other user preferences or device characteristics

Table layout using intrinsic widths of content

Firefox tinderbox, showing table laid out using intrinsic widths

Problems with layout not using intrinsic widths

cnn.com, showing problems with narrow window

narrow window width

Problems with layout not using intrinsic widths

nytimes.com, showing problems with 16px minimum  font size

large font size

Problems with layout not using intrinsic widths

nytimes.com, showing problems with narrow window

narrow window width

Wrapping problems with table layout

old mozilla roadmap page, showing wrapping problems when using tables for layout

(the layout problems, which are in addition to the semantic problems)

User interface layout

Image of GNOME desktop background preferences, showing a dialog that behaves well when resized

User interface layout

Image of Firefox browser, showing a window that behaves well when resized

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

Image of sliding doors example, showing tabs made using floats

One true layout

Why this is hard

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

So authors use it instead of author-controlled layout

Requirements

What we need in layout systems