FAQ: CSS vs. markup for bidi support

Question

Should I use CSS or markup to correctly format Unicode-based bidirectional (bidi) text in HTML and XML-based markup languages?

Text in written in Arabic or Hebrew scripts flows predominantly from right to left (RTL), whereas text in other scripts flows left to right (LTR). Much of the time the Unicode bidi algorithm takes care of the directionality of text, based on the properties of the characters used. However, there needs to be some way of indicating:

that the overall orientation of content and layout (such as table cell direction) should be RTL (LTR is the default) because the document is mainly written in a script such as Arabic or Hebrew
that part of a LTR document should be treated as RTL, and vice versa
what is the expected flow of text when the Unicode bidirectional algorithm is insufficient to correctly order adjacent runs of mixed direction text
that the inherent directionality provided by the Unicode bidi algorithm should be overridden.

Example:

To clarify the third point above, this sample sentence provides an example of what you may get if you rely solely on the bidirectional algorithm. This is incorrect. Because the whole quote is in Hebrew, and therefore runs right to left, the text "W3C" and the comma should appear to the left of (ie. after) the Hebrew text.

The title says "פעילות הבינאום, W3C" in Hebrew.

The correct result when displayed would look like this:

The title says "פעילות הבינאום, W3C" in Hebrew.

If you are not sure whether your browser or user agent is correctly displaying the Hebrew text in the example, click on the small image buttons to see a bitmap version.

XHTML/HTML provides markup to fulfill these purposes. These include the following:

Markup	Effect
`dir` attribute	Sets the directionality for the element to which it is attached and below. Possible values include `rtl` and `ltr`.
`bdo` element	Overrides the directionality of text as defined by the Unicode bidi algorithm.

CSS also provides support for text direction as follows:

Property	Values	Effect
`unicode-bidi`	`embed`	The text to which this is applied will assume the directional flow indicated by the `direction` property.
`unicode-bidi`	`bidi-override`	The text to which this is applied will override the Unicode bidi algorithm according to the directional flow indicated by the `direction` property.
`direction`	`ltr`	Sets a base direction of LTR for the text to which the `unicode-bidi` property is applied.
`direction`	`rtl`	Sets a base direction of RTL for the text to which the `unicode-bidi` property is applied.

The question is about whether you should use the markup or the CSS for indicating directionality in XML-based markup languages and HTML.

Answer

You should always use dedicated bidi markup to describe your content, where available. CSS may or may not be needed to describe the meaning of that markup. This depends on whether you are dealing with content that is handled by the user-agent as HTML or XML. (Note that XHTML may be served as either!)

Always bear in mind that neither markup nor CSS should be used for bidirectional text unless they are needed. Our question relates to situations where the Unicode bidi algorithm is not sufficient on its own, or &lrm; and &rlm; cannot be used to resolve directionality.

Use dedicated markup

Because directionality is an integral part of the document structure, markup should be used to set the directionality for a document or chunk of information, or to identify places in the text where the Unicode bidirectional algorithm alone is insufficient to achieve desired directionality.

To produce the desired right-to-left or bidirectional effect, some people simply apply CSS to whatever general paragraph or inline elements surround the relevant text. However, styling applied by CSS is not permanent. It may be turned off, be overridden, go unrecognised, or be changed/replaced in different contexts. Although bidi markup is only needed for the visual rendering of a text it is not purely decorative in function. Markup remains integrated with the document content in a persistent fashion. It also lends significant clarity to the content if you use dedicated bidi markup.

You should therefore use dedicated bidi markup whenever it is available. Do not simply attach CSS styling to a general element to achieve the effect.

Note that this presupposes that documents written in markup languages always have recourse to markup specifically dedicated to the support of mixed direction text. People designing a DTD or Schema should be encouraged to add elements or attributes for that purpose.

HTML or XHTML served as `text/html`

Use markup only. The CSS2 recommendation recommends the use of markup for bidi text in HTML. In fact it goes as far as to say that conforming HTML user agents may ignore CSS bidi properties. This is because the HTML specification clearly defines the expected behaviour of user agents with respect to the bidi markup.

XHTML served as XML, and general XML-based markup languages

XHTML served as application/xhtml+xml, application/xml or text/xml is treated by user agents as XML, not HTML.

Normally a user agent will not automatically recognize or know what to do with any bidi markup you use in XML documents. CSS properties should therefore be used to indicate the expected visual behaviour of text in your document.

The CSS, however, should always be linked to dedicated bidi markup in the text.

The following shows the CSS that would be appropriate for the set of markup available in XHTML:

*[dir="ltr"] { direction: ltr; unicode-bidi: embed }

*[dir="rtl"] { direction: rtl; unicode-bidi: embed }

bdo[dir="ltr"] { direction: ltr; unicode-bidi: bidi-override }

bdo[dir="rtl"] { direction: rtl; unicode-bidi: bidi-override }

By the way

There are situations in XHTML/HTML and possibly other XML-based markup languages where text appears in an attribute or an element that only supports character data. Neither markup nor CSS can be used to modify directionality of either attribute text or part of the text in an element that supports only character data. In these cases you will need to resort to the use of Unicode directional formatting codes. (See the FAQ (X)HTML & bidi formatting codes vs. markup for more details.)

For XML-based markup languages, bidi styling should be defined in a separate style sheet, and that style sheet included in your other style sheets or in your document. This simplifies the development of style sheets and reinforces the difference between bidi and other styling. Think about the bidi style sheet as a part of the schema information that defines the meaning of specific bidi markup, rather than as the decorative styling that can exist in various variants.

Related links