Right to left Text HTML input

Question

For my website, i need to provide arabic support. Part of it is to provide input textboxes where when user types in, the new characters have to be appended to the left and the text has to be right aligned.

setting the css property to

text-align:right

didn't work, as i could not get the cursor to come to the left and add letters there. So I removed that property and added

direction:RTL

Here, the cursor came to the left and text was right aligned. but the newly added characters were not getting appended to the left. Instead they were getting appended to the right end only.

How do I fix this? please help..

For example, see the google arabic page search box. I need the exact behavior, although not with those fancy keyboard icon etc., http://www.google.com/webhp?hl=ar

Invite

Normally <bdo dir="rtl">TEXT HERE</bdo> would do exacly that, but when receiving text from a form or such, it won't work. – Marduk

Could you post your solution? – Whetstone

Answer 1

Here's what I can think of:

• Use direction:RTL for the RIGHT alignment
• Write a JavaScript handler attached to the event: "onkeyup", which performs the shifting of the entered character to the LEFT (doing some text processing).

Expound

Ahmed can you please share the way you managed to work it out? – Whetstone

A fiddle would be nice. Thanks – Zara

JS is not needed in any way, sorry but this is a really bad suggestion. Nicholas answer below, dir="rtl" is all that is needed: w3.org/International/questions/qa-html-dir – Sassy

Answer 2

You can use the dir="rtl" on the input. It is supported.

<input dir="rtl" id="foo"/>

Clarsach

Also note though that CSS shims are still recommended as of 2018 for some browsers, see w3.org/International/articles/inline-bidi-markup – Sassy

Answer 3

function rtl(element)
{   
    if(element.setSelectionRange){
        element.setSelectionRange(0,0);
    }
}




<input type="text" name="textbox" style="direction:RTL;" onkeyup="rtl(this);"/>

This code will do.

Playtime

Answer 4

Simply use this CSS, this will change your text field and cursor position from right to left.

input, textarea { 
 unicode-bidi:bidi-override; 
 direction: RTL; 
}

Rickets

Using unicode-bidi is not recommended by MDN - developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi – Wescott

Answer 5

Use only direction:RTL and when switched to a proper keyboard (e.g. Arabic) in the system settings, the newly added characters will correctly be appended to the left.

Barboza

Answer 6

A feature specific to Angular Material, in addition to direction: rtl, is :

.mat-form-field {
   text-align: start!important;
 }

This will work for both RLT & LTR

Luke

Answer 7

A better, more user-friendly way to do this is to set the dir attribute to auto.

<input dir="auto" id="foo"/>

This way if a user enters English text it will be left-aligned and if he enters Arabic text it will be right-aligned automatically

See here for more information on the dir attribute

Wescott

Answer 8

Use on the input in css.

input {
  unicode-bidi:bidi-override;
  direction: RTL;
}

Theoretician

Using unicode-bidi is not recommended by MDN - developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi – Wescott

Answer 9

It works for Chrome browser.
Use a div element and make it editable.

    <div contenteditable="true">
    </div>

Gobetween