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> لتبدأ.</textarea>
</body>
</html>
Note
Somehow I believe it has to do with the ‎ or ‏ mark, but I have no idea how.
Change the
dirattribute of thetextareatoltr. It will format fine.jsfiddle of the updated markup.