What is DirectionDetector?

DirectionDetector is a JQuery plugin witch can set dir-attribute/style-attribute/class-attribute for elements with RTL content. so it can be used in multi language web applications. for example Arabic is a RTL language, it can found elements with Arabic content and change direction of element(s) to RTL using dir/style/class.

Download

Direction detector is available under GPL license version 3. you can download it here.

how it works?

DirectionDetector walks on html tree looking for text nodes, then if beginning of string was a RTL language it will set passed arguments to element, so elements with RTL content could have specific style.

how many languages it supports?

It supports more than 9 languages including: of course supported languages are more than list, if you want to know your language supported or not you can check 2 resources witch this plugin is based on:
  1. http://www.unicode.org/charts/
  2. http://www.i18nguy.com/temp/rtl.html

Arguments

note: all arguments are optional.
  1. attribute - mixed arguments to set for elements.
    string will be added to element as a class
    object will be used for setting style on element (JQuery CSS method)
    function will be applied to all elements that passed to function, this function have 3 arguments, first one is dom object of current element. second one is boolean of direction, true for right to left and false for left to right. last one will be text witch plugin found.
    none above (default) dir attribute will be added to element with rtl value
  2. From end - boolean walk html tree from end
    true start point will be set to end of element
    false (default) start point will be set to start of element
  3. Nested Check - boolean check text nodes of children
    true set that children get checked too. for example if <p> send to plugin, it should check <a> elements witch is inside <p> element
    false (default) don't check children
  4. characters to be ignored - string characters witch should be ignored by plugin

Examples:

simple use:

$('p.example1').setDirections();

پارسی

as you can see plugin will not touch elements with LTR content

from end:

$('p.example2').setDirections( { direction:'rtl', textAlign:'right' }, true );

as start point is end of element so this text will not effect and cheching will begin from last text node witch is after <br/> element - we have 3 nodes here: 1. the text you are reading 2. <br/> element 3. Arabic text
العربية

nested check

$('p.example3').setDirections('rtl-content', false, true)

עִבְרִית
now it checks children too. as we putted some Hebrew content in <a> this paragraph will have rtl-class witch is defined in header

ignore characters

$('p.example4').setDirections( 'rtl-content', false, false, '@: \n\r\t'+String.fromCharCode(9851) )

♻: @twitterLike @reply نمونه‌ی شبیه twitter

Custom function

$('.example5').setdirections( function(el, isRtl, foundString){ if(isRtl==true) $(el).css({ 'background-color':'yellow', 'direction': 'rtl'} ); else $(el).css('background-color', 'orange'); }, false, false, '' );

نمونه‌ی راست به چپ

a left to right example