Question

As per an user-request I’m trying to make my (PhoneGap) webapp work better with RTL languages, such as Hebrew. I want to make my inputs and textareas work better with these languages. When the user switches their keyboard to such a language, the input direction automatically switches to right-to-left, as intended. However, the text-alignment stays on the left side, which is unfortunate. I realize I can switch the text-alignment using the dir attribute like so:

<input dir="rtl" />

My plan is to use JavaScript to somehow detect an RTL input language and add this attribute to all inputs and textareas. However, this seems like a bit of a hassle. Is there an easier way I’m overlooking? I don’t like the idea of adding more JavaScript for this simple task.

Answer 1

If the whole page is written in hebrew or arabic, you should add the dir attribute on the html element, along with a lang="he" / lang="ar" attribute (the latter is for VoiceOver not reading hebrew/arabic believing it’s english. The alphabet and pronunciation are quite different 🙂 ).

If only parts of the page are written in hebrew, then each element containing hebrew text should’ve these attributes (or its parent) and the other parts in english should’ve dir="ltr" lang="en" attributes so that no text is left without the appropriate lang and dir attributes. It’s faster to add them on a single parent than on each individual HTML elements and if a parent has 5 nodes in english and 1 in hebrew, it only needs 2 attributes: 1 on parent for lang="en" dir="ltr", the other on the child element containing hebrew.

For styling problems caused by rtl writing, you can use one of these attributes as a giant switch for each CSS property like float that uses left or right values (and properties like right, border-right, margin-right, margin: t r b l;; please see the second part of one of my first answers here on UTF-8 and CSS. Note: iOS has no problem with advanced CSS selectors that were only dreams when we had to support IE6 😉 )