[csswg-drafts] [css-text] [css-inline] Define how to deal with inline backgrounds whose boundary falls into a ligature (#5251)

emilio has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-text] [css-inline] Define how to deal with inline backgrounds whose boundary falls into a ligature ==
For this test-case:

```html
<!doctype html>
<style>
  div {
    font-size: 180px;
    font-family: "Nimbus Roman", Times;
  }
  span { background: rgba(255, 0, 0, .5); }
  span + span { background: rgba(0, 255, 0, .5); }
</style>
<div><span>f</span><span>iona</span></div>
```

This is what I see on different browsers:

![shaping-across-elements-2](https://user-images.githubusercontent.com/1323194/85344602-6fdb1180-b4f0-11ea-905e-01f1c9f63c30.png)

Both Gecko's and Blink's behavior make some amount of sense to me. It seems Blink puts the whole ligature inside the first inline box. Gecko instead does something where the text is painted atomically on top of the inline backgrounds, crossing the inline boundary.

WebKit's behavior of not shaping the ligature may also be reasonable for this case (not in general of course).

It's not clear to me what the right answer is... But maybe the spec ought to have a model of how this is supposed to work?

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5251 using your GitHub account

Received on Monday, 22 June 2020 23:30:27 UTC