CodePen

HTML

            
              <h1>Auto Direction <sup>(RTL | LTR)</sup></h1>
<input type="text" placeholder="Type something&hellip;" />
            
          
!

CSS

            
              @import url(http://fonts.googleapis.com/css?family=Lato);
$bg:#EFEFEF;
$color:#666;
$color_gray:#444;
$color_input:#AAA;
$color_hover:#222;

html, body {height: 100%;padding: 0;}
*:focus{outline:none}
p{margin:0;}
html {
  font-size: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body{
  padding:0;
  background:$bg;
  padding: 1em 0;
  color:$color;
  font-family: "Lato",Arial,Times,serif;
  line-height: 1.618;
  text-align:center;
}
input{
  width:25%;
  min-width:300px;
  display: block;
  font-size:.8rem;
  margin: .75em auto;
  color: $color_gray;
  background: #FFF;
  border: .12rem solid $color_input;
  padding: .7rem .75rem;
  font-family: 'Lucida Sans Unicode','Lucida Grande',Tahoma,sans-serif;
  border-radius: 4px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              function checkRTL(s){           
    var ltrChars    = 'A-Za-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02B8\u0300-\u0590\u0800-\u1FFF'+'\u2C00-\uFB1C\uFDFE-\uFE6F\uFEFD-\uFFFF',
        rtlChars    = '\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC',
        rtlDirCheck = new RegExp('^[^'+ltrChars+']*['+rtlChars+']');

    return rtlDirCheck.test(s);
};

// BIND KEYPRESS
var input = $('input').on('keypress', keypress)[0];

function keypress(e){
    // need to wait for the character
    setTimeout(function(){
        var isRTL = checkRTL( String.fromCharCode(e.charCode) ),
            dir = isRTL ? 'RTL' : 'LTR';
        
        input.style.direction = dir;
    },0);
}
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................