Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Canvas text direction getter not interoperable #10884

Open
schenney-chromium opened this issue Dec 27, 2024 · 4 comments
Open

Canvas text direction getter not interoperable #10884

schenney-chromium opened this issue Dec 27, 2024 · 4 comments
Assignees
@schenney-chromium
Labels
topic: canvas

Comments

@schenney-chromium
Copy link
Contributor

What is the issue with the HTML Standard?

The canvas TextStyles section says that for the direction IDL attribute "The direction IDL attribute, on getting, must return the current value." This is not currently interoperable when the value is "inherit", the default.

Firefox seems to follow the spec, reporting "inherit", but Chrome and Safari both resolve the "inherit" value to either "ltr" or "rtl" and report the resolved value.

The question here is which result is more useful for web developers. Knowing what the actual value is helps you know how it might change as other things in the page change (such as the direction CSS property or the HTML dir attribute), but to actually figure out the used value you would need to do a lot of work yourself. On the other hand, reporting the used value tells you what the test is going to render as, but tells you nothing of where the value came from (and doesn't even round-trip).

The underlying issue is that, unlike in CSS, there is no distinction between "the value" and "the computed value". I also have no idea how much content would break if the behavior was changed, although I'll add a counter to Chrome in an attempt to find out how often "ltr" or "rtl" is reported instead of "inherit" (i'm guessing a lot).

Resolution of this issue would clarify which of the two results is actually the right one, and optionally come up with a way for developers to say which one they want.

<!DOCTYPE html>
<html>
  <body>
    <div>
      <canvas id="en" width="200px" height="100px"></canvas>
    </div>
    <script>
      let en_context = document.getElementById("en").getContext("2d");

      en_context.direction = "inherit";
      let text = "Hello";
      en_context.color = "black";
      en_context.fillText(text, 50, 25);
      console.log(en_context.direction);
    </script>
  </body>
</html>
@schenney-chromium schenney-chromium self-assigned this Dec 27, 2024
@Kaiido
Copy link
Member

Kaiido commented Dec 28, 2024 •
edited
Loading

Can you check in your counters whether the value was set from the gotten value or from an explicit value? I suspect one case where "inherit" would be set is when one would try to reset the context's options to its defaults by using a clean context as source of truth. In this case they'd actually not use the default values in Chrome and Safari.
Maybe counters from Firefox would tell more than from Chrome.

And for what it's worth, getComputedStyle(ctx.canvas) will return the value used whether it's set through the dir attribute or through CSS, so it's not that hard to handle inherit. Also to be noted, some attributes like letterSpacing do accept relative length and don't expose the computed value in that case, so for these you'd also need to fetch it from the element yourself.

cc @whatwg/canvas

aarongable pushed a commit to chromium/chromium that referenced this issue Jan 3, 2025
@schenney-chromium
Add use counters to investigate canvas text direction
1e2a7fb 
The reported value of Canvas TextStyle direction IDL attribute is not
interoperable. Firefox reports "inherit" for the default, whereas
Chrome and Safari report the computed value, either "ltr" or "rtl",

Investigate just how often the value is queried, with a goal to determining
a better standardized behavior.

Spec issue: whatwg/html#10884

Bug: 385194416
Change-Id: I61459fb965974e4fd52ffd4432c55c6048ad7c2e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6115394
Commit-Queue: Stephen Chenney <[email protected]>
Reviewed-by: Andres Ricardo Perez <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1401670}
@schenney-chromium schenney-chromium mentioned this issue Jan 16, 2025
Closed
@annevk
Copy link
Member

annevk commented Jan 16, 2025

I tend to think the getter should just return the value it was set to and not be clever. Otherwise we run into #7039.

@schenney-chromium
Copy link
Contributor Author

Returning "inherit" means people would need a solution to #7039 (or use existing methods for looking up direction via traversal). Fortunately all browsers push it into the computed style value for direction.

I guess this is more of an issue for "lang" which really is a complicated mess to extract right now.

@annevk
Copy link
Member

annevk commented Jan 16, 2025

I think we need a solution for #7039 either way so we might as well not make the canvas API depend on that. Because if we do then we need to tackle all the design questions as well, such as whether a getter is even appropriate.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@schenney-chromium schenney-chromium

Labels
topic: canvas
Milestone
No milestone
Development

No branches or pull requests
3 participants
@annevk @Kaiido @schenney-chromium