[css-pseudo-4] Require support of text-stroke on ::first-letter pseudo element

[5e-Cleric]

Related Spec: https://drafts.csswg.org/css-pseudo/#first-letter-pseudo

I'd like to propose the property text-stroke, and therefore the property paint-order be applied to the ::first-letter pseudo element (and potentially ::prefix and ::suffix sub-pseudo-elements).

I work developing a tool to make documents using Markdown and CSS, and this issue has been raised before, books do use strokes with drop caps.

Show example from an actual book

Book: Tasha's Cauldron of Everything, by Wizards of the Coast

[jfkthame]

For what it's worth, this already works in both Firefox and Safari:

data:text/html,<style>p::first-letter{font-size:4em;-webkit-text-stroke:4px red;paint-order:stroke fill}</style><p>Hello world</p>

The spec allows (but does not) require support for it:

User agents may apply other properties as well.

[Loirooriol]

-webkit-text-stroke is defined as an inherited property that applies to all elements. So as per #5303 (comment), it applies to text. (I think it should just apply to text, but whatever)

Then it seems to me that, regardless of whether it applies to the ::first-letter box or not, the text inside the ::first-letter should be affected by it.

So ::first-line should be aligned with ::marker in this regard https://drafts.csswg.org/css-lists-3/#marker-properties

All properties can be set on a ::marker pseudo-element and will have a computed value which will then inherit to its text content.

[5e-Cleric]

The property works fine in text, but needs to be applied to the entirety of the text element in Chromium browsers, which hold up the majority of users anyway.

User agents may apply other properties as well.

That sentence's relation to the matter is rather vague, but i appreciate the fact that is technically accurate, the property is allowed.

For what it's worth, this already works in both Firefox and Safari

I had not realized of that support, i shall file a ticket with Chromium for support of this feature then.

All the same, it would be amazing if it could be required. Keeping this issue, unless recommended otherwise.

[Loirooriol]

The property works fine in text, but needs to be applied to the entirety of the text element in Chromium browsers

The point is that this is a text property, so I bet that just adding valid_for_first_letter: true in css_properties.json5 would be enough to support it in Blink.

[yisibl]

Then text-fill-color should be supported too.

[yisibl]

Also, these properties should be supported in ::first-line.

data:text/html,<style>
p::first-line{
  font-size:4em;
  -webkit-text-stroke:4px red;
  paint-order:stroke fill;
}
</style>
<p>Hello world</p>