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

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?

* * *

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).

-- 
Simon Pieters
Opera Software

Received on Tuesday, 10 May 2016 21:24:51 UTC