alt text appears backwards

Question

I am using a right-to-left language with dir='rtl' on the body element.

So the whole page flows as it should from right to left.

For some reason alt text within images are displayed backwards.

Here's a jsFiddle.

Any simple solution?

Answer 1

This is a bug in Chromium, reported in 2010 as RTL: Hebrew alt text rendered left-to-right when images disabled, with apparently no progress.

By the specifications, text entirely in Hebrew letters is to be displayed right to left independently of dir attribute settings. In some browsers, dir=rtl helps, but not here. For some reason, alt text rendering in Chrome does not apply directionality information the same ways as normal text rendering does – after all, it probably uses separate routines internally. Using control characters for directionality inside the attribute value does not help.

Answer 2

Everything looks OK for me in Firefox and IE. The problem with the alt text seems to only exist in Google Chrome. I suspect it's some kind of bug in Chrome (or WebKit, as Safari also exhibits the problem).

You could try setting character encoding on the document, which should fix the problem, apparently:

Correct page encoding

The Symptom:

Your page looks garbled in Google Chrome. Garbage characters may be displayed, and RTL language pages (e.g. Hebrew or Arabic) may appear with their letters reversed.

The problem:

If character encoding is not specified precisely, different browsers can interpret the encoding in different ways or not at all. The impact on users is dire since it prevents them from viewing the site.

Recommendations:

Declare your page's content-type correctly, this can either be in an HTTP header or a Meta tag specified in your HTML. The character set your page uses must be a legal value from the Official IANA List, please only use the encodings that have the text (preferred MIME name) listed next to them e.g. ISO-8859-1, Shift_JIS. If you specify two different values for the character encoding in the HTTP Header and the Meta tag, Google Chrome will use the value in the HTTP Header. Conflicting declarations of character encoding in the HTTP Header and Meta tag is asking for trouble. More information on this subject can be found here. We recommend using UTF-8 for all Web content. If you have to use legacy encoding for some reason, make sure to identify the encoding correctly as outlined above. For legacy situations involving Hebrew sites use Logical Hebrew encoding (ISO-8859-8-I). We strongly discourage the use of Visual Hebrew encoding (ISO-8859-8). It has no place on the Web anymore and is a remnant of old systems lacking logic for rendering RTL text. It causes many bugs and lots of confusion.

The above was taken from > http://www.chromium.org/Home/chromecompatfaq