Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML with Hebrew characters displaying weird

Tags:

html

css

hebrew

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="#">&#1514;&#1497;&#1512;&#1489;&#1506;</a>:</span><span>12345</span></div>
    <div><span><a target="_BLANK" style="" href="#">&#1514;&#1497;&#1512;&#1489;&#1506;</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?

like image 200
kuchi Avatar asked Jan 19 '12 04:01

kuchi


2 Answers

Add this CSS rule:

span a {
    unicode-bidi: embed;  
}
like image 200
ori Avatar answered Sep 24 '22 16:09

ori


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.

like image 40
Jukka K. Korpela Avatar answered Sep 25 '22 16:09

Jukka K. Korpela