Re: [css-logical-props][css-writing-modes] Margins and margin collapsing and writing modes

On 05/10/2016 05:02 AM, Simon Pieters wrote:
> CSS Logical Properties says about margin-block-start et al:
>
> [[
> These properties correspond to the margin-top, margin-bottom,
> margin-left, and margin-right properties. The mapping depends on
> the *parent element’s* writing-mode, direction, and text-orientation.
> ]]
> https://drafts.csswg.org/css-logical-props/#logical-prop
>
> This changed in https://github.com/w3c/csswg-drafts/commit/74786569ab47d3229d39101d53ad38f80fc9b6d7 to use the parent element.
>
> We also resolved in https://lists.w3.org/Archives/Public/www-style/2015Nov/0267.html to use the parent element's writing mode
> to determine which side margin-block-start should be.
>
> However, this does not match what is implemented in WebKit/Chromium/Gecko today. (I have not tested Edge.)

I think your best argument here is that RTL/LTR need to continue
to behave the same as they do now in the UA style sheet, since
this rule affects their mapping for margins and padding in the
UA default style sheet.

> Next issue is how margin collapsing should work in mixed writing modes per the Writing Modes spec:
>
> [[
> The margin collapsing rules apply exactly with the block-start
> margin substituted for the top margin and the block-end margin
> substituted for the bottom margin. Similarly the block-start
> padding and border are substituted for the top padding and
> border, and the block-end padding and border substituted for
> the bottom padding and border. Note this means only block-start
> and block-end margins ever collapse.
> ]]
> https://drafts.csswg.org/css-writing-modes-3/#logical-direction-layout
>
> This does not seem to consider mixed writing modes. The last
> paragraph is wrong in mixed writing modes; inline-start and
> inline-end margins can collapse with another element's block-start
> or block-end margins (either sibling or parent), in implementations,
> AFAICT.

The relevant paragraph you're missing is actually here:

https://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows

   # To handle this case, CSS layout calculations are divided
   # into two phases: sizing a box, and positioning the box
   # within its flow.
   #
   #  * In the sizing phase—calculating the width and height
   #    of the box—the dimensions of the box and the containing
   #    block are mapped to the inline size and block size and
   #    calculations are performed accordingly using the writing
   #    mode of the box establishing the orthogonal flow.
   #
   #  * In the positioning phase—calculating the positioning
   #    offsets, margins, borders, and padding—the dimensions
   #    of the box and its containing block are mapped to the
   #    inline size and block size and calculations are
   #    performed according to the writing mode of the containing
   #    block of the box establishing the orthogonal flow.

Margin collapsing is in the positioning phase, so the dimensions
are mapped according to the containing block for the purpose of
interpreting the section you quote.

(It's all a bit confusing because it had to be written as a
compressed diff against CSS2.1.)

~fantasai

Received on Wednesday, 11 May 2016 19:15:28 UTC