1778909 - Implement the letterSpacing and wordSpacing attributes for Canvas2D text

Status: RESOLVED FIXED

(Core :: Graphics: Canvas2D, enhancement)

Comment 1

[Ashley Hale [:ahale]]

Triage - since this is marked as a defect it needs severity, the letterSpacing and wordSpacing attributes sound like details that can significantly affect layout of text in a canvas, so I am marking this S3.

Comment 2

[Calixte Denizet (:calixte)]

:jfkthame, are there any plans to implement these two properties ?

Comment 3

[Jonathan Kew [:jfkthame]]

I'm hoping to get to them in the fairly near future (sorry, nothing more specific than that).

Comment 4

[Jonathan Kew [:jfkthame]]

:emilio, the initial patch here doesn't work for OffscreenCanvas because it can't parse the values without the style context (to resolve font-relative lengths) -- can you look into what it'd take to handle that? Do we have existing ways to do it? Thanks!

Comment 5

[Jonathan Kew [:jfkthame]]

Attachment: Bug 1778909 - Implement letterSpacing and wordSpacing attributes for Canvas2D text. r=#layout-reviewers

Currently, this works only for the <canvas> element, not for OffscreenCanvas,
because CanvasRenderingContext2D::ResolveStyleForProperty needs the presShell
and canvas element to resolve CSS lengths (which may use font-relative units).

Comment 6

[Jonathan Kew [:jfkthame]]

Attachment: Bug 1778909 - Update tests and metadata for canvas letterSpacing/wordSpacing attributes. r=#layout-reviewers

Depends on D177019

Comment 7

[Emilio Cobos Álvarez (:emilio)]

So there's no reasonable reference value for all these units like vh/vw. This is basically https://github.com/whatwg/html/issues/7847, right?

The discussion there leaned into only allowing non-relative lengths / percentages, right? In fact you're already disallowing word-spacing percentages. If so, and given these are relatively simple properties, I think we could add a simple API that worked on canvas for absolute lengths.

Comment 8

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1778909 - Add an API to parse an absolute length without any other context. r=jfkthame

This should allow making these work on canvas.

Comment 9

[Jonathan Kew [:jfkthame]]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #7)

So there's no reasonable reference value for all these units like vh/vw. This is basically https://github.com/whatwg/html/issues/7847, right?

Right, I don't think there's any sensible way to use things like vh/vw, but it would be nice to have font-relative units like em, ex, ch, etc., resolved against the canvas font attribute, and there seem to be existing tests that expect at least em to work. For letter- and word-spacing, em is probably the most useful unit for authors, though I could imagine ch also being popular.

In fact you're already disallowing word-spacing percentages.

Yeah - the HTML spec explicitly says that

The wordSpacing setter steps are:

1. Let parsed be the result of parsing the given value as a CSS <length>.
   ...

so only <length> is allowed, not <percentage>.

Comment 10

[Emilio Cobos Álvarez (:emilio)]

(In reply to Jonathan Kew [:jfkthame] from comment #9)

(In reply to Emilio Cobos Álvarez (:emilio) from comment #7)

So there's no reasonable reference value for all these units like vh/vw. This is basically https://github.com/whatwg/html/issues/7847, right?

Right, I don't think there's any sensible way to use things like vh/vw, but it would be nice to have font-relative units like em, ex, ch, etc.,

Shouldn't be hard to extend the resolve_pixel_value shenanigans to resolve against a font, perhaps... Might need some rejiggering of the relative fonts to take a font struct or so, but should be doable...

In fact you're already disallowing word-spacing percentages.

Yeah - the HTML spec explicitly says that

The wordSpacing setter steps are:

1. Let parsed be the result of parsing the given value as a CSS <length>.

Does that mean that normal is not expected to work either per spec? Are there tests for that?

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b3fb213b502f
Add an API to parse an absolute length without any other context. r=jfkthame

Comment 12

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/b3fb213b502f

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/158519168b2c
Implement letterSpacing and wordSpacing attributes for Canvas2D text. r=saschanaz,emilio
https://hg.mozilla.org/integration/autoland/rev/c94a256988d7
Update tests and metadata for canvas letterSpacing/wordSpacing attributes. r=boris

Comment 14

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

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

Comment 15

[Noemi Erli[:noemi_erli]]

https://hg.mozilla.org/mozilla-central/rev/158519168b2c
https://hg.mozilla.org/mozilla-central/rev/c94a256988d7

Comment 16

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

Upstream PR merged by moz-wptsync-bot