CSS Normal Flow Inline Context #1431

Tim-Liam-Hill · 2025-06-29T17:18:12Z

Tim-Liam-Hill
Jun 29, 2025

I am putting the TLDR at the top of this question since its kinda long. TLDR: is there any place where I can find examples that show definitively how to go from a DOM to a Box Tree in Normal Flow? I am not entirely certain on how Inline Boxes should be mapped to Line Boxes in such a way that backgrounds/borders are preserved, inline-block layout can be supported and vertical align used.

NOTE: All of what I mention below is with respect to normal flow.

I have been reading through the CSS 2 documentation for the Visual formatting model and have found it to be rather confusing. Every time I read through it I seem to answer some questions but come up with new ones which has made it more difficult to rework my own implementation to be inline with the specification.

Inline Boxes in particular seem to be tricky to understand. Per the spec:

Inline level elements have their contents distributed in lines
Inline elements generate inline-level boxes

So we have this concept of an Inline Box and a Line Box (for simplicity I will be ignoring anonymous boxes). Say I have the below html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 2.0//EN">
<html>
<head>
    <style>
        .c1 {
            background-color: aqua;
            border: 2px solid brown;
        }
        .c2 {
            font-size: 2em;;
        }
        .c3 {
            background-color: red;
            vertical-align: top;
        }

    </style>
</head>
<body class="main">
<div>
<span class="c1">Inside c1<span class="c2">inside c2</span> back inside c1<div>block element breaks the lines</div><span class="c3">Inside c3</span> Back inside c1</span>
</div>
</body>
</html>

This would generate the following (in Brave):

An idea on how to implement this would be to start generating lines using the text from inline elements
This could give us something akin to:

LINE 1: InlineBox("Inside c1") InlineBox("inside c2") InlineBox("back inside c1")
LINE 2: format in Block Context
LINE 3: InlineBox("inside c3") InlineBox("back inside c1")

As lines are generated however, un-finished Inline elements are placed on a stack that records the line an Inline Box portion of the element was on generated on (and a reference to that Box). Then, once the element is closed, all of those Inline Box portions for a single element can be updated to have their background/border coordinates stretch to the ends of the lines as necessary (to ensure that things are rendered correctly). One thing to fix however, is the order in which backgrounds are painted (since the background for span class="c3" should not be covered by that of span class ="c1").

I am not sure if this the way I should be interpreting the docs. I have read through a bit of the layout overview for Firefox but that didn't help me all that much, nor did looking at the source code for LadyBird or WeaslyPrint.

Tim-Liam-Hill · 2025-06-30T10:01:26Z

Tim-Liam-Hill
Jun 30, 2025
Author

I did some further reading this morning which seems to suggest that the LineBox isn't necessarily part of the Box Tree. I also went ahead and ran the HTML doc using the LadyBird browser. Below is a dump of the layout tree it generated:

BlockContainer <html> at (0,0) content-size 2136.21875x89.046875 [0+0+0 2136.21875 0+0+0] [0+0+0 89.046875 0+0+0] [BFC] children: not-inline
    BlockContainer <(anonymous)> at (0,0) content-size 2136.21875x0 [0+0+0 2136.21875 0+0+0] [0+0+0 0 0+0+0] children: inline
      TextNode <#text>
    BlockContainer <body.main> at (8,8) content-size 2120.21875x73.046875 [8+0+0 2120.21875 0+0+8] [8+0+0 73.046875 0+0+8] children: not-inline
      BlockContainer <(anonymous)> at (8,8) content-size 2120.21875x0 [0+0+0 2120.21875 0+0+0] [0+0+0 0 0+0+0] children: inline
        TextNode <#text>
      BlockContainer <div> at (8,8) content-size 2120.21875x73.046875 [0+0+0 2120.21875 0+0+0] [0+0+0 73.046875 0+0+0] children: not-inline
        BlockContainer <(anonymous)> at (8,8) content-size 2120.21875x37.015625 [0+0+0 2120.21875 0+0+0] [0+0+0 37.015625 0+0+0] children: inline
          TextNode <#text>
          InlineNode <span.c1> [0+1.671875+0 313.6875 0+1.671875+0] [0+1.671875+0 18 0+1.671875+0]
            frag 0 from TextNode start: 0, length: 9, rect: [9.671875,23 67.890625x18] baseline: 15.21875
                "Inside c1"
            frag 1 from TextNode start: 0, length: 15, rect: [211.828125,23 111.53125x18] baseline: 15.21875
                " back inside c1"
            TextNode <#text>
            InlineNode <span.c2> [0+0+0 134.265625 0+0+0] [0+0+0 37 0+0+0]
              frag 0 from TextNode start: 0, length: 9, rect: [77.5625,8 134.265625x37] baseline: 30.921875
                  "inside c2"
              TextNode <#text>
            TextNode <#text>
        BlockContainer <(anonymous)> at (8,45.015625) content-size 2120.21875x18.015625 [0+0+0 2120.21875 0+0+0] [0+0+0 18.015625 0+0+0] children: not-inline continuation
          BlockContainer <div> at (8,45.015625) content-size 2120.21875x18.015625 [0+0+0 2120.21875 0+0+0] [0+0+0 18.015625 0+0+0] children: inline
            frag 0 from TextNode start: 0, length: 30, rect: [8,45.015625 231.609375x18] baseline: 15.21875
                "block element breaks the lines"
            TextNode <#text>
        BlockContainer <(anonymous)> at (8,63.03125) content-size 2120.21875x18.015625 [0+0+0 2120.21875 0+0+0] [0+0+0 18.015625 0+0+0] children: inline
          InlineNode <span.c1> [0+1.671875+0 180.0625 0+1.671875+0] [0+1.671875+0 18 0+1.671875+0] continuation
            frag 0 from TextNode start: 0, length: 15, rect: [77.5625,63.03125 112.171875x18] baseline: 15.21875
                " Back inside c1"
            InlineNode <span.c3> [0+0+0 67.890625 0+0+0] [0+0+0 18 0+0+0]
              frag 0 from TextNode start: 0, length: 9, rect: [9.671875,63.03125 67.890625x18] baseline: 15.21875
                  "Inside c3"
              TextNode <#text>
            TextNode <#text>
          TextNode <#text>
      BlockContainer <(anonymous)> at (8,81.046875) content-size 2120.21875x0 [0+0+0 2120.21875 0+0+0] [0+0+0 0 0+0+0] children: inline
        TextNode <#text>

Granted not all browsers will use the same data structures (and further granted that LadyBird is in early development), it seems to me as though a LineBox is used as a data structure to keep track of where fragments for a particular node should be placed, and the placement of text and background rects for a fragment are recorded as Lines are created/flushed/split. Further, the BlockContainer breaks the flow of the Line data structure (as expected) and that once the break is processed, any un-finished inline element is recreated and has its fragments processed accordingly. Finally, Inline elements with children generate Inline Blocks with children, retaining a nested structure.

I can't say I fully understand the spec but this seems to have given me a bit more understanding. I think a point of confusion comes into play due to the multiple trees that are using by rendering engines (and overlapping/ambiguous syntax). Still, any input and further resources are appreciated!

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

CSS Normal Flow Inline Context #1431

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

CSS Normal Flow Inline Context #1431

Uh oh!

Uh oh!

Tim-Liam-Hill Jun 29, 2025

Replies: 1 comment

Uh oh!

Tim-Liam-Hill Jun 30, 2025 Author

Tim-Liam-Hill
Jun 29, 2025

Tim-Liam-Hill
Jun 30, 2025
Author