3

The HTML

<div style='direction:rtl;'>foo,</div>
<div style='direction:rtl;'>fie, fum</div>

surprisingly renders 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 do the same?

This happens at rendering time in recent Firefox and in Chrome Version 37.0.2062.94

The incorrectly rendered text cuts and pastes the way it is supposed to be - the comma appears at the end.

What we want is a text display field that right-aligns text nicely and truncates overflow text at the left edge of the field. Think of it as only wanting to see the ends of text strings. We're using it in SlickGrid but this is clearly not a SlickGrid issue.

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. Except we will be moving the style to css.

Paebbels
  • 15,573
  • 13
  • 70
  • 139
Monica Anderson
  • 366
  • 3
  • 7
  • > Why does the comma after foo move to the beginning of the field when using rtl? To be clear, it's not at the beginning of the field, it's at the end of the field. But since the field is RTL, the beginning is on the right and the end is on the left. – Bill Keese Mar 19 '21 at 12:22

1 Answers1

3

You could have the content within a inline element and then play around 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/

Greetings

Axel

Axel Richter
  • 56,077
  • 6
  • 60
  • 87
  • 1
    A more direct way is to use `...` inside the `div` element. Anyway, the point is that the comma has weak directionality and therefore “fie,” is treated as “fie” (with inherent left to right directionality) and “,”, and these two items are laid right to left as requested. To override this, you can use HTML, CSS, or special character to force left-to-right directionality. – Jukka K. Korpela Sep 09 '14 at 06:18
  • Axel's solution worked immediately. We had never heard about bidi-anything and would not have known where to look. Thanks a million. Jukka : looks useful also. We'll keep it in mind if we get into further bidirectional trouble. – Monica Anderson Sep 10 '14 at 00:25