Al-Jazeera is one of the more popular Arabic web pages, so any browser that claims Arabic support should be able to render it correctly. However, here is what happens on a Mac (click on the picture to see it full size):

Three problems each with a different reason.

1/ Jumping Content: this is the web site’s fault. They only format the site for one font and expect every browser to have a matching font of exactly the same size.

2/ Back-to-Front Brackets: This is the browser’s fault. I don’t know… every time Firefox comes up with an update they break something with Bi-Di.

3/ Lines too Close: now this is interesting. What is happening is that the web site css specifies:

line-height: 100%

Now this should not make the lines clash with each other and if I change the lien-height to “normal” everythign is OK. So why is this happening? Lets look at the w3c the specification or line-height:

‘line-height’

Value:      normal | <number> | <length> | <percentage> | inherit
Initial:      normal
Applies to:      all elements
Inherited:      yes
Percentages:      refer to the font size of the element itself
Media:      visual

If the property is set on a block-level element whose content is composed of inline-level elements, it specifies the minimal height of each generated inline box.

If the property is set on an inline-level element, it specifies the exact height of each box generated by the element. (Except for inline replaced elements, where the height of the box is given by the ‘height’ property.)

Values for this property have the following meanings:
normal

Tells user agents to set the computed value to a “reasonable” value based on the font size of the element. The value has the same meaning as <number>. We recommend a computed value for ‘normal’ between 1.0 to 1.2. …

<percentage>

The computed value of the property is this percentage multiplied by the element’s computed font size. Negative values are illegal.

Firstly, the Arabic font here is Geeza which is the standard Arabic fall-back font in Mac OS X. The line-height is based on the font size. As Geeza has lower descenders it is clashing with the lines below. So the browser is setting the line-height assuming an English font. I can think of two problems here

  • the CSS description of line-height is too vague meaning that browser makers will define what 100% means on the needs of their English-language customers.
  • The other is that CSS specifies that this should only be a minimum - but the browsers are treating this as an absolute and forcing a line height that the font will not match.

Apart from all this fonts do a very bad job of sticking to any standard convention of line-height so the fault goes all around.