Is there an alternative attribute for dir = auto in IE

Question

We must show the text, which may be in English or Arabic on the page. we are faced with the problem of directing the text.

For the English language, the direction will be from left to right, for the Arabic direction, the direction will be from right to left. We added 'dir = auto' for dynamic operation. [Tools based on the language of the content will be changed)

Exp : <table> <tr> <th>english text</th> <th>arabic text</th> </tr> <tr> <td dir=auto><span>love</span></td> <td dir=auto><span >حبحبحب</span></td> </tr> </table> 

These changes work great with Firefox and Chrome. But IE does not support this attribute, and it’s hard for us to find an alternative way to do this.

So our question is how to change the text direction from left to right / right to left based on content (IE)?

We appreciate your help.

Answer 1

Since at least IE 11 does not support dir="auto" correctly, I wrote the following helper method:

 /** * Helper to determine if text is LTR text. * We assume that any left-to-right text contains at least one character from a to z, * or ONLY the following characters: # _ [any alphanumeric character, including digits] * * @param {string} string * * @returns {boolean} */ function isLtr(string) { return string.match(/[az]+|^[\#\w]+$/gi) !== null; } 

Using this helper, I check each element text and manually set dir="rtl" , as you can see in this simplified example:

 var element = document.querySelector('.element-with-dir-auto'); var text = '#حبحبحب'; if (!isLtr(text)) { element.setAttribute('dir', 'rtl'); } 

You may need to adjust the regex of the helper method to better highlight your respective cases.

Answer 2

Here you go. Use this css for elements; but you need to identify the language first.

 .rtl { direction: rtl; unicode-bidi: bidi-override; } .ltr { direction: ltr; unicode-bidi: bidi-override; } 

JSFIDDLE