Arabic text does not display correctly

Question

So I'm editing a standard HTML page. The charset is set to "utf-8" in the head. The direction on the span selector is set to "rtl" using the CSS property direction (I've also tried the html dir attribute too). I've also tried a number of Arabic specific fonts too.

This is the what is happening:

It doesn't matter what browser I use. For some reason, the Arabic text is output completely wrong... or is it? Parts of the string look similar, and other parts are just wrong.

Any ideas how to get my browser to render the Arabic text as it's shown in my clients example?

Answer 1

If there's one common problem that you should never overlook... It's human error.

Turns out what was provided by the client wasn't quite right.

At least...

Photoshop just wasn't displaying it correctly.

In the end, I made sure UTF-8 was set in the head,

<meta http-equiv="Content-Type" content="text/html" charset=utf-8"/>

and using an Arabic font prevented the need to add any direction properties.

However, for those of you who have come here for more a genuine problem. Another CSS properties to look into:

unicode-bidi : bidi-override !important;

Adding the '!important' is necessary too.

Answer 2

Actually, you have it the other way around. Photoshop rendered the arabic text incorrectly, and your browser simply fixed it for you!

Let me explain: When more than 1 arabic letter forms a sentence, depending on the letter and it's position, they automatically join with the rest of the letters in the sentence. Hence, arabic sentences usually look joined together.

Adobe Photoshop (English version) cannot render Arabic text correctly, so ALL the letters come out separated, this is incorrect and is almost unreadable to arabic speakers.

I really hope you didn't go with the photoshop rendering, it's almost unlegible to native arabic speakers.