FAQ: Bidi space loss

Spaces between Latin and Arabic/Hebrew text may appear to collapse if text is followed by white space inside an inline element that includes a dir attribute.

Note that this effect also occurs when right-to-left text is embedded in a left-to-right passage.

If the previous section describes the look of your code, the solution is to remove all space before the end tag of the inline element, or remove the dir attribute (if appropriate).

Note also that in this example the dir="ltr" attribute in the <span> element around the text (W3C) is not actually needed to produce the correct ordering. Leaving out the attribute or the whole span element will also solve the problem.

The following boxes show code samples followed by an implementation of that code on this page, so that you can test the behavior of your current user agent.

Only read this section if you want the gory details about why this happens.

The expected behavior when the text is displayed is not described in detail in the XHTML/HTML specifications, but is described in recent CSS specifications. Although the examples on this page do not use CSS, the same principles apply. The following is taken from the CSS 2.1 Working Draft:

4. If 'white-space' is set to 'normal', 'nowrap', or 'pre-line',
   1. every tab (U+0009) is converted to a space (U+0020)
   2. any space (U+0020) following another space (U+0020) — even a space before the inline, if that space also has 'white-space' set to 'normal', 'nowrap' or 'pre-line' — is removed.

Given a scenario as follows (where the colors represent spaces, U+0020, for easy identification):

<ltr>A <rtl> B </rtl> C</ltr>

the spec says that the space after A is kept, the space before B is removed, the space after B is kept, the space before C is removed. This is then rendered according to the Unicode bidirectional algorithm, and the end result is:

A  BC

Note that there are two spaces between A and B! The embedding levels can be expressed as follows:

11221

• Many thanks to Najib Tounsi for the examples, and Ian Hickson and Michel Suignard for clarification.

• White space treatment is clarified in the latest CSS 2.1 Working Draft (see especially point 4.2 in the first bulleted list)

• CSS3 Text Candidate Recommendation also contains clarification of this CSS 2.1 draft (see especially point 4.2 in the first bulleted list) (see especially point 4.2 in the first bulleted list)

• How the Unicode Bidirectional Algorithm interacts with inline markup.