HTML tags in RTL forms
I store some RTL language strings - which have some HTML tags embedded - in a DB. When I echo these strings on an HTML page these are rendered correctly. However, when I place these same strings in a <textarea> the HTML tags are all messed up.
Here below is an example (you'll need to copy paste it in an HTML file). As you can see the tags are rendered corrrectly in the <div> but are totally messed up in the <textarea>.
Does anybody know how to ensure that even visually the tags look correct? I am placing this text in a textarea for editing so it needs to be correct.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<html dir="ltr">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div dir="rtl">اسحب هذه الرسالة إلى اعلى الصفحة و <strong><a href="javascript:void(0);" id="demo-start">اضغط هنا</a></strong> لتبدأ.</div>
<br />
<textarea dir="rtl" rows="12" cols="50">اسحب هذه الرسالة إلى اعلى الصفحة و <strong><a href="javascript:void(0);" id="demo-start">اضغط هنا</a></strong> لتبدأ.开发者_C百科</textarea>
</body>
</html>
Note
Somehow I believe it has to do with the‎ or ‏ mark, but I have no idea how.Change the dir attribute of the textarea to ltr. It will format fine.
jsfiddle of the updated markup.
If you're not sure of the content of your textarea, you can use dir="auto" in your textarea. This will make the browser render the text either LTR or RTL based on the first strong character.
Both of these will render the internal text correctly:
<textarea dir="auto">This is an LTR line.</textarea>
<textarea dir="auto">זוהי שורת ימין לשמאל.</textarea>
See the jsFiddle here
The only problem you may run into are mixed strings; if one of your inputs displays even a single strong character in English followed by RTL text, the textbox will render LTR, which will display the rest of the string as a bit mangled.
If you run into this problem, you will have to work with a javascript (or back-end) code to calculate the majority of strong characters in your string and attach a dir="ltr" or dir="rtl" accordingly.
For the most part, setting dir="auto" on your textboxes should work for most cases.
加载中,请稍侯......
精彩评论