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

@fantasai

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

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

@dauwhe

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

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.

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

@stantonma

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.

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

The CSS Working Group just discussed initial letter shape-margin vs margin, and agreed to the following:

RESOLVED: Make shape-outside and margin interact the same way for initial letters as for floats

The full IRC log of that discussion

<fantasai> Topic: initial letter shape-margin vs margin
<fantasai> github: https://github.com//issues/5119
<emilio> faceless2: we have two ways of defining margin around an initial-letter, one is margin and the other is shape-outside
<emilio> ... we need to define how they interact
<emilio> ... I think I agree that matching what floats do is a good idea
<emilio> ... there are a few proposals, not sure if fantasai's proposals are still applicable?
<emilio> fantasai: there were several options, one is that we only used shape-margin only, another is using it when it's non-none, another is using maximum
<emilio> faceless2: there's a strong argument I think to make it work the same ways as floats, may need to remove the margin-right magic
<emilio> fantasai: one of the advantages of regular margin over shape-margin is that is axis-specific
<emilio> ... so you can tweak the space with the following line by tweaking the margin only in the vertical axis
<emilio> faceless2: I agree, current adding margin-right adds functionality that you can't reproduce in other ways
<fantasai> s/vertical/horizontal/
<emilio> currently*
<fantasai> s/axis/axis, for example. Using different amounts of margin between the initial letter and impacted lines vs between the initial letter and lines below it might make sense. You can't do that with shape-margin/
<emilio> astearns: so the downside of making it behave like floats is that you get the weird behavior that you can only pull stuff closer inside the margin box
<emilio> ... and you need to expand the margin box if you want to push stuff further
<emilio> ... but authors are dealing with that already
<emilio> ... so probably they can deal with it too for initial-latter
<emilio> fantasai: given the consistency argument we should probably spec this and see how it works and try to get some feedback
<emilio> faceless2: nobody is shipping this currently right? Just WebKit?
<emilio> fantasai: I think that's right, and WebKit's implementation is quite limited atm
<emilio> RESOLVED: Make shape-outside and margin interact the same way for initial letters as for floats
<emilio> astearns: as you spec this it may be that we should also move that over how floats behave

[css-initial-3] Match interaction of outline / shape-margin / margin …

@astearns

@astearns / @faceless2 Mind reviewing the edits to make sure I got them right? 6b1e2a2

That change LGTM, thanks!

@fantasai

@fantasai I'd put a paragraph break before "In both cases." Making it part of the second paragraph of the definition obscures the fact that it applies to the first paragraph as well.

[css-inline-3] Add paragraph break. #5119 (comment)

@astearns

@astearns OK, done! Thanks for the review~

Navigation Menu

Repository navigation

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

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

📋 Server Request & Proxy Logs

⚙️ Pengaturan Proxy Target

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

Description

Activity

fantasai commented on Jun 11, 2020

fantasai commented on Jun 12, 2020

astearns commented on Jun 12, 2020

faceless2 commented on Jun 17, 2020

faceless2 commented on Jun 17, 2020

astearns commented on Jun 18, 2020

css-meeting-bot commented on Jul 28, 2020

fantasai commented on Aug 13, 2020

faceless2 commented on Aug 13, 2020

astearns commented on Aug 13, 2020

fantasai commented on Aug 26, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions