HTML5 Canvas fillText with Right-to-Left string

Question

I am trying to use the fillText() method on an HTML5 Canvas\' 2d Context to draw a string written in Arabic. It works perfectly, until I put a punctuation mark at the end of

Answer 1

The problem is that the '.' character is 'directional neutral character', it means that it get the direction from the next strong directional character, if there is no character afterwards, it get it from the container. In your case it is the latter one. One solution, as already found, is to make the container right-to-left. But there are still two other solutions :

1- Put another invisible strong right-to-left directional character after the '.'. Fortunately the unicode has one special character for that which is "right-to-left mark" (U+200F)

2- Put the "right-to-left override character" (U+202E) before the text, so after this mark any neutral character get the right-to-left direction. You can end the override by adding "pop directional formatting" character (U+202C).

I changed the @shervin's sample code to demonstrate it.

  


  
    
      Your browser does not support the HTML5 canvas tag.
    

    

  

Result image

There are other solutions. You can find them in unicode specification in this page. They are, "direction isolation" (U+2067) which has rendering problem in Chrome. And "direction embedding" with U+202B, which is similar to direction override.