While web-programmers surely know CSS/HTML rules by heart, and web-browsers have algorithms to render web-pages, what interests me whether there are any mathematical/theoretical models or at least formal specification languages for web-page layout ("physics", "geometry") allowing to generate bullet-proof html/css given concise specification.

For example, I would like to specify a responsive layout with nested elements (blocks), which behaves in a certain way, say, some stay relative, some flow, some keep height, some keep width, etc. All of this is expressible in CSS/HTML, but the rules are sometimes weird (like having parent/child being absolute/relative to achieve certain effect, e.g. the one here http://css-tricks.com/absolute-positioning-inside-relative-positioning/, which required ah-ha moment).

Also, I think that HTML/CSS is somewhat too verbose and often ambiguous in specifying exact intentions, that makes nearly impossible to "program" web-page and be sure of the result. And even rendering a couple of examples is not enough, because there may occur some unforeseen combination of lengths of texts, which will break the layout.

Somehow I strongly believe, that those relations of nested blocks and elements can be described in a more formal and brief way, with some tool turning the description into HTML/CSS (I am speaking of structural, geometrical relations only, no hope for inline placements). However, so far I have not found any language or manual, which would suggest there is any comprehensible system in how CSS/HTML works. (No doubt though that with demise of IE6 situation improved somewhat).

How to define "physics" / "geometry" of HTML pages to the point where simple set of formulas and constraints can model the resulting web-page?

If the above is still vague, here is a sketch of what I mean by formal spec. Say, I have 4 blocks (A, B, C, D) and I want A, (B and C), D vertically aligned, while B and C side by side and float (other details may be "by default"), so I can write something like:

A / (B, C) / D

And some tool can generate HTML/CSS doing exactly that, under any situations and screen sizes.

Even though it seems like a piece of cake, proven frameworks (like Bootstrap) are needed to be more confident in the result.

Of course, html/css -> that hypothetical modelling language would be a big bonus.

For some analogy - Auckland layout model: http://www.crt.umontreal.ca/~pesant/Constraints/Papers/LutterothSW08.pdf

I would like to point out that I am more interested in an underlying concept, algorithmic approach, rather than specific tool (even though tools are usually made to demonstrate a concept).

  • 2
    Generating "bullet proof" html/css to do just about anything beyond hello world is serious undertaking. You underestimate how quirky browsers are. Dec 16, 2014 at 6:41
  • Well, at least to some sensible extent and major rendering engines.
    – Roman Susi
    Dec 16, 2014 at 6:53
  • 1
    The sizers model of wxWidgets immediately popped into my mind while reading your question. I have always found it so frustrating that (mathematically) simple things such as equal height columns can only be achieved through a series of hacks in HTML+CSS+browser-specific code, while a hierarchy of simple wxBoxSizers produce exactly the intended effect. OTOH, CSS and HTML are way more "powerful" for the designer - think of assembler (CSS+HTML) vs. C++ code (your non-existent-yet language). Unfortunately, neither the compiler nor the language exist AFAIK :)
    – user44761
    Dec 16, 2014 at 13:40
  • "Somehow I strongly believe, that those relations of nested blocks and elements can be described in a more formal and brief way" -- yes, if you only want simple and uncomplicated layouts. For the wide variety of layouts and nuances that exist in real web development, your shorthand syntax would have to be at least as complicated as HTML and CSS already are, but far less readable. Dec 17, 2014 at 16:54
  • 1
    FYI, reformulated and asked essentially the same question on CS: cs.stackexchange.com/questions/35490/… Also, forgot to mention that at first I tried webmasters: webmasters.stackexchange.com/questions/74049/…
    – Roman Susi
    Dec 18, 2014 at 19:35


Browse other questions tagged or ask your own question.