1302722 - Support ::first-letter and ::first-line on SVG <text>

Status: RESOLVED FIXED

(Core :: SVG, enhancement, P3)

Description

[Sebastian Zartner [:sebo]]

SVG 2 requires the ::first-letter and ::first-line pseudo-elements to apply to <text> elements[1].

This bug is to add support for them.

Sebastian

[1] https://svgwg.org/svg2-draft/text.html#TextProperties

Comment 1

[Sebastian Zartner [:sebo]]

Attachment: Test case

In the attached test case the 'a' should be displayed bigger (which it is) and be green and the 'b' should be blue.

Sebastian

Comment 2

[Robert Longson [:longsonr]]

SVG text is coloured using the CSS fill property and not the html color property. I think the testcase is displaying as it should.

Comment 3

[Robert Longson [:longsonr]]

Attachment: Test case

Comment 4

[Robert Longson [:longsonr]]

Although swapping color for fill seems not to work.

Comment 5

[Sebastian Zartner [:sebo]]

(In reply to Robert Longson from comment #2)
> SVG text is coloured using the CSS fill property and not the html color
> property. I think the testcase is displaying as it should.

Oops, sorry, tried different things and forgot to change it back to 'fill'. As you mentioned, 'fill' doesn't work either, unfortunately.

Sebastian

Comment 6

[Robert Longson [:longsonr]]

Attachment: Bug 1302722 Part 1 - clean up spec references r=emilio

Comment 7

[Robert Longson [:longsonr]]

Attachment: Bug 1302722 Part 2 - support SVG properties on first-letter and first-line r=jfkthame

Depends on D200595

Comment 8

[Robert Longson [:longsonr]]

https://treeherder.mozilla.org/jobs?repo=try&revision=83dde74daacbe1344320e2d648dc6c69d290de79

Comment 9

[Robert Longson [:longsonr]]

https://treeherder.mozilla.org/jobs?repo=try&revision=2e653c5e28403577246e3bf7adee84bb1ed4bb3f

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/3983fe0bd56f
Part 1 - clean up spec references r=emilio
https://hg.mozilla.org/integration/autoland/rev/1118131d963c
Part 2 - support SVG properties on first-letter and first-line r=jfkthame,emilio

Comment 11

[Web Platform Test Sync Bot (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/44440 for changes under testing/web-platform/tests

Comment 12

[Robert Longson [:longsonr]]

https://github.com/w3c/csswg-drafts/issues/9918

Comment 13

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/3983fe0bd56f
https://hg.mozilla.org/mozilla-central/rev/1118131d963c

Comment 14

[Web Platform Test Sync Bot (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 15

[Robert Longson [:longsonr]]

Release Note Request (optional, but appreciated)
[Why is this notable]:
Relevant SVG CSS text properties can be applied to the ::first-letter and ::first-line pseudo elements now. So you can fill and stroke the first letter of SVG text using the ::first-letter as well as change the font. Note that you'll need to use the white-space CSS property to force SVG text to respect newlines if you want to make use of first-line.
[Affects Firefox for Android]:
yes
[Suggested wording]:
[Links (documentation, blog post, etc)]:
https://www.w3.org/TR/SVG2/text.html#TextProperties
https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter
https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line
https://codepen.io/CodeRedDigital/pen/MWxROBR
There's a testcase in this bug too.

Comment 16

[Sebastian Zartner [:sebo]]

This should also be added to the related browser compat data.

Sebastian

Comment 17

[Dave Letorey]

I have been experimenting with this and the test-case.

text::first-letter {
  fill: red;
}

fill has no effect nor does stroke.

There appears absolutely no way to add multiple line text so there is no way to target ::first-line in a <text> element.
Using <tspan> is not the solution for this as they are treated as separate <span> elements.

Here is a demo I've been using to experiment

Comment 18

[Robert Longson [:longsonr]]

First letter works for me, the bug landed with a test to prove it works.

First line works too but you'd need to engineer separate lines and to do that you'd need to use the white-space CSS property to force the text to respect newlines.

Comment 19

[Dave Letorey]

Thank you for your assistance I now have this all working as expected.

https://codepen.io/CodeRedDigital/pen/MWxROBR

Comment 20

[Dave Letorey]

Associated Pull Requests

• Content PR
• Firefox release note PR
• BCD PR