CSS vs. markup for bidi support

Intended audience: HTML coders (using editors or scripting), script developers (PHP, JSP, etc.), CSS coders, schema developers (DTDs, XML Schema, RelaxNG, etc.), and anyone who implements HTML using right-to-left scripts.

Question

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

Quick answer

You should always use dedicated bidi markup to describe your content, where markup is available.

For HTML, the bidi markup is sufficient and no CSS bidi styling is needed. You should never apply CSS bidi styling to ordinary elements or attributes. This includes content delivered as XML using XHTML 1.x or polyglot markup.

For other content delivered as XML, you should also use dedicated bidi markup if available, but you may need to use CSS styling to indicate the expected behavior of that markup.

Details

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. The markup may also find its way into places where the CSS is not available, eg. via shared databases, or quoted fragments.

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 or maintaining 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 CSS Writing Modes specification recommends the use of markup for bidi text in HTML.

"If a document language provides markup features to control bidi, authors and users should use those features instead and not specify CSS rules to override them."

In fact it specifically states that authors should not use the direction or unicode-bidi properties with HTML. This is because the HTML specification clearly defines the expected behaviour of browsers with respect to the bidi markup.

XHTML 1.x or polyglot markup served as application/xhtml+xml

XHTML 1.x and polyglot pages served as application/xhtml+xml are expected to use the same semantics as HTML. Therefore, it also makes sense to use markup only and no CSS for this.

General XML markup and XHTML served as application/xml or text/xml

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.

See section 10.3.5 Bidirectional text in the HTML5 specification for the styling that is used for HTML markup. This markup provides a good model for defining markup in XML applications. Note, in particular, that the CSS applies the isolate value of unicode-bidi (and isolate-override for bdo). This is strongly recommended, rather than simple embedding, for all elements carrying a dir (or equivalent) attribute. (See Inline markup and bidirectional text in HTML for the reasons.)

Bidi styling could 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.

Additional information

There are situations in 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 Using Unicode controls for bidi text for more details.)