Re: [csswg-drafts] [css-inline-3] initial-letters: interaction of shape-margin and regular margin (#5119)

We've tried implementing Alan's suggested approach, and there's a slight problem. The spec states that when using `initial-letters-wrap: all`, the outline is expanded by the end-side margin+padding+border. This means we can't effectively use the margin box to clip the shape:

Consider this:
```css
p::first-letter {
    initial-letter: 3 3;
    initial-letter-wrap: all;
    shape-outside: 10px;
    margin-right: 20px;
}
```
![image](https://user-images.githubusercontent.com/989243/84899554-b7047500-b0a0-11ea-8c90-81e4d6fde4b3.png)

The black "G" is the actual letter. The `margin-right` means we expand the outline 20px to the right, as shown by the green letter. It also expands the margin-box, as shown by the red outline. The 10px `shape-outside` is clipped by the margin-box, but it doesn't have any effect on the overall outline - thanks to that green letter G.

I think the best solution would be to not add the end margin+padding+border to the shape - i.e. remove "_plus the amount of the initial letter’s end-side border+padding+margin._" from the definiiton of `initial-letters-wrap: all`.

In other words: the margin sets the margin-box, and does nothing else. The letter shape is expanded by `shape-margin` alone, and that shape is clipped to the margin-box. So it works exactly like it does on floats.

This would be a change to the current functionality, but - as Webkit hasn't implemented `initial-letters-wrap: all`, and the only other implementations of `initial-letter` are us and @stantonma, you'd probably get away with it.

I've put a demo of of the implementation as described in this comment at https://bfo.com/publisher/?saved/18c0fb7cb6c548f5#svg


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

Received on Wednesday, 17 June 2020 13:20:42 UTC