# Using the `dir` attribute on an inline element to resolve problems with nested directional runs

ID: H56

Technology: html

Type: Technique

## When to Use

HTML

## Description

The objective of this technique is to identify changes in the text direction of text that includes nested directional runs by providing the `dir` attribute on inline elements. A nested directional run is a run of text that includes mixed directional text, for example, a paragraph in English containing a quoted Hebrew sentence which in turn includes an English phrase. Use of the `dir` attribute on an enclosing `span` or other inline element may be necessary because the Unicode bidirectional algorithm can produce undesirable results when mixed directional text contains spaces or punctuation. The concepts used in this technique are described in What you need to know about the bidi algorithm and inline markup.

## Examples

### Defining the text direction of a nested, mixed-direction phrase, in Hebrew and English, to be right-to-left

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 (i.e., after) the Hebrew text, like this:

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

Visually-ordered ASCII version (RTL text in uppercase, LTR in lower):

the title is "w3c ,YTIVITCA NOITAZILANOITANRETNI" in Hebrew.

The Unicode bidirection algorithm alone is insufficient to achieve the right result, and leaves the text "W3C" on the right side of the quote:

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

Visually-ordered ASCII version:

the title is "YTIVITCA NOITAZILANOITANRETNI, w3c" in hebrew.

The following markup will produce the expected result:

    <p>The title says "<span lang="he" dir="rtl">פעילות הבינאום, W3C</span>" in Hebrew.</p>

## Tests

### Procedure

1. Examine the text direction of text in the document
2. If the text direction is right-to-left, check that for the ancestor element that has a `dir` attribute, the attribute has the value `"rtl"`
3. If the text direction is left-to-right, check that there is no ancestor element with a `dir` attribute, or that for the ancestor element that has a `dir` attribute, the attribute has the value `"ltr"`

### Expected Results

- Checks #2 and #3 are true for all text.

## Related Techniques

- H34

## Resources

- HTML - the `dir` attribute.
- HTML - bidirectional text.
- Creating HTML Pages in Arabic, Hebrew and Other Right-to-left Scripts (tutorial).