CODEWITHSUNDEEP
htmlinternationalization
dave mankoff
dave mankoff

Reputation: 17769

When line of text starts with a number, a number shows up on right in RTL mode. Why?

Try pasting the following html snippet into a new tab in your browser:

data:text/html,<html dir=rtl>5 little ducks went out to play.

The text outputs, right aligned, like so:

.little ducks went out to play 5

Why is the 5 being moved to the end of the line?

If I change the 5 to a non-numeric value, such as 5a, the text displays as I would expect:

.5a little ducks when out to play

I've reproduced it in both Chrome and Firefox on Ubuntu, so I am assuming that it is not a browser bug.

My locale is en-US and I have the encoding set to UTF-8.

A few more examples make this seem even stranger. If the sentence starts with a word, things also appear as expected:

.The 5 little ducks went out to play

I suppose a similar question follows as to why the period is also being moved.

Lastly, if I throw a bidi-override in the css, everything appears reversed but otherwise in the correct order:

data:text/html,<html dir=rtl><div style="unicode-bidi: bidi-override;">5 little ducks went out to play.

.yalp ot tuo tnew skcud elttil 5

Upvotes: 3

Views: 424

Answers (1)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201528

The dir attribute sets the directionality of directionally neutral text, as well as overall layout direction (e.g., the layout order of table columns). Latin letters are not directionally neutral; they have strong left-to-right directionality.

The content 5 little ducks went out to play. consists of three parts, as far as directionality is considered: the character 5, the string of Latin letters with spaces, and the character .. When right-to-left directionality is applied to this, you get these parts in order, from right to left.

When you replace 5 by 5a, the directionally neutral 5 gets governed by the left-to-right characeter a, so the string 5a is treated as belonging to the sequence of left-to-right characters.

When you have The 5 little, the neutral 5 again gets joined into the left-to-right gang, because it is between two strongly left-to-right strings.

This is all described in Unicode BiDi rules.

When you set unicode-bidi: bidi-override in CSS or, equivalently, use the <bdo> element in HTML, you override the entire Unicode BiDi algorithm. All of the inherent directionality associated with letters gets ignored. Characters are laid out strictly left to right or right to left, no matter what.

Locales and encodings have nothing to do with this.

The moral is that you should normally set directionality only for texts that are conventionally written right to left, such as Hebrew, Arabic, or Persian. If you use directionality just for casual layout purposes, take care; it may bite you. And if you have mixed left-to-right or right-to-left texts, use embedding (unicode-bidi: embed) rather than brute-force directionality override.

Upvotes: 2

Related Questions