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

On Tue, 10 May 2016 05:02:33 -0700, Simon Pieters <simonp@opera.com> 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.)
>
> https://lists.w3.org/Archives/Public/www-archive/2016May/att-0001/4186.png
>
> http://software.hixie.ch/utilities/js/live-dom-viewer/saved/4186
>
> <!DOCTYPE html>
> <style>
> div { writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr;  
> margin-block-start: 1em; margin-block-end: 1em; -webkit-margin-before:  
> 1em; -webkit-margin-after: 1em; outline:1px dotted }
> </style>
> <div>foo</div>
> <div>bar</div>
>
> Note that the body has horizontal-tb writing-mode. The divs have their  
> margins on the left and right side -- the block-start and block-end  
> sides of the element itself, not that of the parent element.
>
> Do we want to maintain the spec as is, and try to get browsers to  
> change, or change the spec to match what is implemented today?

We resolved at the f2f in SF today to change the spec to match  
implementations.

PR to change the spec at https://github.com/w3c/csswg-drafts/pull/109

Resolution at https://logs.csswg.org/irc.w3.org/css/2016-05-11/#e685444


> * * *
>
> 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.
>
> https://lists.w3.org/Archives/Public/www-archive/2016May/att-0001/4185.png
>
> http://software.hixie.ch/utilities/js/live-dom-viewer/saved/4185
>
> <!DOCTYPE html>
> <style>
> html { writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr }
> #parent { background-color: green; margin:1em }
> #horizontal-child { background-color:yellow;  margin:1em; writing-mode:  
> horizontal-tb; -webkit-writing-mode: horizontal-tb }
> #vertical-child { background-color: cyan; margin:1em }
> </style>
> <div id=parent>
>   <div id=horizontal-child> horizontal </div>
>   <div id=vertical-child> vertical </div>
> </div>
>
> This is interoperable between WebKit/Chromium/Gecko for this test. The  
> inline-start margin of the horizontal child collapses with the block-end  
> margin of the vertical parent. The inline-end margin of the horizontal  
> child (yellow) collapses with the block-start margin of the vertical  
> child (cyan).

I discussed this briefly with fantasai and we thought this was a  
clarification issue; the spec intends the margins in the container's block  
direction. I'll leave it to fantasai and Koji to fix the wording here. :-)

cheers
-- 
Simon Pieters
Opera Software

Received on Wednesday, 11 May 2016 21:10:10 UTC