I’ve seen a similar question asked with regards to Japanese text, and it seems to be a limitation of the actual
canvas element and the
fillText function simply not handling RTL very well; however I’m still wondering if anyone has any decent solutions in mind for this issue.
I’m trying to display a dynamic text field in Hebrew (which is RTL) where the text may change. However sometimes the field may be centered (for example, when it’s a title), but setting the
align: 'center' property for a field that also has
rtl: true means the alignment is ignored and it’s always right-aligned.
You can see this most clearly when using a
fixedWidth field, which was intended to handle word wrapping.
I tried mitigating this by dynamically calculating the width of the field and positioning it in the center of the canvas, which does work for a single line of text; however, giving it a
wordWrap with a set width means that once the text wraps, it goes back to being right-aligned, even though its alignment is set to center.
I’ve made up a JSFiddle here where you can see the effect and toggle the mock-centered text effect:
If anyone has any decent ideas on how to overcome this, I’m all ears