[css-inline] Line breaks inside drop-caps?

[litherum]

https://drafts.csswg.org/css-inline-3/#propdef-initial-letter

The spec says

the initial-letter property applies ... to inline-level boxes that are placed at the start of the first line.

And the example shows how you can sink whole phrases:

<p><span><em><b>This phrase</b> is styled</em> <strong>specially</strong>. &hellip;</span>
If we apply the following rules:

em { initial-letter: 2; }
b { initial-letter: 3; }
The result might be rendered as

[ADD RENDERING HERE]
THIS PHRASE IS STYLED specially. …

So what happens when there is a line-break in the middle of the sunken content? We shouldn't stack the sunken values.

[fantasai]

I think we've got two options here: have multiline layout inside the initial letter, or suppress line breaks like we do in ruby annotations. Since if someone wants to do the former they can turn the element into an inline-block already, I'm going to suggest the latter.

https://www.w3.org/TR/css-ruby-1/#box-fixup

[tabatkins]

Agreed.

[fantasai]

Thinking about it some more... we actually can handle line breaks in initial letters. I forgot about that. See https://www.w3.org/TR/2016/WD-css-inline-3-20160524/#initial-letter-indentation So long as we can do that, handling block-level descendants and forced line breaks fall out.

It's possible that we may end up dropping that feature, in which case ruby-style inlinification would be appropriate... but it means that an initial letter would overflow rather than wrapping if it contained too much inline content, which isn't great. It would be adequate for application to ::first-letter, but not so much for initial words or phrases.

[fantasai]

Diff for inlinification, in case we need it

	<h4 id="initial-letter-inlinification">Inlinification</h4>

	The UA must ensure
	that all the contents of an <a>initial letter</a>
	that is not an <a>atomic inline</a>
	are <a>inline-level</a>
	by:

	<ul>
		<li><a>Inlinifying</a> its children. (See [[css-display-3#transformations]].)
		<li><a>Suppressing line breaks</a>
		by converting all forced line breaks
		as defined for <a>collapsible</a> segment breaks in [[css-text-3#line-break-transform]].
	</ul>

	Note: This is the same set of transformations
	applied to the content of <a>ruby annotations</a>
	in [[css-ruby-1]].

[frivoal]

CJK typography uses titles which are typeset fairly similarly to dropcaps, can be long, and can wrap lines. (The alignment is initial-letters-align: ideographic border-box.)

https://www.w3.org/TR/jlreq/#d8e2717

Since the sizing of the heading is meant to be an integral number of lines, it feels that this could be achieve by initial-letter or something related to it, applied on the title after putting a display: run-in on it. And since such titles can wrap and span more lines, it initially made me think we wanted to handle line wrapping on initial-letter well enough to cope with that.

However, trying to follow that approach runs into a bunch of difficulties, and I no longer thing that initial-letter is the right way to handle this. It seems to me that a combination of float and block-step is likely to be a more workable approach.

Therefore, I don't think initial-letter has to handle this case, and we don't have to worry about it when deciding how line wrapping works.