Re: [css2.1] Issue 158 and Issue 178 Resolution

On Fri, Aug 13, 2010 at 6:59 AM, Anton Prowse <prowse@moonhenge.net> wrote:
> On 13/08/2010 01:20, Tab Atkins Jr. wrote:
>>
>> All right, try 2.  I'm pretty certain I have a complete and correct
>> grasp of margin-collapsing and clearance loaded into my brain right
>> now.
>>
>> Now, none of these changes are normative changes.  They should all
>> only be clarifications or rephrasings to make things easier to
>> understand.
>>
>> Change 1
>> --------
>>
>> In 8.3.1, sixth bullet point, second sub-bullet point, add the
>> following after the current text:
>> "(In other words, for the purpose of positioning the element's top
>> border edge, the following siblings of the element do not
>> margin-collapse with the element.)"
>
> The idea of introducing an explanatory note mentioning the custom margin
> collapsing here is a good one.  But I disagree with this wording.
> Following boxes (note, they're not necessarily siblings of the element)
> /do/ collapse with the element, but only with its bottom margin.  And
> the other part to it is that the element is prevented from collapsing
> its bottom margin with its last child.  Trouble is, the only way to
> express all that elegantly is to use precisely the device already
> employed: the temporary introduction of a non-zero bottom border.
>
> So I don't think that an explanatory is actually possible, beyond just
> saying that the purpose of the device is to temporarily restrict certain
> margin collapsing behaviour.

Hmm, you're right.  How about this:

"(In other words, for the purpose of positioning the element's top
border edge, the element's bottom margin and the margins of any
following boxes do not collapse with the element's top margin.)"


>> Change 2
>> --------
>>
>> In 8.3.1, sixth bullet point, after the last paragraph add the
>> following example block:
>>
>> """
>> This rule can sometimes result in margins appearing to collapse in
>> strange ways.  The interactions of the rules is very simple in
>> practice, though; one must just keep in mind that different sets of
>> margins may be considered when determining the position of different
>> elements.
>>
>> For example, the following diagram illustrates how one element (the
>> blue line) positions itself without collapsing its 100px margin-top
>> with the following red box's 150px margin-top.  This special case only
>> occurs because the blue line has no content, and thus its top and
>> bottom margins are self-adjoining.  (Ordinarily you can't detect this
>> behavior, because a self-adjoining box has no content, background, or
>> border, but the use of outline or border-image can reveal its position
>> without changing the behavior of its margins.)
>>
>> [[insert picture 1]]
>>
>> Note, though, that when calculating the position of the red box, *do*
>> collapse its margin with the blur box's margin.  The red box simply
>> positions itself as normal, with its 150px margin collapsing with the
>> blue box's 100px margin, for a total effective margin of 150px.  Since
>> the red box pays no attention to the position of the blue box, this
>> distance is measured from the top of the parent.
>>
>> This diagram illustrates a slightly different situation.  It is the
>> same as before, but now the red box has a margin-top of only 50px.
>> While the previous diagram didn't actually require the red box to
>> collapse its margin with the blue box's margin, in this case we see
>> that the collapse definitely occurs, as the red box positions itself
>> using its new effective margin-top of 100px.
>>
>> [[insert picture 2]]
>> """
>
> To be honest, I don't find these examples enlightening, and I dislike
> the tone of the first paragraph and the majority of the wording of the
> others (particularly concerning "positions itself"); although this is
> subjective, of course.  Also, I don't understand the last sentence of
> the last paragraph.

Really?  I find this section to be the most difficult of *everything*
in margin-collapsing to understand, and the pictures help me to
understand how the margins are interacting, and make it clear where
the margins are anchoring themselves.

As to the last sentence of the last paragraph, I agree it's confusing.
 How about removing it, and then *after* the picture, inserting a new
paragraph:

"Note the margin behavior here.  In the previous example, the red
box's margin was larger than the blue box's margin, so although the
two margins collapsed when positioning the red box, it was
indistinguishable from the red box's margin simply ignoring the blue
box entirely.  In this example, because the red box's margin is
smaller, we see that it does indeed collapse with the blue box's
margin, so that the red box is positioned as if it had a 100px top
margin."


>> Change 3
>> --------
>>
>> In section 9.5.2, at the end of the paragraph starting "Computing the
>> clearance of an element...", delete the last sentence of the paragraph.
>>
>> Replace it with:
>>
>> """
>> To determine the hypothetical position, collapse the top
>> margin of the clearing element with preceding adjoining margins per the
>> margin-collapsing rules in section 8.3.1, as if the element does not
>> have clearance. (Note: Only use the *preceding* adjoining margins - in
>> particular, for the purpose of determining the hypothetical position,the
>> top margin of the clearing element does not collapse with the margins of
>> its children or its own bottom margin.)  Call the resultant margin the
>> "hypothetical top margin".
>> """
>
> The clause "as if the element does not have clearance" is unnecessary,
> because we don't yet know whether it has clearance.  I think you mean to
> say to assume clear:none.

Right, I did indeed mean that.  (I hate that the two phrases aren't the same...)


> The whole paragraph is basically saying that the hypothetical top border
> edge position really is the position of a hypothetical non-zero top
> border, right?  Then can't we just actually say that (which would also
> avoid the problem I raised in the first half of [1]), and leave it at
> that?  Why is further/round-about explanation necessary?

Hmm, yeah, that would work great too.  Good catch.


> (Note that, in this clear:none phase, the position of the hypothetical
> top border edge is not necessarily the same as the /actual/ top border
> edge position as calculated in 8.3.1.6.2.  I still don't have insight
> into whether that's relevant; superficially it isn't since the latter
> has no bearing on margin collapsing or clearance.)

Hm, in what situations are they different?  I'm not immediately seeing anything.


>> Change 4
>> --------
>>
>> In section 9.5.2, replace the second step of the clearance algorithm with:
>>
>> """
>> 2. The size of the clearing element's top margin (possibly collapsed
>> with other margins, as detailed earlier in this section) minus the sum
>> of:
>>  * the margins collapsing above the clearance
>>  * if the block's own margins collapse together: the block's top
>> margin, by itself
>>  * if the blocks' own margins do not collapse together: the margins
>> collapsing below the clearance
>> """
>
>
> Did you mean to use your term "hypothetical top margin" here?

Yup.  I wrote too much after introducing the term in Change 3, and
then forgot to use it here to clarify the length used.


> Just to make sure I understand what's being proposed: in calculations 1
> and 2, we're assuming that clearance has been introduced and hence that
> some margin collapsing is disrupted, as per 8.3.1.  (All we're doing by
> the time we've reached this stage is figuring out how much to "stretch"
> the clearance.)  The value calculated in the second calculation is:

Yes, these calculations only occur if the hypothetical position
doesn't clear the float, thus establishing that clearance must be
added.


> value = hypothetical top margin
>            - margin lump above clearance
>               - element's top margin OR margin lump below clearance(*)
>
> (*) to which the element's top margin was a contributer
>
>
> I need to revisit Bruno's example, but I think we desperately need to
> add an explanation of why clearance calculation 2 is necessary, ie what
> the relationship is between the quantities involved.  This is a
> different issue from Issue 158 though.

It's a difficult case to construct on the fly (I need to go dive back
through my mail to find the example that dbaron constructed), but
calculation 2 is only relevant when the float moves upward due to the
clearing element's top margin uncollapsing with its previous in-flow
sibling's bottom margin.  In all other cases calculation 1 will always
be greater.


> Note that this proposal doesn't address the other issue from this
> thread, of what "border edge" means in clearance calculation 1.

Right, I haven't hit that yet.  I'm pretty sure it means exactly what
it says, though, as dbaron noted - the actual border edge of the
block, after margins have uncollapsed.  If it was referring to the
hypothetical border edge, then the example slightly further down about
negative clearance wouldn't make any sense.  (Going off of the
hypothetical border edge, which is 4em below the border edge of the
first paragraph, the clearance should be 2em.  But that doesn't make
any sense.  Going off the actual border edge, which is 7em below the
border edge of the first paragraph after you uncollapse the margins,
the clearance should be -1em like the example says, which makes the
element flush with the bottom of the float as intended.)

I'd be interested in seeing an ambiguous case, but this is the only
interpretation that makes any sense at all as far as I can tell.


>> Change 5
>> --------
>>
>> In section 9.5.2, after the paragraph starting "Clearance is
>> introduced...", add the following example block:
>>
>> """
>> Note: Clearance, once introduced, takes up permanent space on the
>> page.  In particular, elements other than the cleared element may have
>> their position directly affected by it.  For example, if the clearing
>> element is empty and has self-adjoining margins, a following sibling's
>> margin may collapse through it.  The sibling will then also use the
>> clearance to position itself, as the following diagram illustrates:
>>
>> [[insert picture 3]]
>> """
>
> Although I don't like the wording, I do agree that this note is
> worthwhile, since the phrase "Clearance is introduced as spacing above
> the margin-top of an element" is not accurate.  There *is* no margin top
> if that margin is involved in collapsing; there's only a faceless margin
> lump.

I think that's a valid interpretation, but not a necessary one.  I
always interpret collapsed margins as being top or bottom margins of
particular boxes.  It just may be that two boxes share the same blob
of spacing when their margins are collapsed.


> What your diagram helps to show – although I strongly dislike the
> representation of the two top margins as distinct entities rather than
> as one entity with ruler distances marked –

It would be more confusing to illustrate it as such, I think, as the
blue element first positions itself *without* collapsing with the red
box's margin.  The red box does then collapse its own margin with that
of the blue box, but that's irrelevant for this particular example.

> is that clearance is
> introduced as "spacing" which prevents the lump that results from the
> collapsing of the margins preceding the element from then going ahead
> and itself collapsing with the lump that results from the collapsing of
> subsequent margins.  It's as if, when the clearing element is first
> encountered, the canvas is cut horizontally after the first margin lump,
> and an elastic strip sewn in. Then margin-collapsing life carries on as
> normal except that margins aren't allowed to collapse upwards across the
> strip.  Then the strip is stretched by the calculated clearance amount.

I don't understand your example.  ^_^


> I think the note should just try and say that, rather than talk about
> specific elements having their positions affected.  Clearance is just
> interruption of margin collapsing; it's nothing mysterious.

It's not just interruption of margin collapse, though.  It interrupts
collapse, *and* introduces additional non-margin spacing.  I
personally originally interpreted clearance as only affecting the
positioning of the cleared element.  Learning that the clearance can
directly affect non-cleared elements was a revelation.

~TJ

Received on Friday, 13 August 2010 18:27:34 UTC