role-edge [Was: Re: Issue with CSS2.1 9.5.1 float rules]

fantasai wrote:
> [...] there isn't anything disturbingly different about how negative
> margins are handled. It might help to think of the margin lines as a
> 1D vector surface, with the vectors always pointing "outward"? Even if
> opposing negative margins cross each other when you draw them, those
> edges still behave the same in how they interact with other boxes.

Consider the example that hopefully breaks your logic:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><style>
    div {
        border: blue solid 1px;
    }
    div.container {
        margin-left:200px;
        width :300px; height:100px;
    }
    div.red {
        float:left;
        width:40px; height:40px;
        background-color:red;
    }
    div.lime {
        float:left;
        width:40px; height:40px;
        background-color:lime;
    }
    </style></head><body>

    <p>Positive margins:<p>
    <div class="container">
    <div class="lime" style="margin-left: 50px">L</div>
    <div class="red"  style="margin-left:100px">R</div>
    </div>

    <div class="container">
    <div class="lime" style="margin-left:100px">L</div>
    <div class="red"  style="margin-left: 50px">R</div>
    </div>

    <p>Negative margins:<p>
    <div class="container">
    <div class="lime" style="margin-left: -50px">L</div>
    <div class="red"  style="margin-left:-100px">R</div>
    </div>

    <div class="container">
    <div class="lime" style="margin-left:-100px">L</div>
    <div class="red"  style="margin-left: -50px">R</div>
    </div>

    </body></html>

In case of positive margins, we will get LR/LR, because of the rule 3
mentioned by the OP:

    # The right outer edge of a left-floating box may not be to the
    # right of the left outer edge of any right-floating box that is
    # to the right of it.

But in case of negative margins, we will see RL/LR, which may look like
surprisingly: the sign has been changed, but should the boxes change
their order while the _arithmetics_ are still the same?

Consequently, either the rule #3 is not applicable for the case of
negative margins, or the term "outer edge" has been abused.

I suggest the term "role edge" defined as the following rectangle:

    role-edge.x      = max(0, margin-edge.x)
    role-edge.y      = max(0, margin-edge.y)
    role-edge.width  = max(0, margin-edge.width)
    role-edge.height = max(0, margin-edge.height)

Loosely, the role-edge is the rectangle considered by the layout
algorithm to position the boxes playing the "roles" in that layout;
while the margin-edge is still the rectangle used by drawing
algorithm to draw each box as a whole.

The float rules in section 9.5.1 of CSS 2.1 may then refer to the
"role edge" instead of "outer edge".

--
Andrei Polushin

Received on Wednesday, 20 June 2007 18:01:32 UTC