[css-shapes] Allow shape-outside to apply to initial letter

I think that authors would like to be able to use initial-letter with shape-outside. As the CSS WG have resolved that floats are ignored on an initial letter box, it now would not be possible to float the initial-letter in order to use shape-outside.

A solution (as mentioned in the f2f) would be to allow shape-outside on initial-letter.

Hasn't that already been covered by the initial-letter-wrapping property (though at-risk) in the css-inline spec?

Or maybe you are proposing dropping initial-letter-wrapping in favor of shape-outside on initial letter?

initial-letter-wrapping wouldn't allow for an arbitrary shape to be applied however, so the two use cases may be a bit different.

[css-inline] shape-outside can affect initial-letter-wrap, issue #885

[css-inline] better language for shape-outside #885

@dauwhe

OK, @dauwhe and I checked in edits to make the initial letter use shape-outside instead of the glyph outline when initial-letter-wrap is set to all. Let us know if this seems appropriate or if some other definition makes more sense?

Maybe the both shape-outside and glyph outline coexist could be better?

I think, for initial letter, if wrapping, most cases could be hoped to be wrapped by it's glyph outline
since this could perfectly fit the lines of the letter, which may be more difficult to achieve by using shape-outside.

By default, the initial letter use the glyph outline. And if website makers specify shape-outside property, then use the shape-outside.

Yes, if shape-outside is none then we do the usual thing of using the glyph outline, of course. :) The question is whether it should key off of initial-letter-wrap: all or if shape-outside should always override even for other values of initial-letter-wrap.

Oh, yeah, I think I got the key point of this issue now.

I prefer shape-outside should always override .... Firstly, it's more simple to use, more easy to understand. Secondly, it's convenient to fallback. If it needs to specify the two properties like following.

initial-letter-wrap: all;
shape-outside: circle(); /* or something else */

And assume that if shape-outside is invalid (due to either the wrong value or browser compat),
it would become difficult to let the other behaviors of initial-letter-wrap to be valid, because it had been used to set to all the value to make shape-outside to work.

@fantasai

The question is whether it should key off of initial-letter-wrap: all or ...

@fantasai , I have a linguistic question to consult. What's the meaning of key off of? :)

@anjia

@anjia that's just another way of asking the same question about overrides. If shape-outside would key off of the value all then it would only apply when that value was set and not be used when other values of initial-letter-wrap were used.

I think it might be better to recast initial-letter-wrap to have all as the initial value, defined to have all lines wrap around the rectangular shape or shape-outside, if one is defined. Then the value of first could be to wrap all lines but the first around the rect or shape-outside, etc.

@astearns

@astearns It was specifically requested that all not be the default since it is expensive to implement and is at-risk. Also, in your case, how would you get it to wrap around the glyph shape?? That's currently what all means.

@anjia

@anjia “key off” means “To take as a controlling input” according to wiktionary :) which is a very abstract way to define it. In this case it's setting a condition. I can't say I've ever really thought about the phrase too deeply, so I don't know how best to explain it. ^_^;;

It's a little unclear in the minutes, but one drawback to my scheme above is that it does not allow an author to say, “wrap everything at the margin box, except for the first line that should wrap at my shape-outside-defined position”

Right. And on the face of it, both variants of first seem reasonable.

Er, based on the discussions above, I have another idea to discuss.

Perhaps we could define the relationship between these two properties at first, shape-outside and initial-letter-wrap. The following is my opinion.

shape-outside defines the external shape of the element as a whole
initial-letter-wrap defines how to place the element in the specific context.

Then we recast the values of shape-outside and initial-letter-wrap.

Values of `shape-outside`

shape-outside: none;

shape-outside: margin-box; /* by default */
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;
/* these above xxx-box could represent the rectangular shape of the initial letter box */

/* new values */
shape-outside: rendered-content;  /* or whatever it ends up being named */
shape-outside: grid;  /* be same as https://drafts.csswg.org/css-inline/#valdef-initial-letter-wrap-grid  */

/* custom arbitrary shapes */
shape-outside: circle();
shape-outside: ellipse();
...

Values of `initial-letter-wrap`

The default behavior is to fit to the rectangular shape of the initial letter box.

initial-letter-wrap: none;   /* by default, do nothing to the shape-outside defined */
initial-letter-wrap: first;  /* the first line wraps as shape-outside defined, others wrap rect box */
initial-letter-wrap: non-first; /* the non-first lines wrap as shape-outside defined, the first line wraps rect box */
initial-letter-wrap: all;   /* all lines wraps as shape-outside defined */

Usage

e.g.

/* 1. no setting the both, all lines wrap rect box*/

/* 2. all lines wrap glyph outline */
shape-outside: rendered-content;  /* or some other name */
initial-letter-wrap: all;

/* 3. first line wraps glyph and the others wrap rect box */
shape-outside: rendered-content;
initial-letter-wrap: first;

/* 4. first line wraps margin-box, and the others wrap glyph */
shape-outside: rendered-content;
initial-letter-wrap: no-first;

/* 5. all lines wrap custom shape */
shape-outside: circle();

/* 6. the first line wraps rect box, the others wrap custom shape */
shape-outside: circle();
initial-letter-wrap: first;

/* 7. the first line wraps glyph outline, the others wrap custom shape */
/*... it is a pity to meet this ...*/

@astearns

@astearns We discussed the interaction of shape-outside and initial-letter-wrap last week in https://lists.w3.org/Archives/Public/www-style/2020Jun/0009.html as a consequence of #5117
Are you satisfied with the current definition, and can we close this issue, or is there something here you want to pursue?

@fantasai

@fantasai the part about shape-outside looks good to me, though it would probably be better to ask @rachelandrew and @anjia whether they are satisfied before closing the issue.

I'm not sure the interaction between initial-letter-wrap: all and shape-margin is all that clear, though. The first paragraph talks about in bounds and the second paragraph talks about glyph shapes. I think they're meant to be referring to the same thing, but that would be more clear if we used the same terms in both places. And I'm not sure how or whether shape-margin interacts with "end-side border+padding+margin" in the case where shape-outside is none. If there isn't already an issue on this, perhaps we close this one and open a new one for these clarifications?

There is an issue for your final point: #5119 - this makes no distinction between a shape derived from a glyph and a shape specified by shape-outside, and I'm not sure such a distinction is necessary.

@astearns

The first paragraph talks about in bounds and the second paragraph talks about glyph shapes.

@astearns I can't figure out which paragraph you're referring to, can you quote it?

@anjia The current draft has the behavior you outline in #885 (comment) except for two things:

There's no non-first value for initial-letter-wrap since nobody has asked for it yet. :) (That should be a separate issue if you think it's needed.)
If shape-outside is none, we use the glyph outline; no need to specify anything special for shape-outside to get initial-letter-wrap to make this very common effect.

I think that should solve it for this issue. Let me know if there's anything that remains incomplete?

It's the two paragraphs in the definition for initial-letter-wrap: all - ink versus glyph outline. I assume they're the same thing, but it would probably be better to use glyph outline in both places.

For each line of text impacted by the initial letter, the line box adjacent to the initial letter starts at the start-most point that touches the ink of the initial letter, plus the amount of the initial letter’s end-side border+padding+margin.

If the value of shape-outside is not none, shape-outside is used instead of the glyph outline. In both cases, shape-margin is applied to expand the outline.

[css-inline-3] Use glyph outline consistently. #885 (comment)

@astearns

@astearns Gotcha. Fixed.

Navigation Menu

Repository navigation

[css-shapes] Allow shape-outside to apply to initial letter #885

8 remaining items

Values of `shape-outside`

Values of `initial-letter-wrap`

Usage

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[css-shapes] Allow shape-outside to apply to initial letter #885

Description

Activity

upsuper commented on Jan 15, 2017

rachelandrew commented on Jan 16, 2017

fantasai commented on May 24, 2018

anjia commented on Jun 11, 2018

fantasai commented on Jun 11, 2018

anjia commented on Jun 12, 2018

anjia commented on Jun 12, 2018

astearns commented on Jun 12, 2018

fantasai commented on Jun 12, 2018

fantasai commented on Jun 12, 2018

8 remaining items

astearns commented on Jun 13, 2018

frivoal commented on Jun 13, 2018

anjia commented on Jun 16, 2018

Values of shape-outside

Values of initial-letter-wrap

Usage

fantasai commented on Jun 10, 2020

astearns commented on Jun 10, 2020

faceless2 commented on Jun 10, 2020

fantasai commented on Jun 12, 2020

astearns commented on Jun 12, 2020

fantasai commented on Aug 26, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Values of `shape-outside`

Values of `initial-letter-wrap`