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.