How to detect text direction of element using Javascript?

Question

What's the best way to detect the text direction of an html element using Javascript? I would expect to get either "rtl" or "ltr".

<div dir="ltr" id="foo">bar</div>

<div style="direction:ltr" id="baz">quux</div>

<div dir="ltr"><div id="jeez">whiz</div></div>

How would I test for the direction on "foo", "baz" or "jeez"?

Answer 1

getComputedStyle is available in modern browsers (IE9+ and the others).

getComputedStyle(document.getElementById('foo')).direction

http://jsfiddle.net/m8Zwk/

Reference to getComputedStyle on Mozilla Developer Network

Answer 2

Try this

document.defaultView.getComputedStyle(document.getElementById('baz'),null)['direction'];

OR

style = document.defaultView.getComputedStyle(document.firstChild,null);
console.log(style.direction);

Answer 3

@explosion-pills answer is correct. I did some more research for IE compatibility and came up with the following:

function getDirection(el) {
    var dir;
    if (el.currentStyle)
        dir = el.currentStyle['direction'];
    else if (window.getComputedStyle)
        dir = getComputedStyle(el, null).getPropertyValue('direction');
    return dir;
}

This should even work on Firefox 3.6 which requires null as the second parameter to getPropertyValue.

Since this gives more information I thought I would post it in case it helps someone.

Answer 4

You can simply use the style object:

console.log(document.getElementById('baz').style.direction);

DEMO

Take note that this object of the DOM only represents the in-line styles of an element, it doesn't apply to any css style sheets.