question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Text `letterSpacing > 0` cause the RTL text to flip

See original GitHub issue

Expected Behavior

RTL text behaves the same way with letterSpacing is 0 or above.

Current Behavior

the text flip if letterSpacing > 0

Possible Solution

give another param to control if the RTL characters are flip or not.

Steps to Reproduce

see this example link: https://pixijs.io/pixi-text-style/#{"style"%3A{"align"%3A"right"%2C"fontFamily"%3A"Alef-regular"%2C"fontSize"%3A33%2C"letterSpacing"%3A1%2C"trim"%3Atrue%2C"whiteSpace"%3A"normal"}%2C"text"%3A".תירבע דועו 10 תירבע תקידב\ntest text 1"}

just play with the Letter Spacing value to 0 (zero) and 1 to see the issue.

Environment

version 6.1.1

Issue Analytics

  • State:open
  • Created 2 years ago
  • Comments:10 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
eXponentacommented, Aug 24, 2021

@bigtimebuddy How you think, can we add modern canvas API for text with fallback onto current implementation?

https://github.com/fserb/canvas2D/blob/master/spec/text-modifiers.md

Origin Trial for Chrome already can activate it (available from 92) and API will arrived in 95 Chrome by default.

https://developer.chrome.com/origintrials/#/view_trial/3585991203293757441

0reactions
ShukantPalcommented, Apr 10, 2022

@bigtimebuddy @eXponenta Should this be closed given the PR?

Read more comments on GitHub >

github_iconTop Results From Across the Web

svg text - rtl issue - Stack Overflow
Whene i`m adding letter-spacing or word-spacing chrome flips rtl to ltr, and the letters\words are reversed. here is a sandbox: ...
Read more >
letter-spacing - CSS: Cascading Style Sheets - MDN Web Docs
The letter-spacing CSS property sets the horizontal spacing behavior between text characters. This value is added to the natural spacing ...
Read more >
letter-spacing | CSS-Tricks
The letter-spacing property controls the amount of space between each letter in a given element or block of text.
Read more >
Right-to-left Styling - RTL Styling 101
However, when the content is Arabic, it causes a weird text-rendering issue. There are some areas with a different color between letters. In...
Read more >
Line and character spacing in Illustrator - Adobe Support
Optical kerning adjusts the spacing between adjacent characters based on their shapes. Kerning and tracking options. A. Original text B. Text ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found