What are the differences between the CSS and Latex box models?

Question

What are the differences between how CSS and Latex organize boxes? (Either paragraph or graphical elements.)

Answer 1

The general scheme, of having a hierarchical boxed representation of page layout produced from processing of input language, and that is then turned into the rendered page, is basically similar between the two models. The four differences that are most impressed on me are:

1. The CSS boxes model is a robust abstraction, whilst the layout of boxes in the Tex model is operationally determined: as boxes are being laid out in the Tex model, the code can break apart and re-layout earlier boxes.
2. While Tex's layout model is text-oriented, like the CSS boxes model —and as opposed, to, say Adobe's InDesign page-oriented layout model that's very much about fitting together blocks to cover each page— it still has quite a few page-oriented abstractions, like determining "badness" of vertical space in order to place footnotes - there's nothing like that in the CSS boxes model that I can see. Context has a more sophisticated page layout model, that allows both text-oriented and grid-oriented layout together.
3. Both the CSS model and the Tex model have notions of block-level boxes (vboxes) and inline boxes (hboxes). However, while you can specify using CSS that a block-level box occurs inside an inline box, section 9.2.1 of the CSS2 standard says that the semantics of this is to turn the outer inline box into a block-level box, so the CSS box model basically forbid block-level boxes from occurring within inline boxes. Tex, by contrast, is happy to have vboxes inside hboxes, which offers power to do things like place pieces of text above text inside a paragraph's text.
4. Most importantly, the CSS box model has no notion of flexible glue, making scaleable page layout much trickier, and is, I guess, the reason why fixed-width webpage design is dominant.

Answer 2

The specs for CSS are not hard to find and of course they contain a chapter on the box model.

The information is somewhat harder to find for LaTeX, but you can look here, where you can read:

LaTeX builds up its pages by pushing around boxes. At first, each letter is a little box, which is then glued to other letters to form words. These are again glued to other words, but with special glue, which is elastic so that a series of words can be squeezed or stretched as to exactly fill a line on the page.

I admit, this is a very simplistic version of what really happens, but the point is that TeX operates on glue and boxes. Letters are not the only things that can be boxes. You can put virtually everything into a box, including other boxes. Each box will then be handled by LaTeX as if it were a single letter.

I think this is very different from CSS, but for details I'm afraid you have to read books, e.g. The TeX book by Knuth, or the LaTeX companion by Mittelbach et. al.

Miel.

Answer 3

There is a dearth of discussion on this important matter.

There is one key reason I wish that HTML/CSS layout was based on TeX: the lack of glue or springs.

TeX didn't really need to use this feature as the use of TeX was always to lay out content on fixed pages. But the most natural thing on a web browser (ever since screen sizes have gone beyond 640 x 480 pixels) is to resize it, especially the width.

It is impressively difficult in CSS to lay out something like a slide-show, with a frame in the center occupying most of the space and 2 thin stripes of forward and backward buttons, right and left respectively, that then resizes gracefully, especially as we get to the narrow end of the spectrum. But also, on the wide end without wasting all the space in margin as many modern CSS layouts do.

In TeX that is easy. You have an hbox, with a grow- and shrink-able center frame, and the forward and backward button are fixed size.

As you increase the page width, only the center frame expands, and as you reduce the width, only the center frame becomes narrower, until all its shrink value is used up (minimal width) then it stops (and supposedly a horizontal scrollbar would appear.

This is the one key aspect I feel is badly missing from CSS. It is so much more natural, and amazing that Knuth had invented it at a time when dynamic screen layout was decades away from becoming reality. And it is sad that this genius was forgotten.

I assume that the box and glue model was argued to be

• too hard on real-time computation capacity of earlier web clients
• too "difficult" to implement for Microsoft programmers
• too "confusing" for beginners to use.

All of this are very weak arguments IMO.

The same issue appears in Java/Swing Layout schemes. I remember I implemented a real Box and Glue Layout in Java to use with SWT on a project some 15 years ago. Once you have it is's so awesome.

I am awaiting a real box and glue layout option to appear in some next generation of CSS before the end of my programmer career, and I hope soon, so I can still use it for a few years.