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

Le 2016-05-11 17:09, Simon Pieters a écrit :
> 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
> 

Quick basic test:

http://www.gtalbot.org/BrowserBugsSection/CSS3LogicalProps/orthogonal-parent-margin-block-start-0xx.html




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

Quick basic test:

http://www.gtalbot.org/BrowserBugsSection/CSS3LogicalProps/orthogonal-parent-margin-collapsing-0xx.html

Gérard

Received on Thursday, 12 May 2016 18:46:41 UTC