Inferring the Locale text direction with Javascript

Here’s a hack to detect which is the locale text direction (e.g. left-to-right for English or right-to-left for Hebrew) using JavaScript:

/**
 * Detects locale text direction...
 * @return {String} "ltr" or "rtl"
 */
function detectTextDir() {
   var container = document.createElement("p");
    container.style.margin = "0 0 0 0";
    container.style.padding = "0 0 0 0";
    // container.style.textAlign = "start"; // If CSS 3+ 
    container.style.textAlign = ""; // Explicitly override text align that might be assigned via style sheets
    
    var span = document.createElement("span");
    span.innerHTML = "X";
    
    container.appendChild(span);
    document.body.appendChild(container);
    
    // LTR if text position is nearer left of container, RTL if text position is nearer right of container
    var localeDirection = span.offsetLeft < (container.offsetWidth - (span.offsetLeft + span.offsetWidth)) ?
        "ltr" : 
        "rtl";
       
    document.body.removeChild(container);

    return localeDirection;
}

A limitation is that it doesn’t work if there is a style sheet present which explicitly assigns a text-align value other than “start” for paragraphs directly in the document body. You could probably tweak the idea to use something more obscure like an address block to reduce chances of this happening.

Advertisements

A Simple Javascript Model-View-Controller API

Model-View-Controller is such a useful and powerful design pattern. You can use MVC for more than just physical views (i.e. GUI’s), but abstract views as well (e.g. pure data structures). You can even use MVC as an event mechanism.
Continue reading

Accessing the System Clipboard with JavaScript – A Holy Grail?

I am developing an API written in JavaScript for a project which requires the ability to copy data to, and retrieve data from, a clipboard within a web browser. A simple/common problem definition – but due to tight browser security, finding a solution is a bit of a nightmare. This article outlines and discusses a number of approaches for implementing a clipboard feature into your JavaScript applications.

copy-paste
Continue reading

Retrieving Inherited CSS Styles with DOM

If you need to get a CSS style from an element in a document, you cannot just test the style of the element directly. That is: Element.style.nameOfStyle won’t work. Take this example:

<p style="white-space:pre">
  Hello world - <b> A  B  C  D </b>
</p>

The immediate white space style of the bold element in the DOM will be normal (default for bold element). However the style is actually pre, since it inherits it from the paragraph ancestor element.
Continue reading