CODEWITHSUNDEEP
javascripthtmlformstextarearight-to-left
Mohamad Yassine
Mohamad Yassine

Reputation: 62

How to write english from right to left in a text area

I have a very simple question related to writing in text areas. When I set the dir=RTL for the page and I write in English, the browser or the textarea would write the words from left to right like any English writer would, but I want it to write the words from right to left. Can someone help me please?

Thank you in advance.

Current Behavior: بشم Test [this] دجاج

Expected Behavior: بشم [this] Test دجاج

Note: I am writing from right to left

Upvotes: 1

Views: 3700

Answers (3)

Atzmon
Atzmon

Reputation: 1308

The default behavior of a RTL textbox treats multiple English words separated by spaces as a "left-to-right run", thus rendering it as a mini English sentence (LTR) within the larger RTL text. That's why you see those English words render from left to right.

To bypass this default behavior we can catch the space characters, which are neutral characters that inherit their directionality from the previous word, and add a special invisible Unicode control character called Right-to-Left Mark (RLM). This character acts like an Arabic character but has no visual representation. It will just make every word (no matter which language) start with an invisible Arabic character, which will make the browser render it on the left side of the previous word.

To add RLM characters while typing:

function setWordOrder(e) {
	if (e.key == " ") {
		var textbox = document.getElementById("mytextarea");
		textbox.value += "\u200F";
	}
}
<textarea id="mytextarea" style="direction: rtl" onkeyup="setWordOrder(event)"></textarea>

If you save this text to a database you can remove the RLM characters before saving, so that your data is "pure". If you later want to display an existing text from the database (without the user typing it) you can add RLM characters yourself after each space character, before displaying the text on the screen.

Upvotes: 4

Rob
Rob

Reputation: 127

<textarea dir="rtl">
</textarea>

Upvotes: 0

monesul haque
monesul haque

Reputation: 369

You need to do 2 thing Use direction:RTL for the RIGHT alignment

<input type="text" name="textbox" style="direction:RTL;"

then write a JavaScript handler that will attach to the event: "onkeyup", which performs the shifting of the entered character to the LEFT

 function rtl(element)
     {   
      if(element.setSelectionRange){
        element.setSelectionRange(0,0);
     }
    }
    onkeyup="rtl(this);

check out the snippet 

function rtl(element)
{   
    if(element.setSelectionRange){
        element.setSelectionRange(0,0);
    }
}
<input type="text" name="textbox" style="direction:RTL;" onkeyup="rtl(this);"/>

Upvotes: 0

Related Questions