Why is a trailing punctuation mark rendered at the start with direction:rtl?

Question

This is more a sort of curiosity. While working on a multilingual web application I noticed that certain characters like punctuation marks (!?.;,) at the end of a block element are rendered as if they were placed at the beginning instead when the writing direction is right-to-left (as it is the case for certain Asian languages I do not speak).

In other words, The string

Hello, World! 

is rendered as

!Hello, World 

when placed in a div block with direction: rtl

This becomes even more evident if the text is split in two parts and given different colors: a contiguous chunk of text at the end is rendered in two separated regions:

http://jsfiddle.net/22Qk9/

What's the point of this behavior? I guess this must be a peculiarity of (all?) right-to-left languages which is automatically handled by the browser, so I don't need to care about it, or should I?

Answer 1

If you want to fix this behavior add the LRM character ‎ in the end. It's a non=printing character.

Source : http://dotancohen.com/howto/rtl_right_to_left.html

Example : http://jsfiddle.net/yobjj6ed/