CSS - direction ltr in a rtl element

css

Solution

The problem appears to be that in right-to-left context, `<code>some:code;</code>` is displayed as `;some:code` (i.e., the semicolon appears on the left, not right) even though`direction` is set to `ltr` on the `code` element.

Three alternatives, in order of preference:

1) Use the `dir` attribute in HTML for the `code` elements (and other elements containing left-to-right text in a right-to-left environment):

<code dir=ltr>some:code;</code>

This makes the CSS rule for `code` redundant.

2) Using CSS code as in the question (though the `!important` specifier is not needed there), add the CSS rule

code { unicode-bidi: embed }

3) Use the U+202A LEFT-TO-RIGHT EMBEDDING at the start and U+202C POP DIRECTIONAL FORMATTINGC at the end of the `code` element content, e.g.

<code dir=ltr>&#202a;some:code;&#202c;</code>

The problem is caused by Unicode bidirectionality rules. Considering the example `<code>some:code;</code>` (literally), setting `direction: ltr` is not sufficient. In a right-to-left overall context, the “;” character, being directionally neutral, follows the directionality of enclosing content, so it is placed on the left. In a sense, being at a junction point between LTR and RTL texts, it is torn to different directions, by its own element and by the parent element, and Unicode rules say that the parent wins.

Solution 1 fixes this, since there is a difference between the HTML `dir` attribute and the CSS `direction` property, as illustrated in HTML5 CR, clause 10.3.5 Bidirectional text. The attribute causes “bidirectional embedding”, which means that the element content is rendered at a new level of nesting in directionality.

Solution 2 does the same in CSS, using the `unicode-bidi` property. Note that HTML5 CR emphatically says: “Authors are strongly encouraged to use the dir attribute to indicate text direction rather than using CSS, since that way their documents will continue to render correctly even in the absence of CSS”.

Solution 3 is yet another way to do the same thing, at the character level. You could also LEFT-TO-RIGHT MARK characters (at the start and at the end), in most cases, but the characters used here are what CSS 2.1 suggests as counterparts to `unicode-bidi: embed`. HTML 4.01 mentions the directionality control characters but adds: “The markup method offers a better guarantee of document structural integrity and alleviates some problems when editing bidirectional HTML text with a simple text editor, but some software may be more apt at using the [UNICODE] characters. If both methods are used, great care should be exercised to insure proper nesting of markup and directional embedding or override, otherwise, rendering results are undefined.”

Problem

Original source