Text direction rtl misleading?

richarddunnebsc · 2017-01-24

From a presentation and functional perspective, there is no difference between text direction ltr and rtl. The only difference is where the cursor is placed within the input field. If text direction right to left were taken literally, text entered using rtl would be written backwards, which would be match the attributes literal interpretation, without reading any documentation. Is there any desire in the community to change rtl as far an the English language is concerned or is it a case of keep the status quo?

jhpratt · 2017-01-24

It’s not intended for what you’re thinking. It is supposed to be used with right-to-left languages such as Arabic and Hebrew.

tabatkins · 2017-01-24

Yes, the dir attribute (and the ‘direction’ CSS property, which it maps to) are hints to the rendering engine about the intended direction of the language in an element, to help the bi-directional rendering algorithm render things better.

Check out this link: http://software.hixie.ch/utilities/js/live-dom-viewer/?<!DOCTYPE%20html> <body%20dir%3Drtl> foo%20%26%23x05E2%3B%26%23x05D1%3B%26%23x05E8%3B%26%23x05D9%3B%26%23x05EA%3B%20123

Try removing the dir attribute, and notice how the visual ordering of things changes - this is because digits are only “weakly LTR”, so they’ll arrange themselves in an LTR order, but they get grouped with the Hebrew (“strongly RTL” characters) as part of an “RTL run”, so they’ll always be to the left (following, in RTL) the Hebrew. The dir attribute then informs the browser what the “overall” direction is supposed to be, so you either get the “foo” first and then the RTL run to the right (following, in LTR), or you get “foo” on the right side and then the RTL run to its left.

Getting your head wrapped around the bidi algorithm can be pretty confusing, so don’t worry too hard about it. Just understand that the dir attribute’s purpose is for a page written in an RTL language (or an element that’s going to contain RTL content) to tell the browser this - it doesn’t do anything useful for pages written entirely in LTR languages like English.

richarddunnebsc · 2017-01-24

Thanks for the clarification. Years ago as part of a college project on numerical literacy, I had hoped to use the ‘rtl’ feature to show examples of addition, subtraction and division of numbers. It was a pity the rtl attribute doesn’t apply itself the way I had hoped it would.

Tigt · 2017-01-25

If you want the behavior described in your initial post, you might still be able to get it with transform, as in this demo: http://s.codepen.io/tigt/debug/39925f40cb54c140c1889f2628c3bd0b

bsittler · 2017-01-26

This behavior can also be achieved in HTML using the special bdo element with the dir attribute, e.g. <!DOCTYPE html><html><head><title>BDO example</title></head><body>Addition:<br><div dir=rtl style="display:inline-block"><bdo dir=rtl>123<br><u>456 +</u><br>579</bdo></div><br>End of example.</body></html>. In cases where that isn’t practical the Unicode RLO control character U+202E may be used instead, terminated by PDF U+202C - note, however, that those controls are effectively deprecated in most contexts these days in favor of markup.

richarddunnebsc · 2017-01-30

I know that using rtl for mathematics is very niche in the context of HTML. The transform attribute referred to by Tigt looks perfect for this. However, transform it is not currently associated with the input object. Is it or would it be possible to use the transform attribute with the input object? If yes, would anyone be against it?