Layouting

The premise for the layouting is using sane defaults. Ignoring the propositions of css and html for a while, imagine a whitespace significant template.

[template]
vblock
  hblock
    first
    vblock
      second
      third
  vblock
    fourth
    fifth

hblock creates a container where children are positioned horizontally vblock creates a container where children are positioned vertically

Let's imagine that the default behavior is to:

• render the whole document in the window regardless if it fits.
• clip any excess content
• divide all space equally between children.

So for the document above, it would look something like:

|----------------|-----------------|
|                |                 |
|                |     second      |
|                |                 |
|     first      |-----------------|
|                |                 |
|                |      third      |
|                |                 |
|----------------------------------|
|                                  |
|              fourth              |
|                                  |
|----------------------------------|
|                                  |
|              fifth               |
|                                  |
|----------------------------------|

This makes it terrfically simple to compute the expected position of each child, as the parent already knows the verticality and dimensions of its children.

For instance, imagine adding a width to the first child, and trimming some height from the hblock

[ template ]
root
  hblock {height="30%"}
    first {width="30%"}
    vblock
      second
      third
  vblock
    fourth
    fifth

The resulting children flex around this, resulting in something like

|------------|---------------------|
|            |     second          |
|    first   |---------------------|
|            |      third          |
|----------------------------------|
|                                  |
|                                  |
|              fourth              |
|                                  |
|                                  |
|----------------------------------|
|                                  |
|                                  |
|              fifth               |
|                                  |
|                                  |
|----------------------------------|

Semantic vs Presentational

"But skinnyjames!" a voice cries inside my head, "You should always strive to decouple the presentation of children with the semantic markup used to describe them!"

Sure.

While the proposed specification doesn't yet describe the behavior of the document on a mobile device, it does in fact, acknowledge and describe sane defaults. Semantic HTML elements are in fact, opinionated in their presentation, because they have to be rendered in some way in the absense of an external presentation layer.

info

Default asumptions that most browsers current make about a document include:

• that the document is an infinitely growing space in a vertical direction.
• that some elements (block style) take up the full width of the page.
• that most elements don't flex and float, and grow the size of their parent.
• that the height and fontsize of various tags vary according to what a vendor feels is correct.

Consider a responsive nav behind a hamburger menu. Most implementations cannot describe this behavior without changing or duplicating semantic markup. Ultimately the HTML specification leads to a lot of manipulation of both the styles and the dom in order to achieve a desired result. This could be because HTML wasn't designed to accomodate applications. (the concept of forms were introduced in version 2 of the spec)

Conclusions

To recap, this proposal for layouting suggests some behaviors that are different from web.

• Child verticality and width/height are baked into the nodes by default.
• The template representing a layout is 1-1 with the application window.
• Implementations must explicity consider these behaviors.