HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

dir="auto" JavaScript shim for IE

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
autojavascriptdirforshim

Problem

Reason for script:

dir="auto" is an attribute value from the HTML 5 spec with current poor support in IE and Opera browsers. The project I am working on only cares about IE, Firefox and Safari browsers and handles text in both left to right LTR and right to left RTL languages. For cases where the directionality of the text coming from the data source is unkown, I would like to use dir="auto" to handle most cases of directionality. For IE, I would like to simulate this functionality using JavaScript.

Goal of review:

I am hopeful that a review of my work will identify areas where I can improve the code to be more in line with its stated purpose as well as aligning the code to best practices and identifying any bugs that may exist.

Implementation:

-
An isLTR function was used as I figured most use cases would be against LTR text as opposed to RTL.

-
In my research, I wandered across a script by Nicholas Zakas which I thought would be useful and have integrated it into my solution.

-
The project uses Dojo 1.8.1.

XHTML:

Script call in head tag after call to Dojo library:



JavaScript:

```
window.Patterns = window.Patterns || {};
window.Patterns.Bidi = window.Patterns.Bidi || {};
window.Patterns.Bidi.Strings = window.Patterns.Bidi.Strings || {};
window.Patterns.Bidi.Strings.LTRcharacters = "\u0041-\u005A\u0061-\u007A\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02B8\u0300-\u0590\u0800-\u1FFF\u200E\u202A\u202D\u2C00-\uFB1C\uFDFE-\uFE6F\uFEFD-\uFFFF";
window.Patterns.Bidi.Strings.RTLcharacters = "\u0591-\u07FF\u200F\u202B\u202E\uFB1D-\uFDFD\uFE70-\uFEFC";
window.Patterns.Bidi.Strings.NeutralWeakCharacters = "\u0000-\u0040\u005B-\u0060\u007B-\u00BF\u00D7\u00F7\u02B9-\u02FF\u2000-\u2BFF\u2010-\u2029\u202C\u202F-\u2BFF";

(function(/Class Object/ Bidi){
function getDirection(/HTML Element/ element) {
/Copyright 2010 Nicholas C. Zakas. All rights reserved./
/MIT Licensed/
var result = null;
if (element){
if (w

Solution

My 2 cents:

  • Code looks really good overall



  • In prependOverride, the naming is unfortunate



  • The parameter isLTR is really what you request, not what it is



  • The var direction really is a boolean, not the direction of the element



  • If you are going to / type / variables, you might as well go Spartan and use e instead of element



  • prependOverride has 4 magical constants



  • isLTR should cache the regex, not rebuild it in every call



for prependOverride the following might be cleaner:

function prependOverride(/*HTML Element*/ e, /*Boolean*/ requiresLTR) {
    var hasLTR = getDirection(e) === "ltr";
    if (hasLTR !== requiresLTR) {
        e.innerHTML = (requiresLTR? "‭" : "‮") + e.innerHTML + "‬";
    }
}


or, even you could pass the direction you require

function prependOverride(/*HTML Element*/ e, /*String*/ requiredLTR) {
    var actualLTR = getDirection(e);
    if (actualLTR !== requiredLTR) {
        e.innerHTML = (requiredLTR=="ltr"? "‭" : "‮") + e.innerHTML + "‬";
    }
}


I will leave the naming of the magical constants to you.

Code Snippets

function prependOverride(/*HTML Element*/ e, /*Boolean*/ requiresLTR) {
    var hasLTR = getDirection(e) === "ltr";
    if (hasLTR !== requiresLTR) {
        e.innerHTML = (requiresLTR? "‭" : "‮") + e.innerHTML + "‬";
    }
}
function prependOverride(/*HTML Element*/ e, /*String*/ requiredLTR) {
    var actualLTR = getDirection(e);
    if (actualLTR !== requiredLTR) {
        e.innerHTML = (requiredLTR=="ltr"? "‭" : "‮") + e.innerHTML + "‬";
    }
}

Context

StackExchange Code Review Q#32256, answer score: 3

Revisions (0)

No revisions yet.