Browsers display trailing comma of right to left (rtl) css fields at the beginning of the field
Html
<div style='direction:rtl;'>foo,</div>
<div style='direction:rtl;'>fie, fum</div>
unexpectedly displays the results as
Foo
fie, fum
at the right edge of the field.
Why does the comma after foo move to the beginning of the field when using rtl? Why don't alphabetic characters and words match?
This happens at render time in recent Firefox and Chrome version 37.0.2062.94
Mishandled text cuts and pastes the way it should be - a comma appears at the end.
What we want is a text box that aligns the text correctly and truncates the overflow text at the left edge of the box. Think of it as wanting to see the ends of text lines. We use it in SlickGrid, but this is clearly not a SlickGrid problem.
JSFiddle at http://jsfiddle.net/pandemonica/dj7x7ee1
Our planned ugly workaround is to add
<span style='visibility:hidden;'>i</span>
after each text line to display. Also, we will be moving the styling to css.
source to share
You can have content inside an inline element and then play with unicode-bidi.
Html
<div><span>fie,</span></div>
<div><span>fie, foo,</span></div>
CSS
div {
direction: rtl;
}
div span {
direction: ltr;
unicode-bidi: bidi-override;
}
Fiddle: http://jsfiddle.net/dj7x7ee1/1/
Hello
Axel
source to share