Layout & HTML: an evaluation of proposed mechanisms

Recently, several HTML layout languages have been proposed. This document discusses them and tries to evaluate their performance.

The mechanisms are:

• HTML tables: a popular mechanism for achieving layout on the web
• Netscape frames: a proposed mechanism that allows multiple documents in the same window
• Microsoft 2D: Micosoft proposes to extend the functionality of the FRAME tag and partly bases the extensions on CSS syntax
• The CSS layout language: "classic"
• The CSS layout language: "cherry"
• Java applets

1. compatibility: is the HTML content presentable without layout-aware clients? It is important that new markup does not break existing implementations.
2. reusability: is the layout reusable for other presentations? I.e., can the layout be separated from the HTML content? The separation of content and presentation has many documented advantages.
3. scalability: does the presentation scale gracefully across a range of devices? E.g., will the presentation work well in a smaller or bigger window, or a window with a different aspect ratio? Will it work on different screen resolutions? Will it print well?
4. fidelity: how well will the layout mechanism convey the intended design?
5. readability: is it easy for a human to read -- and write -- the proposed markup?

	Cartoon: background image with overlaid text where the positioning of text is important.
	Brochure: image and text elements are placed relative to each other, i.e., if the first text element grows vertically, the image position will be lowered accordingly. There is no text flow from one frame to another.
	Windows: current window systems split the screen into scrollable windows. Unlike the window systems, the panes in this scenario cannot be overlapping. This scenario only works on a dynamic computer display.
	Academia: an academic article often has footnotes and "balanced" double columns. The size of the footnote area will influence the other content.
	Newspaper: multiple articles from multiple sources are combined in a multi-column design.
	Magazine: a multi-column page with "insets" where text flows around on both sides.

Summary

	compatibility	reusability	scalability	fidelity	readability
HTML tables	initially poor	poor	good	good	poor
Netscape frames	fair	poor	possible	debated	fair
Microsoft 2D	fair	poor	possible	unclear	fair
CSS classic	good	fair	possible	unclear	good?
CSS cherry	good	good	good	unclear	good??
Java applets	poor	unclear	good	unclear	none/poor

In the table below, "not feasible" means that an important feature for realizing a certain scenario is missing. E.g., without support for text flows, multi-column layouts are static and hard to achieve.

	cartoon	brochure	windows	academia	newspaper	magazine
HTML tables	no	yes	no	not feasible	not feasible	not feasible
Netscape frames	no	not feasible	yes	no	no	no
Microsoft 2D	yes	not feasible	yes	not feasible	not feasible	not feasible
CSS classic	yes	not feasible	yes	yes	yes	yes
CSS cherry	yes	not feasible	yes	yes	yes	yes
Java applets	yes	yes	yes	yes	yes	yes

HTML tables

HTML design goals

compatibility: initially poor

when introduced, tables broke contemporary browsers. Tables are one of the main reasons behind content negotiation based on the User-agent field.

reusability: poor

layout and content are mixed in the HTML source

scalability: good

by default, tables will scale to the width of the canvas. In practice, tables are often given sizes in pixel units which freeze the presentation.

fidelity: good

authors seem happy with the visual effects tables offer.

readability: poor

Since the markup is mixed in with the content, table elements often span several screens of HTML markup.

Scenarios

cartoon: no

not possible in current implementations. When support for CSS1 is added, a table element can be given a background image, and a fixed size table could perceivably support this scenario

brochure: yes

Tables support this scenario very well. The HTML for the scenario example looks like:

<TABLE>
<TR><TD>A brochure with..
<TR><TD><TD><IMG SRC-"fish.png">
<TR><TD>Note that there is...
</TABLE>

windows: no

academia: not feasible

Not feasible since text cannot flow automatically from one table cell to another

newspaper: not feasible

Not feasible since text cannot flow automatically from one table cell to another

magazine: not feasible

Not feasible since text cannot flow automatically from one table cell to another

Netscape frames

HTML design goals

compatibility: fair

Netscape propose a NOFRAMES element where non-frames browsers will find alternative content. The exact syntax of this element is debated.

reusability: poor

While the information about the frames are contained within HTML element, they are not mixed with content. Rather, they point to content with SRC attributes on the FRAME elements.

scalability: possible

Frames are by default sized in absolute pixel values, but percentage values and "relative scaling values" can also be used.

fidelity: debated

There are diverging views among authors on how well frames suit their needs and mental models

readability: fair

Scenarios

cartoon: no

brochure: not feasible

windows: yes

Frames were designed to support this scenario, and they do it well. The markup to achieve the scenario example looks like:

<FRAMESET ROWS="50%,50%">
  <FRAMESET COLS="60%,40%">
    <FRAME SRC=foo.html>
    <FRAME SRC=foo.html>
  </FRAMESET>
  <FRAME SRC=foo.html>
</FRAMEMESET>

academia: no

not possible, the size of a frame cannot be influenced by the size of its formatted content

newspaper: no

It is not possible to emulate the newspaper metaphor, but some would argue that multiple frames with individual scrollbars is an acceptable, if not better, solution.

magazine: no

panes are strictly rectangular, and there is no concept of flow from one to another

Microsoft 2D

HTML design goals

compatibility: fair

2D is based on Netscape frames, but handles alternative content somewhat differently. Instead of a NOFRAMES element, FRAME elements have content that is displayed if the FRAME attributes are not understood.

reusability: poor

Although partly based on CSS syntax, the underlying model does not support reusability since layout is tied to individual elements. I.e., it is not possible to express a generic template.

scalability: possible

Lengths can be specified in pixel or percentage units. The proposal may encourage pixel-base positioning.

fidelity: unclear

this is yet to be determined

readability: fair

fair, one has to know certain rules to predict what a given browser will display, e.g. "the HTML within a 2D FRAME element is ignored if the browser understands 2D"

Scenarios

cartoon: yes

<FRAME LAYOUT=FIXED STYLE="width: 100; height: 100; background: bg.png">
  <FRAME STYLE="x: 10; y: 10; width: 80; height: 20">
    <P>But the evil creature spare none..
  </FRAME>
</FRAME>

brochure: not feasible

not feasible since the content of an element can't influence the size of the corresponding frame.

windows: yes

It seems like this scenario can be supported by using percentage units for lengths:

<FRAME STYLE="width: 100%; height: 100%>
  <FRAME STYLE="x:0%; y:0%; width:60%; height:50%">
    Lorem ipsum..
  </FRAME>
  <FRAME STYLE="x:60%; y:0%; width:40%; height:50%">
    .. adpiscing elit ..
  </FRAME>
  <FRAME STYLE="x:0%; y:50%; width:60%; height:50%">
    .. adpiscing elit ..
  </FRAME>
 </FRAME>

academia: not feasible

Not feasible since there is no concept of text flow.

newspaper: not feasible

Not feasible since there is no concept of text flow.

magazine: not feasible

Not feasible since frames are rectangular and there is no concept of text flow.

CSS classic

HTML design goals

compatibility: good

All layout information is placed in the LINK element, STYLE element or STYLE attribute.

reusability: fair

The style sheet contains no document-specific information (e.g. URLs) and can be applied to other documents. However, frames cannot be resized based on the content of an element and this limits the recycling of style sheets.

scalability: possible

Lengths can be specified in any length units supported by CSS1 (pixels, percentages, absolute lengths).

fidelity: unclear

readability: good?

The CSS syntax appears more readable the HTML-based alternatives, but opinions may vary.

Scenarios

cartoon: yes

<STYLE>
  @frame cartoon {
    geometry: 0px 0px 100px 80px 2; /* x y width height z-order */
    background: bg.png;
  }
  @frame text1 {
    geometry: 10px 10px 80px 20px 1;
  }
  @frame text2 {
    geometry: 80px 80px 20px 20px 0;
  }
</STYLE>

<P STYLE="flow: text1">But the evil creature spared none
<P STYLE="flow: text2">yow!

brochure: not feasible

not feasible since the content of an element can't influence the size of the corresponding frame.

windows: yes

<STYLE>
  @frame frame1 {
    geometry: 0% 0% 60% 50% 0; /* x y width height z-order */
  }
  @frame frame2 {
    geometry: 60% 0% 40% 50% 0;
  }
  @frame frame3 {
    geometry: 0% 50% 100% 50% 0;
  }
</STYLE>

  <P STYLE="flow=frame1"> Lorem ipsum..
  <P STYLE="flow=frame2"> .. adpiscing elit ..
  <P STYLE="flow=frame3"> .. adpiscing elit ..

academia: yes

This scenario is feasible, but requires some extra CSS properties and values.

<STYLE>
  @frame academia {
    geometry: 0% 0% 100% 100% 0; /* x y width height z-order */
    
  }

  H1, P { flow: academia }
  P { column-width: 30em }
  P.footnote { float: bottom }
</STYLE>

  <H1>A new theory</H1>
  <P>Lorem ipsum..
  <P CLASS=footnote>Footnote: Lorem ipsum dolor sit..

newspaper: yes

This scenario is feasible, but requires some extra CSS properties and values.

<STYLE>
  @frame banner {
    geometry: 0% 0% 100% 100% 0; /* x y width height z-order */
  }

  @frame article1 {
    geometry: 0% 20% 75% 80% 0 
  }
  @frame article2 {
    geometry: 0% 25% 25% 75% 0 
    background: gray;
  }

  P { 
    flow: from-predecessor 
    column-width: 30em
  }
  P.initial { column-width: max }
</STYLE>

  <H1 STYLE="flow=banner">MY PAPER</H1>
  <H1 STYLE="flow=article1>Lorum Ipsum</H1>
  <P CLASS=initial>Lorum Ipsum dolor..
  <P>..
  <P>..

  <H2 STYLE="flow=article2>Yow</H2>
  <P>Lorum ipsum..

magazine: yes

Note the use of two different frame to get a two-column layout. In most cases, using one frame and the 'column-width' property will be simpler.

<STYLE>
  @frame column1 {
    geometry: 0% 0% 50% 100% 1; /* x y width height z-order */
    flow: main;
  }
  @frame column2 {
    geometry: 0% 50% 100% 100% 1; /* x y width height z-order */
    flow: main;
  }

  @frame image1 {
    geometry: 50% 50% 200px 200px 0 displace; /* proportional placement */
  }

  <P STYLE=float: main">Lorum Ipsum dolor..
  <P>..
  <P>..
  <IMG SRC=fish.png STYLE="float: image1">

CSS cherry

HTML design goals

compatibility: good

All layout information is placed in the LINK element, STYLE element or STYLE attribute.

reusability: good

The style sheet contains no document-specific information (e.g. URLs) and can be applied to other documents. Also, since frames can be resized based on the content of an element, recycling of style sheets is encouraged.

scalability: good

Various layout managers can be assigned to control the size and placement of frames. Potentially, the layout manager can be a function of the canvas size. Also, frames can grow and shrink based on their content.

fidelity: unclear

readability: good??

The CSS syntax appears more readable the HTML-based alternatives, but opinions may vary. Also, the name of a layout manager may not be able to fully describe its function.

Scenarios

cartoon: yes

<STYLE>
  @frame cartoon {
    x:0px; y:0px; z-order:2; width:100px; height:80px;
    background: bg.png;
    layout-policy: bulletin-board;
  }
  @frame text1 {
    x:10px; y:10px; z-order:1; width:80px; height:20px;
  }
  @frame text2 {
    x:80px; y:80px; width:20px; height:20px;
  }
</STYLE>

<P STYLE="flow: text1">But the evil creature spared none
<P STYLE="flow: text2">yow!

brochure: not feasible

This scenario cannot be realized with the currently proposed layout managers. A 'table' manager could be added, but it would need parameters to detemine the number of rows and columns. Similarly, children frames would need a way to request a position within the table.

windows: yes

<STYLE>
  @frame main {
    width: 100%; height:100%;
    layout-policy: rows;
  }
  @frame frame1 {
    parent: main;
    width: 60%; height: 50%;
  }
  @frame frame2 {
    parent: main;
    width: 40%; height: 50%;
  }
  @frame frame3 {
    parent: main;
    width: 100%; height: 50%;
  }
</STYLE>

  <P STYLE="flow=frame1"> Lorem ipsum..
  <P STYLE="flow=frame2"> .. adpiscing elit ..
  <P STYLE="flow=frame3"> .. adpiscing elit ..

academia: yes

This scenario is feasible, but requires some extra CSS properties and values.

<STYLE>
  @frame academia {
    x: 0%; y:0%; width: 100%; height: 100%;
  }

  H1, P { flow: academia }
  P { column-width: 30em }
  P.footnote { float: bottom }
</STYLE>

  <H1>A new theory</H1>
  <P>Lorem ipsum..
  <P CLASS=footnote>Footnote: Lorem ipsum dolor sit..

newspaper: yes

This scenario is feasible, but requires some extra CSS properties and values.

Using the 'tile' layout policy in combination with resizable child frames, child frames do not have to be sized in detail.

<STYLE>
  @frame newspaper {
    layout-policy: grid;
  }
  @frame banner {
    parent: newspaper;
    x: 10%; y: 50%; /* proportional placement */
  }

  @frame article1 {
    parent: newspaper;
    x: 0%; y: 100%; /* proportional placement */
    resize-policy: resizable;
  }
  @frame article2 {
    parent: newpaper;
    x: 100%; y: 100%; /* proportional placement */
    background: gray;
    resize-policy: resizable;
  }

  P { 
    flow: from-predecessor 
    column-width: 30em
  }
  H1, P.initial { column-width: max }
</STYLE>

  <H1 STYLE="flow=banner">MY PAPER</H1>
  <H1 STYLE="flow=article1>Lorum Ipsum</H1>
  <P CLASS=initial>Lorum Ipsum dolor..
  <P>..
  <P>..

  <H2 STYLE="flow=article2>Yow</H2>
  <P>Lorum ipsum..

magazine: yes

This scenario is feasible, but the definition of the layout managers' behavior whne child elements have size and/or posistion set needs to change. Until this is done, this example should probably be skipped.

Note the use of two different frame to get a two-column layout. In most cases, using one frame and the 'column-width' property will be simpler.

<STYLE>
  @frame main {
    layout-policy: rows;
  }

  @frame column1 {
    parent: main;
    alpha: 1;
    width: 50%;
    resize-policy: resizable;
  }
  @frame column2 {
    parent: main;
    alpha: 1;
    width: 50%;
    resize-policy: resizable;
  }

  @frame image1 {
    parent: main;
    alpha: 0 displace;
    x: 50%; y: 50%; /* proportional placement */
  }

  <P STYLE=float: main">Lorum Ipsum dolor..
  <P>..
  <P>..
  <IMG SRC=fish.png STYLE="float: image1">

Java applets

HTML design goals

compatibility: poor

reusability: unclear

scalability: good

fidelity: unclear

readability: none/clear

Scenarios