Use modern canvas2D api for text where is available

[eXponenta]

Partial solution for #7729 on latest Chrome by newest Canvas2D API.

At the moment there are not way solving this case for all cases outside browser implementation without external library that will include glyphs database order, reconstruct ordering of glyphs and ligatures.

See:
https://github.com/fserb/canvas2D/blob/master/spec/text-modifiers.md
https://chromestatus.com/feature/6051647656558592

Description of change

Using canvas2D letterSpacing for avoid flipping text for RTL and broking a glyphs for ligatures-heavy language.

Example:

https://exponenta.games/games/fix-spacing/

NOTE: You should use Chrome Canary or enable chrome://flags/#new-canvas-2d-api in stable chrome.
Current version of chrome 92 origin trials still not workig (for me) how should.

Pre-Merge Checklist

• Tests and/or benchmarks are included
• Documentation is changed or added
• Lint process passed (npm run lint)
• Tests passed (npm run test)

[bigtimebuddy]

Overall, I think this is the correct approach for RTL and letter-spacing.

My only tiny suggestion would be to avoid the any cast. Create a stricter type.

interface ModernContext2D extends ContextRenderingContext2D {
   textLetterSpacing?: number;
   letterSpacing?: number;
}

public canvas: ModernContext2D;

[bigtimebuddy]

Thanks 👍

[themoonrat]

My query here; does this change mean that text on Chrome can now look different to text on any other browser? Consistency of visuals is pretty essential imo. If there is a visual difference, maybe there's a flag that is off by default that devs can opt into if they understand the ramifications?

[bigtimebuddy]

Fair point @themoonrat. I could see this being an issue if someone is using line wrapping or expecting a certain width. Makes it more fragmented a dev experience. Though the impact is probably on the smaller side.

Adding a flag is similar to what we did with the new line height behavior, would be good approach here too. This should probably be opt-in.

[eXponenta]

Problem that users should select different implementation when native letter spacing not supported.
Looks like we should implement getter for setting that now inside text, like:

if ( Settings.NATIVE_LETTER_SPACING_SUPPORTED ) {
      Settings.USE_NATIVE_LETTER_SPACING = true; // disable emulation
      .....
} else {
     // preventing use letterSpacing and force 0 to it on text
     Settings.USE_LETTER_SPACING_EMULATION = false;
     .....
}

Looks like dirty, but allow to change bechavior globally for all Texts.

Upd.

Or maybe enum?

Settings.TEXT_LETTER_SPACING = NATIVE || EMULATED || DISABLED

[bigtimebuddy]

I think you're over complicating this from the API design. There are two cases we should consider:

1. Emulated-only letter spacing. Ignores the availability of native letter spacing (default)
2. Uses native letters spacing if available but fallback to emulated.

We do not need to allow disabling letter-spacing. I don't see a case where that is useful. I also don't think we need to allow this on a per-instance basis, so global flag is fine. The case for using native is RTL or situations where emulated spacing fails.

I'd suggest a simple flag on Text, not settings.

Text.nativeLetterSpacing = true

[GoodBoyDigital]

nice!

[eXponenta]

Chrome 94 was shipped and letter spacing arrived.😁