Getting layout right (even if only a structure is considered) with HTML5/CSS3 is still more like an art or black magic.

On the other hand, there are other GUI systems (like wxWindows and Tcl/Tk) and some GUI research (like The Auckland Layout Model, ALM, and other methods), which hint at the possibility of formalization for the layout managers (geometry managers).

Are there any comprehensible formal models for HTML5/CSS, which provide ultracompact (abstract) way to describe structure, "physics" and "geometry" of resizeable webpages, using language of blocks? Also html/css can be generated from it, which works more or less as described in standard browsers. Also, a model can be derived given HTML/CSS (browsers do it by their algorithms, so this seems to be theoretically possible).

By "ultracompact" and abstract it is understood: much more compact than HTML/CSS and also more domain-oriented, "speaking" the language of webpage's dynamics in response to resizing or changed content, that is, higher level than HTML/CSS constructs.

For an analogy, it is possible to write a program to make a textual search, based on some complex rules, but the same task can be performed by a much more compact regular expression. So, is there similar compact language for HTML/CSS layout?

The goals of such a model could be:

  • to verify existing design (model checking)
  • to build robust design given higher level specifications
  • to check whether a set of requirements is consistent with HTML5/CSS3 engine (e.g., does not require writing javascript to make an adjustment too complex for the declarative languages)
  • to be a solid platform for even higher level research on qualities ("to check the harmony with algebra.")

Also it could be a language to use for certain GUI-related abstractions, like is usual in programming language domain, where we do not need to use concrete syntax to express an idea of for-loop and we do have all kinds of nice, proven results about main concepts of algorithmic constructions.

Of course, web-browsers possess algorithmic model for rendering, e.g. popular and simplified description can be found here, but as pointed above it does not have the properties listed above.

  • $\begingroup$ I've tried to ask similar question elsewhere: webmasters.stackexchange.com/questions/74049/… and programmers.stackexchange.com/questions/266554/… , but this is reformulated one. $\endgroup$
    – Roman Susi
    Dec 18, 2014 at 19:33
  • 1
    $\begingroup$ "Mathematical" is maybe a bit far-fetched and/or useless to you. HTML+X documents are attributed trees -- yay. I'm not sure if you are looking for technology or science -- we probably can't help you with the former (and it'd be offtopic) and I'm not clear what you expect from the latter. (Are you aware of User Experience? $\endgroup$
    – Raphael
    Dec 18, 2014 at 20:55
  • $\begingroup$ No, it's not about syntax of HTML documents, it's about higher-level: block-level description of web-page blocks/elements, which constitute layout: alignment, floating, height/width ranges, constraints, etc. If you do not like the word mathematical, call it formal. Formal models allow automatic synthesis, transformations, proved properties. And I do not know (that is why I am asking) if there is some relevant research or tech for what I described. $\endgroup$
    – Roman Susi
    Dec 18, 2014 at 21:41
  • $\begingroup$ UX is even higher level of how certain webpage dynamics is percepted by users. But "engineers" should first provide "mechanics" according to specs, and this is what the question is about. There are certain building blocks/elements, and HTML is far from perfect to express those. For example, Java is quite verbose , but there are models (like UML), which are more compact descriptions, from which Java code can be generated (even round-trip back to UML is there for some cases) $\endgroup$
    – Roman Susi
    Dec 18, 2014 at 21:48
  • 1
    $\begingroup$ 1. What do you want to do with these models? The purpose of a model is to enable you to do something. What is it that you're trying to achieve? Why do you want such a model? If you want to compile from it to HTML/CSS (or to translate existing HTML/CSS pages to it), this is probably not the right site to ask -- that's an engineering question, whereas we focus on the science and the conceptual aspects. 2. Have you tried formulating such a model? What issues did you run into? We expect you to make a significant effort before asking and show us what you tried. $\endgroup$
    – D.W.
    Dec 18, 2014 at 23:25

1 Answer 1


At the time of writing, I am not aware of any formal (or at least formalized enough) models for layouts in HTML. All the examples (ALM, etc) indicate, that usually the model is created to guide layout manager's creation. In the case of HTML and web-browsers the development is evolutional and while each web engine contains some sort of algorithmic models to be able to render HTML, nobody (I know of) published underlying math, and nobody "reverse engineered" program code to extract the model.

It should also be noted, that the model could have grown very complex, so any effort to build one retrospectively may be quite costly.

Even though it is not done yet, it does not mean it is impossible. As more rigorous approaches are being applied to web programming (e.g., recent release of Ur/Web - typesafe approach spanning from database to client-side interactions), modelling HTML5 layout management may be on the horizon, especially, as we witness more formal approach in the recommendations for new HTML5/CSS features (for example, http://www.w3.org/TR/css3-flexbox/), because having formal model may help proving consistency of the additions (analogously to formal grammar, which greatly facilitates making additions to the programming language syntax).


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.