Issue
How do I change the textarea direction from the option box, from normal "ltr" to "rtl" so it also writes from right to left too, when for example I chose the Language "Pashto, Arabic or Hebrew" in the option and if Arabic is not chosen the the textarea is normal with "ltr".
Please do not misunderstand the question. I am not asking how to make ltr and rtl in css, I am asking how to make the texteara change direction by the use of an option box.
NOTE: I know that there are some automatic solutions for "Arabic", but this solution needs to be from the option since languages as for example "Pashto" uses the same Latin alphabets as Europe does, but it is written in the same direction as Arabic or Hebrew. That is why It can not be made automatic, but it needs to be activated when those languages are chosen in the options menu.
It should be changing from "ltr to rtl" and at the same time into "writing right to left".
What it needs to be done is to change the directions of the textarea and also the direction of the typing, once the specified language is chosen on the option box.
JavaScript (I know this JavaScript can be 100% wrong this time, so please go ahead and give me your own totally different JavaScript solution)
<script type='text/javascript'>
function setRtL(e) {
if (e.key == " ") {
var textbox = document.getElementById("SeekBox");
textbox.value += "\u200F";
}
}
</script>
<textarea name="u" cols="74" rows="7" wrap="physical" id="SeekBox" style="resize:none; direction: ltr"></textarea>
<select name="LangF" class="OBSMatch" id="opt">
<option value="" disabled>Common Languages:</option>
<option value="zh-CN">Chinese (Simplified)</option>
<option selected value="en">English</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="ru">Russian</option>
<option value="es">Spanish</option>
<option value="" disabled>—</option>
<option value="auto">Auto Detect</option>
<option value="" disabled>—</option>
<option value="" disabled>Other Languages:</option>
<option value="sq">Albanian</option>
<option value="ar" onkeydown="setRtL(event)">Arabic</option>
<option value="ps" onkeydown="setRtL(event)">Pashto</option>
<option value="iw" onkeydown="setRtL(event)">Hebrew</option>
<option value="hy">Armenian</option>
<option value="ro">Romanian</option>
</select>
<input type="button" id="SwitchLang" value=" Swap ▲▼ Language ">
<select name="LangT" class="OBSMatch" id="opt">
<option value="" disabled>Common Languages:</option>
<option value="zh-CN">Chinese (Simplified)</option>
<option value="en">English</option>
<option selected value="fr">French</option>
<option value="de">German</option>
<option value="ru">Russian</option>
<option value="es">Spanish</option>
<option value="" disabled>—</option>
<option value="auto">Auto Detect</option>
<option value="" disabled>—</option>
<option value="" disabled>Other Languages:</option>
<option value="sq">Albanian</option>
<option value="ar" onkeydown="setRtL(event)">Arabic</option>
<option value="ps" onkeydown="setRtL(event)">Pashto</option>
<option value="iw" onkeydown="setRtL(event)">Hebrew</option>
<option value="hy">Armenian</option>
<option value="ro">Romanian</option>
</select>
When writing "rtl" you write from right to left, but the new characters appears on the left side not as in normal "rtl" on the right side.
EXAMPLE: Think that we write on English on the left side and the new text spears on the right side...
EXAMPLE: In Arabic you write on the right side and the text appears on the new left side...
EXPLAINING: Think of how you write in English. In English you write left to right and all next text appears on the right side your text. Now if we reverse that and you get right to left and all the new text should appears on the left side of your text.
But "rtl" alone only makes it right to left with new text appearing on the right side instead of left, that is why "rtl" alone does not work as it should and more needs to be done.
Solution
you can call the function on onchange
event of select and then get value of selected option. if it is arabic or pashto or armenian. change style.direction of textbox to rtl otherwise to ltr. something like this seems to work:
So everytime you change from 'ltr' to 'rtl' or vice-versa, you will need to reverse the value in textbox. When in 'rtl' mode you will have to add new characters to the beginning of the string and while deleting text you will have to remove characters from the beginning for this you can check on oninput
event of textbox.
<textarea name="u" cols="74" rows="7" wrap="physical" id="SeekBox" style="resize:none; direction: ltr" oninput="correctTextDirection(this)"></textarea>
<select name="LangF" class="OBSMatch" id="opt" onchange="setRtL(this)">
<option value="" disabled>Common Languages:</option>
<option value="zh-CN">Chinese (Simplified)</option>
<option selected value="en">English</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="ru">Russian</option>
<option value="es">Spanish</option>
<option value="" disabled>—</option>
<option value="auto">Auto Detect</option>
<option value="" disabled>—</option>
<option value="" disabled>Other Languages:</option>
<option value="sq">Albanian</option>
<option value="ar" >Arabic</option>
<option value="ps">Pashto</option>
<option value="iw">Hebrew</option>
<option value="hy">Armenian</option>
<option value="ro">Romanian</option>
</select>
<script type='text/javascript'>
var prevText = document.getElementById("SeekBox").value;
function setRtL(obj) {
var textbox = document.getElementById("SeekBox");
var text = textbox.value;
if(["ar","ps","iw"].indexOf(obj.value) >=0){
if(textbox.style.direction === "ltr")
textbox.value = text.split("").reverse().join("");
textbox.style.direction = "rtl";
}else{
if(textbox.style.direction === "rtl")
textbox.value = text.split("").reverse().join("");
textbox.style.direction = "ltr";
}
}
function correctTextDirection(obj){
if(obj.style.direction === "ltr")
return;
var currentText = obj.value;
if(currentText.length > prevText.length){
obj.value = currentText[currentText.length-1] + prevText;
prevText = obj.value;
}else if(currentText.length < prevText.length){
obj.value = prevText.substr(1);
prevText = obj.value;
}
}
</script>
Answered By - Dij
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.