search

w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.5k stars 661 forks source link

[css-backgrounds-4] The `background-clip: text` needs to contain `text-emphasis` #10805

Open yisibl opened 2 months ago

yisibl commented 2 months ago

At #900 we've already decided that text-decoration is considered part of the text, so it will be clipped as well.

text-emphasis should also be treated the same.

There are currently some issues with both Safari and Firefox, see examples:

https://codepen.io/yisi/pen/zYVJqyR?editors=0100

Safari TP 202

Looks like it's dropped U+FE0F (VS16)

image

Firefox

image

cc @smfr @nt1m

nt1m commented 2 months ago

Safari has the most sensible behavior here IMO, text-emphasis-color or color should be honored if specified. This is also how underlines and text work.

yisibl commented 2 months ago

@nt1m Safari is actually a separate issue, nothing to do with background-clip. That is, text-emphasis doesn't respect U+FE0F (VS16).

❤️ This emoji actually contains two characters:

Open the following code in Safari and you'll see that the text-emphasis is only rendered to `U+2764

data:text/html;charset=UTF-8,<!doctype html>
<style>
.foo {
    font-size: 52px;
    border: solid 1px blue;
    text-emphasis-style: "❤️";
    display: inline;
}
</style>
<div class="foo">test emoji❤️</div>
nt1m commented 2 months ago

Oh I see what you mean, yeah it should using the emoji form, not the raw text form.

nt1m commented 2 months ago

Can you file a bug on bugs.webkit.org ? It would be really appreciated :)

yisibl commented 2 months ago

@nt1m https://bugs.webkit.org/show_bug.cgi?id=279008