[css-inline] initial-letter appliance and inheritance

[Loirooriol]

initial-letter does not inherit and applies to

::first-letter pseudo-elements and inline-level first child of a block container

The problem is that the inline-level first child box of a block container is the root inline box, which cannot be targeted using selectors.

If the definition refers to the first child in the element tree then that's a problem with display: contents. And if you have <div><b><i>Text</i></b></div>, it's not clear why initial-letter applies to b but not to i.

In any case, since there is no inheritance, it's not clear what happens if you set initial-letter both to that first child and to the block container's ::first-letter, or to nested ::first-letters.

Instead, I think there are three reasonable possibilities:

• initial-letter only applies to block containers that establish an inline formatting context, and affects the initial letter of the block container. But note that often the block container that establishes the IFC is an anonymous one, so initial-letter should inherit.
• initial-letter only applies to innermost ::first-letter pseudo-elements, but it inherits, so you can set it on a block-level, inline-level or ::first-letter parent box.
• initial-letter only applies to innermost ::first-letter pseudo-elements. And that's all because it doesn't inherit.

[fantasai]

OK, so @dauwhe and I checked in some edits to define this a little more precisely. You can read the new definition here: https://drafts.csswg.org/css-inline-3/#first-most-inline-level

Agenda+ for review. @Loirooriol Let us know if we missed anything or if this should be resolved another way.

[Loirooriol]

Much better, but it's still not much clear what happens when initial-letter is specified on multiple nested ::first-letters or first-most inline-level descendants. There is only this note, inside parentheses, inside an example:

(Note that the styling on <b> is ignored, as it has an ancestor already styled as an initial letter.)

I can't find the proper definition of this. Also, the interaction will probably depend on #2243.

And this definition

an inline-level box which is the first child of a block container is a “first-most inline-level descendant” of that block container, as is the first child of an inline box that is itself a “first-most inline-level descendant” of the block container. (Note, this definition is recursive.)

seems to mean that any first child of an inline box that is itself a “first-most inline-level descendant” of the block container is also a “first-most inline-level descendant” of that block container, even if the first child is not inline-level (remember #1477, an inline box can have block-level children).

And I think it would be clearer without recursivity, e.g.

an inline-level box is a “first-most inline-level descendant” of a block container if it's the first child of its parent box, and every of its ancestors is either an inline box which is also a first child, or an inclusive ancestor of the block container.

[fantasai]

I can't find the proper definition of this.

I think you missed “However, the initial-letter property does not apply to any box that is itself a descendant of an initial letter box.” ?

Anyway, your rewording looks better in multiple respects. I'll try to work it in.

[fantasai]

OK, checked in 412bfea which isn't the same as your wording because I tried to tighten up some of the related restrictions. Also broke up the sentences a bit and rearranged things so that we don't need the throw-away term. Let me know if it's up to snuff!

[Loirooriol]

I think you missed “However, the initial-letter property does not apply to any box that is itself a descendant of an initial letter box.” ?

I missed that indeed, thanks. The new wording looks better, and thanks for the acknowledgment!

But still a bit concerned about edge cases of ::first-letter, e.g. should it be possible to have two initial letter boxes in the same block container? If you have

<div><span>‘</span>T</div>

div::first-letter { initial-letter: 2; }
span { initial-letter: 3; }

then CSS pseudo allows the above to generate this tree:

• <div>
  • <span>
    • ‘
  • ::first-letter
    • T

Note initial-letter applies to both the <span> and ::first-letter, and they aren't nested.

Maybe you can handle this with

Furthermore, if 'initial-letter' is applied to an inline-level box
that is not positioned at the start of the line, for example due to bidi reordering,
its used value is ''initial-letter/none''.

[fantasai]

Didn't want to leave it quite that open (otherwise people might ask about margin-left or some other layout-time thing), so added “or otherwise preceded by other inline-level content”. @Loirooriol Let me know if that works. :)

[Loirooriol]

@fantasai It's good. Just one last point about nesting:

the initial-letter property applies not just to the CSS-defined ::first-letter pseudo-element [...]. Specifically, initial-letter also applies to any inline-level box [...] whose ancestors [...] have a computed initial-letter value of normal.

This seems to allow initial-letter to apply both to a ::first-letter and its inline parent. I would at least remove the "also", and maybe clarify it a bit more that these restrictions also hold for ::first-letter.

[Loirooriol]

Not sure if this could be a problem:

<div>
  <span style="initial-letter: 3">Foo</span>
  <p>Bar</p>
</div>

The <span> is wrapped inside an anonymous block container. I think it's not much clear whether anonymous block containers don't establish a containing block, or if they do but percentage resolution skips them. The former case would imply that initial-letter does not apply to the <span>.