Closed Bug 1302722 Opened 8 years ago Closed 4 months ago

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

Categories

(Core :: SVG, enhancement, P3)

enhancement

Tracking

()

RESOLVED FIXED
124 Branch
Tracking Status
firefox124 --- fixed

People

(Reporter: sebo, Assigned: longsonr)

References

()

Details

(Keywords: dev-doc-complete, Whiteboard: tlt-backlog, [wptsync upstream])

Attachments

(3 files, 1 obsolete file)

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
Summary: Support ::first-letter and ::first-line on <text> → Support ::first-letter and ::first-line on SVG <text>
Whiteboard: tlt-backlog
Attached image Test case (obsolete) —
In the attached test case the 'a' should be displayed bigger (which it is) and be green and the 'b' should be blue.

Sebastian
SVG text is coloured using the CSS fill property and not the html color property. I think the testcase is displaying as it should.
Attached image Test case
Attachment #8791609 - Attachment mime type: text/plain → image/svg+xml
Although swapping color for fill seems not to work.
(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
Priority: -- → P3
Type: defect → enhancement
Severity: normal → S3
Assignee: nobody → longsonr
Status: NEW → ASSIGNED
Attachment #8791576 - Attachment is obsolete: true
Pushed by longsonr@gmail.com:
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
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/44440 for changes under testing/web-platform/tests
Whiteboard: tlt-backlog → tlt-backlog, [wptsync upstream]
Status: ASSIGNED → RESOLVED
Closed: 4 months ago
Resolution: --- → FIXED
Target Milestone: --- → 124 Branch
Upstream PR merged by moz-wptsync-bot

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.

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

Sebastian

Keywords: dev-doc-needed

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

Flags: needinfo?(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.

Flags: needinfo?(longsonr)

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

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

Associated Pull Requests

You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: