I have a chatbox that displays chats like this
Username: my chat message
Username2: chat message
But then someone registered using Hebrew characters on his username now when he posts on our chatbox it is displayed incorrectly. It would display like this
תירבע: 12345
Username: my chat message
Username2: chat message
This only happens if he posts numbers. Sample HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Chatbox</title></head>
<body>
<div><span><a target="_BLANK" style="" href="#">תירבע</a>:</span><span>12345</span></div>
<div><span><a target="_BLANK" style="" href="#">תירבע</a>:</span><span>this is not numbers so it is displayed correctly</span></div>
<div><span><a target="_BLANK" style="" href="#">Username1</a>:</span><span>message1</span></div>
<div><span><a target="_BLANK" style="" href="#">Useraname2</a>:</span><span>message2</span></div>
</body>
</html>
And the output of that is this
תירבע:12345
תירבע:this is not numbers so it is displayed correctly
Username1:message1
Useraname2:message2
How can I make it display correctly so that the username should appear first?
Add this CSS rule:
span a {
unicode-bidi: embed;
}
Use, in this case,
a { unicode-bidi: embed; }
In general, set unicode-bidi: embed
on any element that may contain text with directionality opposite to that of surrounding text. Although e.g. simple embedding of Arabic words in English text (or vice versa) does not usually require this (since the situation is handled by the inherent directionality of letters), it is a useful precaution when digits, punctuation marks, or other directionally neutral characters may be involved.
The HTML counterpart is <bdo>
, e.g. <bdo><a ...>...</a></bdo>
, but it is as such unimplemented, so you would need to back it up with a { unicode-bidi: embed; }
in CSS and, to cover old versions of IE, document.createElement('bdo')
in JavaScript code.
The dir=ltr
attribute on the a
element may have the same effect, but this is a bug in browsers. By the HTML 4.01 specification, it should only affect directionality of directionally neutral text (Hebrew text surely isn’t), and dir=ltr
is the initial value.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With