Caleb Hearon

If Boxes are the input to layout, then BoxAreas are the output. The CSS specifications speak mostly in terms of boxes. When they fragment, such as across lines, pages, or columns, multiple BoxAreas are created.

A BoxArea looks like this:

class BoxArea {
  parent: BoxArea | null;
  box: Box;
  blockStart: number;
  blockSize: number;
  lineLeft: number;
  inlineSize: number;
}

These properties are all named after logical positions. To avoid having to think in different writing systems for now, let’s only consider left-to-right, top-to- bottom writing systems, such as Cyrillic and Latin:

• boxStart is a vertical coordinate, increasing as it goes down
• boxSize is height
• lineLeft is a horizontal coordinate, increasing as it goes right
• inlineSize is width

But during layout, we only care about logical sizes. A new line box is placed after other lineboxes using the block offset, which may be a vertical or a horizontal coordinate.

After layout, in the pre-order phase, the box is absolutized in preparation for painting. Depending on the

Now let’s look at the parent pointer.