I have a simple html textarea, the body has RTL style and so textarea inherits the style from body. So the problem is following.
Problem:
I have to display the following text into text area using $("#myTextArea").val("text from an ajax result comes here").
The text is following,
پاکستان کا کل رقبہ 796096-0-0 مربع کلو میٹرز ہے۔
and the rest of the text is similar and takes several lines. Now the number in the Urdu text is actually 796096-0-0 but it is displayed reverse. There are several such numbers throughout the text. Please tell me a way that I could display the numbers as LTR and the rest of the text as RTL as usual.
Thanks.
You can use RegEx to search for the number. If found you can reverse and then replace it.
Example:
var textAreaValue = "پاکستان کا کل رقبہ 796096-0-0 مربع کلو میٹرز ہے۔";
// This regex string means to match a digit, dash, digit, dash, then 6 digits.
var matches = textAreaValue.match("[0-9]{6}\-[0-9]-[0-9]");
if(matches) { // Check that a match happened (multiple allowed)
for(i = 0; i < matches.length; i++) {
var reverseValue = matches[i].split("").reverse().join("");
textAreaValue = textAreaValue.replace(matches[i], reverseValue);
}
}
// textAreaValue is now پاکستان کا کل رقبہ 0-0-690697 مربع کلو میٹرز ہے۔
$("#myTextArea").val(textAreaValue);
Try to give your text area ltr . Not inherits . May works
// str = "پاکستان کا کل رقبہ 796096-0-0 مربع کلو میٹرز ہے۔";
str = str.replace(/([-0-9]+)/g, "\u202a$1\u202c");
You'll have to place this string in a container that has the CSS attribute direction
set to rtl
, or you'll have to add a "\u202E"
character to the beginning, otherwise the sections appeared in reverse order (but in the correct direction).
These are Unicode direction control characters:
- U+202A: left-to-right embedding
- U+202C: pop-directional-formatting (basically end of embedding)
- U+202E: right-to-left override
I've been using this as a reference: http://www.iamcal.com/understanding-bidirectional-text/