5

I'm a (theoretical) computer science student, and as such the investigating of semantics of programming languages is one of the subjects of my study (wikipedia).

I've played around a lot with CSS and have a reasonable understanding of the box positioning rules. (If you tell me to create a page with certain layout, I can often think of the correct box approach and applicable CSS rules.)

It would be cool to have some sort of formal semantics for the CSS box positioning rules, but after searching the net for a while, I couldn't quite find anything useful.

I mostly simply end up at the CSS specifications, which are formatted as long texts with pseudo-algorithms (not the greatest reading matter --- I haven't read any of these specifications with much effort just yet).

Has no one tried to formalize this “theory” into some mathematical model, more rigorous than what the specifications have to offer? I'm not looking for something complete or definitive, but it sure would be neat (and useful!) if, at least, the way boxes should be positioned could be modeled in a formal manner.

Does anyone know of such research?

Kelley van Evert
  • 1,063
  • 2
  • 9
  • 17
  • there is a good article : http://www.brainjar.com/css/positioning/ – gandil Jun 10 '12 at 00:07
  • I'm not sure what you mean by "formal", but the specification itself is **the** formal definition for these things. It is the *specification*, after all. Here's the [table of contents](http://www.w3.org/TR/CSS21/cover.html#toc). You'll want to focus on sections 8, 9 and 10 which cover the formatting model in-depth. – BoltClock Jun 12 '12 at 11:42
  • @Bolt formal in the mathematical sense; the W3C specs are not formal in this sense. – Matt Fenwick Jul 30 '12 at 00:14

1 Answers1

3

Not an answer! This is an example of a possible formalization of a very simplified case (see my comment above).

Say, for instance, we're working in a world featuring (1) a known screen width enter image description here, (2) an ordered list of enter image description here boxes enter image description here which aren't nested, have no margins/padding's/borders, are floated left and of which we know their (2.1) height and (2.2) width via the mathematical functions w and h.

We'll be defining the functions enter image description here and enter image description here, which state the coordinates of the left upper corner of each box.

We'll be defining/using the relations "enter image description here starts line enter image description here" and "enter image description here has height enter image description here".

First of all, enter image description here starts line 0.

Then, if enter image description here starts line l, and furthermore if for certain m in N

enter image description here

...we conclude that:

  1. box heights in certain line
  2. box widths in certain line
  3. l has height lineheight
  4. bm+1 starts line l+1 iff m le N

These rules define the positions of given boxes in a formal manner. It's only one way to do so, of course, and probably not the smartest (just thought it up quickly), but it does correctly formalize the way floats work (modulo typos, I haven't checked it over well enough).

When dealing with programming languages, one can choose of many of these formalisms, each invented for particular purposes (see wikipedia).

I'm just interested if anyone has ever tried to come up with some formalization for CSS box positioning. Of course the specifications go a long way, but they're just not quite as rigorous as the mathematical way forces you to be.

Kelley van Evert
  • 1,063
  • 2
  • 9
  • 17