[css-inline-3] initial-letters: interaction of shape-margin and regular margin

[faceless2]

@fantasai as you're working on these.

p::first-letter {
    initial-letters: 3;
    margin-right: 20px;
    shape-margin: 10px;
    initial-letters-wrap: all;
}

Do we add the 20px margin to whatever the 10px margin around the shape is calculated to be at that point, or do we use the maximum of the two values?

We've implemented using the maximum of the two margins, which seems to work better - you can set shape-margin to ensure the shape isn't adhered to too closely, and margin-right to push the content along. This also makes more sense with initial-letters-wrap: first, where both properties apply to the first line but only margin-right on subsequent lines.

[fantasai]

Maximum of the two values. The content-box size (and consequently the margin box size) is not influenced by shape-margin.

[fantasai]

Actually, thinking about this more... we've got several options here:

• Lines wrapped to the glyph use the shape-margin distance between the glyph outline and the line box edge, completely ignoring margin/border/padding on the initial letter box itself.
• Lines wrapped to the glyph use the maximum of the shape-margin distance and margin+border+padding distance between the glyph outline and the line box edge.
• Add a none initial value to shape-margin, and use shape-margin exclusively whenever it is not none.

Only honoring shape-margin rather than taking the maximum is simpler, but there is a definite advantage to honoring the margin/border/padding distances, since they can be controlled independently per axis. And anyone applying either margin or padding automatically gets some amount of spacing on all lines, and does not need to specify both shape-margin and margin-inline-end to prevent the line and the initial letter from colliding. So I think I'm a bit biased against the first option, but either of the second two seem reasonable.

(The additive option, having shape-outline expand the size of the initial letter box, doesn't seem particularly useful since padding accomplishes the same thing; and shape-margin in general overlays the box decorations rather than affecting the box’s size, so that would be inconsistent with how it's interpreted for floats also.)

CC @dauwhe

[astearns]

I think it's better to have an interaction between the properties rather than a switch where we only use one or the other.

I think using the maximum is reasonable. Another possibility is to make things consistent with how shapes and margin boxes in floats interact - the shape described by shape-outside and shape-margin is clipped to the margin box. It's a bit weird for authoring, but once you learn how things are implemented for floats your knowledge would carry over to initial-letter.

[faceless2]

Hmm. Actually I prefer Alan's suggestion. My initial case for adding shape-margin was to stop this sort of situation:

But settingshape-margin will add space around the glyph in all directions, pushing the text below the initial-letter down by an additional line. Clipping the shape to the margin box means the user can prevent this by setting margin-bottom: 0

[faceless2]

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:

p::first-letter {
    initial-letter: 3 3;
    initial-letter-wrap: all;
    shape-outside: 10px;
    margin-right: 20px;
}

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

Edit: one consequence of this - currently you can set a negative margin to overlap the text. But shape-margin cannot be negative. Not sure if this is an actual problem or not.

[astearns]

Having shape-margin work exactly the same between floats and initial-letter seems like a good result to me.