Re: [csswg-drafts] [css-transforms-3] Layout-affecting Transforms

Some earlier discussion on this topic: https://lists.w3.org/Archives/Member/w3c-css-wg/2007JulSep/0184.html

There were a number of issues raised in that discussion; some of them we have answers for now and others we don't really.

- Are margins rotated or not? Jen and I think the margins should be applied to the bounding box of the border box after the transform has been applied. This gives the author better control over spacing particularly in cases where there's rotation/skew; and also it's the only thing that makes sense for auto margins, which are important for alignment and spacing particularly in flexbox.
- We also think it would be a great idea to apply shape-outside, to give more control over how much space is taken up. This is particularly important for cases where the transform (as in Jen's example) results in a lot of blank space taking up vertical space, which then needs to be trimmed. (shape-outside would also be able to control the tight-wrap settings, which was an issue raised back in the 2007 discussions.)
- Margin collapsing? Applying margins after transforms allows margin collapsing to occur between siblings as normal. However, margins can't really collapse between the transformed box and its children.
- How does this work with positioning? Transforms has resolved that transformed boxes trap absolutely-positioned descendants, so that resolves that question. Wrt the transformed box itself, we would position the margin box (which is not transformed) as normal.
- Wrt auto-sizing, we think the layout of the box and its contents should be performed prior to transformation, just as it is for regular transforms, and then the transform is applied. The transform would only affect layout of surrounding content, not the size of the box itself.  (For some of the more common rotation cases where there needs to be more layout interaction between the box, its contents, and the surrounding layout, `writing-mode` can be used.)

-- 
GitHub Notification of comment by fantasai
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1487#issuecomment-305317647 using your GitHub account

Received on Wednesday, 31 May 2017 21:07:03 UTC