[css-text-decor-4] Add 'inset' keyword to text-shadow

[SebastianZ]

The box-shadow property takes an optional inset keyword allowing the shadow to be displayed inside the box, allowing to create "pushed in" effects.

The same should be possible for text shadows. Especially for big bold texts like in headlines this would be valuable to give them a special touch.

Therefore, I suggest to add the optional inset keyword to the text-shadow property. Effectively, this makes its syntax the same as the one for box-shadow.

Sebastian

[Loirooriol]

But currently, text shadows "never overlay the text itself". Would it be different for inset text shadows? Or would they only be visible if the text is not fully opaque?

[fantasai]

Yeah, inset text shadows would have to be painted over the text for sure.

[Myndex]

For something bold it would make it easier to sculpt 3D looking glyphs. There are ways to sort of get that effect now...

I'd like to see the "offset" property that box-shadow has added to text-shadow, as that would allow for some fun multi outline effects.

There are accessibility concerns here though and the potential for mis use that damages readability...

[SebastianZ]

I'd like to see the "offset" property that box-shadow has added to text-shadow, as that would allow for some fun multi outline effects.

The x and y offset values are actually the mandatory part of text-shadow. E.g. text-shadow: 2px 2px; creates a shadow that has a two pixels offset in both directions. Furthermore, text-shadow already takes a list of shadows. So text-shadow: -2px -2px, 2px 2px; is already valid.

Also note, that Text Decoration 4 already added a spread radius. So the only difference to box-shadow is currently the inset keyword. That's also what I wrote in my initial post.

There are accessibility concerns here though and the potential for mis use that damages readability...

The readability issues actually already exist right now, depending on how you define the shadow(s). (Take the second example from above.) The inset keyword wouldn't change that.

Sebastian

[SebastianZ]

For what it's worth, here's a related feature request for Gecko including a sample image:

https://bugzilla.mozilla.org/show_bug.cgi?id=577672

Sebastian

[SebastianZ]

@fantasai Since that's a straight forward addition with known use cases, could this be added to the agenda to get a decision?

Once it's decided to add it, I can write up some spec. text for it.

Sebastian

[LeaVerou]

While we're at it, can we add spread? That's far more frequently needed than inset (though both are useful).

[SebastianZ]

As mentioned in a previous comment, the spread radius is already part of Text Decoration 4.

Sebastian

[SebastianZ]

If you're interested in following the implementation issues for the spread radius, here they are:

WebKit: https://wkb.ug/76997
Chromium: https://crbug.com/1226531
Gecko: https://bugzil.la/655590

Sebastian

[css-meeting-bot]

The CSS Working Group just discussed Text Shadow Inset, and agreed to the following:

• RESOLVED: Add inset to text-shadow
• RESOLVED: Text shadows start at outer (for outset) or inner (for inset) edge of stroke

The full IRC log of that discussion

<fantasai> Topic: Text Shadow Inset
<TabAtkins> They *do* have different behavior, so the slightly different syntax matches that.
<fantasai> github: https://github.com//issues/6074
<fantasai> fantasai: Proposal is to add the 'inset' keyword and allow inset shadows on text
<fantasai> smfr: For box-shadow, it interacts with border and is inside the border
<fantasai> smfr: unsure if we have spec text on interaction with stroke
<fantasai> smfr: Still OK to add it, and figure out later on
<fantasai> fantasai: So should have text shadows start at the edge of the stroke (both outset and inset)
<fantasai> smfr: Makes the most sense
<fantasai> fantasai: Outset shadows would start at outer edge of stroke, inset shadows at inner edge of stroke
<fantasai> astearns: Any objections?
<fantasai> RESOLVED: Add inset to text-shadow
<fantasai> RESOLVED: Text shadows start at outer (for outset) or inner (for inset) edge of stroke

[fantasai]

Edited in. @smfr, would you mind reviewing the text to make sure that the interaction with stroke and the stacking order constraints are adequately explained?

[fantasai]

Filed follow-up issues in response to smfr's comments in 13442dd :

• [css-text-decor-4] Text Shadow Spread Corners #7250
• [css-text-decor-4] Composition of inset shadows #7251