[css-inline] initial-letter should allow zero sink?

[MatsPalmgren]

https://drafts.csswg.org/css-inline/#valdef-initial-letters-integer "Values less than one are invalid. "

FYI, here's an initial letter style from a printed magazine "The Guardian Weekly" vol.200 No.8: which appears to use something like initial-letter:15 0. Is this use case something that the spec should address?

[astearns]

Ugh. Personally, I'd say no because it breaks up the word more than other uses. But there's at least one person in the world who wanted this effect.

My first thought was that it would be possible to do this with a ::first-letter { float: left; clear: left; } but that does not work because clear does not apply to first-letter. It seems like anything that allows float should also take float-related properties. Perhaps that's an oversight that should be fixed? (whether or not we allow this for initial-letters)

[jonjohnjohnson]

@astearns though I agree on anything accepting a float also accepting float-related properties, I have achieved this affect by setting margin-right: 100% with line-height: 1 on top of float: left. So, achievable, yes, but not as clean as the vertical rhythm of initial-letter.

[MatsPalmgren]

BTW, this magazine uses a lot of creative initial letter styles. I've also seen examples of a (drop) initial letter that spans all lines of the first paragraph, i.e. something like initial-letter: drop all.

[fantasai]

I'm not sure zero sink would get you that line break there? Probably the best way to handle this is a sink of 1 plus wrap-after: always https://www.w3.org/TR/css-text-4/#wrap-before

[MatsPalmgren]

I'm not sure zero sink would get you that line break there?

I didn't suggest there's an actual line break there (see below)... The offset could just be an implied layout effect from having a zero sink.

Probably the best way to handle this is a sink of 1 plus wrap-after: always

The disadvantage is that it makes the initial-letter not part of the first line. ::first-line would only include the initial-letter for example. That's not the case for initial-letters without a wrap-after: always style. To me, the first letter [in the example screenshot above] is semantically part of the first line even though it's rendered above the remainder of the line. The red color kind of emphasizes that too. Compare for example initial-letters: 1 2 - that letter is still on the first line although it's rendered completely below it. (Also, a minor limitation of using wrap-after is that you must use a legacy ::first-letter to apply it (which is a subset of initial-letter use cases, IIRC).)

[MatsPalmgren]

Here's a second example from a different magazine:

[faceless2]

I didn't really have a supporting argument for my point 8 at https://github.com/w3c/csswg-drafts/issues/4171, suggesting it might be useful to allow setting the font size on the initial-letter. But I think I've just found one.

This looks like a case where font-size: 50vw is an improvement over initial-letters: 15 0

[astearns]

I am assuming the size of the glyph should be the same for initial-letters: 15 0 and initial-letters: 15 1. The effect in most cases would just be moving the following text one more baseline down and not wrapping. But if there are descenders and https://drafts.csswg.org/css-inline/#initial-letter-exclusions applies, the following text would need to be moved even lower (in line-height increments) to avoid the collision.

[css-meeting-bot]

The CSS Working Group just discussed [css-inline] initial-letter should allow zero sink?, and agreed to the following:

• RESOLVED: allow sink of 0 for initial letters

The full IRC log of that discussion

<dael> Topic: [css-inline] initial-letter should allow zero sink?
<dael> github: https://github.com/w3c/csswg-drafts/issues/3698
<dael> astearns: Are myles and Dave on?
<dael> myles: It seems clearly valuable given examples and impl shouldn't be hard. Seems good
<dael> astearns: Did you see my last comment on details?
<dael> myles: I can do that
<dael> astearns: Basically we have rules about where things get pushed below and initial-letter. Just need extra details for this case. Where line is pushed and size of initial letter. I'm asusming size for initial is 15 with a 1 line drop which should be same size as with 0 line drop. Measuring from line below initial instead of next to
<dael> astearns: Accomodations for descenders needs an extra bit to avoid colliding
<dael> fantasai: Have rules about descenders that would continue to apply
<dael> astearns: Need to have rules for this spec text
<dael> myles: I think I'm with fantasai that both cases size and descenders are both present when sink is not 0 so we should make the solution general to apply to all sinks
<dael> astearns: In agreement. Just in my reading doesn't seem to cover all cases so want to make clear consistent sizing and descendar
<dael> astearns: Obj to allow sink of 0 for initial letters
<dael> RESOLVED: allow sink of 0 for initial letters

[fantasai]

I have no idea how to draft the layout model for this in a way that makes sense.

[astearns]

@fantasai can you outline or list the problems you’re seeing?

[fantasai]

@astearns The box models that we have been discussing so far assume that the initial letter is part of the content of the first line, so I'm not sure how floating it above that line such that the first line's content flows underneath would actually work. Particularly if that first line has content that is larger than the root line box.