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 · 1 comment
Open

Canvas text direction getter not interoperable #10884

schenney-chromium opened this issue Dec 27, 2024 · 1 comment
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

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
2 participants
@Kaiido @schenney-chromium