Layout in HTML

For an overview of existing layout method see this page. Here is some informations on doing layout in HTML. What can we do, and in what ways can we do it.

What can we do in HTML

HTML is historically a flow-oriented layout system. In the old days, tables were used for layout. Then we got float, which helped with getting some content out of the flow. But still, things are very much flow-oriented by default. Now there is display: flex, which looks promising but is rather new. Also display: grid, but that's too novel at this point. You can always position the elements directly (css position: absolute) via CSS. It is more work, but it gives you all the flexibility.

Two types of layouts

There are essentially two types of layouts: the automatic layout and the manual layout. Automatic layout's (like vbox, hbox and grid) need to achieve good sizing of the elements without any user intervention (subject to the rules provides by the user). It is important that the layout is aware of the minimal size of a widget, so that widgets don't "collapse"; the non-flex elements should get the space they need, and the flex elements the remaining space, subject to their flex factors.

In manual layouts (like splitter and dock widgets) the elements are manually resized and repositioned by the user. Changes in parents size will simply scale for all elements. In this case the layout does not have to be aware of a minimal sensible size for the elements. Some systems do though, and may prevent the user from making a widget smaller. Not sure if this is a good thing or simply annoying.

DOM vs HTML5 canvas

There are some toolkits that draw to the canvas instead of using the DOM. Presumably, this is more efficient, especially on mobile devices, which have a hard time with DOM and have hardware accelerated <canvas>. However, it means you miss out on HTML goodies like css. Plus you cannot easily render HTML inside.

Rendering stuff to <canvas> would be interesting for special widgets though. Like a tree view, or a text editor.

Layouts that we need

• automatic layouts: vbox, hbox, form, grid, freeform/asbolute
• manual layouts: dockwidget, splitter
• probably also: flow layout (because we're in HTML!)

To implement a box layout:

• Use a table -> is frowned upon by css purists, but it works well! Only need a bit of JS to set the % width's/heights of the cells from the flex factors. Only each time an element is added. And correct percentage heights on resize.
• With display: inline-block and whitespace: nowrap. -> Arg with implicit spaces.
• Use display: flex -> still new, does not work on e.g. QtWebkit
• Use position: absolute and use JS to position and size all widgets appropriately -> more work, and how to know optimal element sizes? But if it works, you can make it exactly as you want.
• Use a JS lib like Jqueryui, or Jquery-simplegui, or one of the 100ths of others -> :/

To implement a grid layout:

• Use a table
• JS on absolutely positioned elements

To implement a form layout:

Probably same as grid.

To implement a splitter

• A table with JS to set percentage width/height
• display: flex with JS to set flexes
• JS on absolutely positioned elements

To implement a dockwidget layout

• JS on absolutely positioned elements (I can see no other way)

(and you need tab widgets)

To implement a free layout:

This one is easy: position: absolute, and then set top and left to either pixels or percentages.

To implement a flow layout:

• Use float:left. Add some css/js to stretch all items to the same height
• Use display: flex with wrap.