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

[css-meeting-bot]

The Working Group just discussed box tree nesting vs initial-letter, and agreed to the following:

• RESOLVED: the initial letter will be the first inline that has intial-letter not set to normal, (+details in the spec)
• RESOLVED: the initial letters will behave as if was taken/rendered outside of its inline ancestors

The full IRC log of that discussion

<fantasai> Topic: box tree nesting vs initial-letter
<fantasai> github: https://github.com//issues/2184#issuecomment-391832514
<frremy> fantasai: we didn't define very clearly what we defined as "the first inline"
<frremy> fantasai: so, it's slighly weird, because adding spans should not change result most of the times
<frremy> fantasai: but in this specific case, if they are nested, it's not clear which one to take
<dauwhe> https://github.com/w3c/csswg-drafts/commit/412bfeabf53c980babe9845c3a2684904790c2e2
<frremy> fantasai: (looking at notes and issues)
<fantasai> “ Specifically, initial-letter also applies to any inline-level box that is the first child of its parent box and whose ancestors (if any) that are descendants of its containing block are all first-child inline boxes that have a computed initial-letter value of normal. ”
<frremy> florian: if you have multiple spans, the outer one does have a border, but the nested one has initial letter
<frremy> florian: does the border wraps around the "nested" initial letter?
<frremy> Rossen: I would assume not
<frremy> florian: so it becomes out of flow, kinda?
<frremy> Rossen: yes
<frremy> fantasai: (reads pasted in text)
<frremy> florian: there are two options (1) you take the nested span out of flow (2) or we can refuse to initial letter any nested span inside something that has a border
<frremy> Rossen: the second options is though from the styling point of view
<frremy> florian: ok, then let's do 1
<florian> s/something that has a border/something that has a margin, border, or padding/
<frremy> PROPOSED: the initial letter will be the first inline that has intial-letter not set to normal, (+details in the spec)
<frremy> Rossen: any objection?
<frremy> RESOLVED: the initial letter will be the first inline that has intial-letter not set to normal, (+details in the spec)
<dauwhe> see https://github.com//issues/743
<frremy> PROPOSED: the content of the initial letter will behave as if was taken outside of its inline ancestors
<fantasai> s/content of the//
<frremy> PROPOSED: the initial letters will behave as if was taken/rendered outside of its inline ancestors
<frremy> RESOLVED: the initial letters will behave as if was taken/rendered outside of its inline ancestors

[fantasai]

OK, committed changes. @Loirooriol would you mind reviewing to make sure I handled all your concerns? :)

[Loirooriol]

@fantasai It looks good, assuming that anonymous block containers establish a containing block (#2184 (comment)), which technically it's what CSS2 says. I just want to confirm because no CSS3 spec seems to ratify that anonymous block containers are skipped for percentage resolution, and not sure whether anonymous block containers establish a containing block or not has been observable until now.

[fantasai]

@Loirooriol OK! Closing out this issue, follow-up in #3217.