dir="rtl" vs. text-align: right. What is the difference between them?

Question

The html attribute dir and the css text-align property acheive the same result. E.g. consider the two cases:

1. dir="rtl"

<p dir="rtl">
		one two.
</p>

2. text-align: right

<p style="text-align: right;">
		one two.
</p>

The only difference between these two results is the placement of dot. Why isn't <p dir="rtl"> one two. </p> translated to .owt eno? If it can't then what is the use of dir attribute at all?

Answer 1

The placement of the dot is the crucial point of the difference between dir and text-align. Handling right to left scripts is much more involved than handling the alignment of the text. To understand better, read

https://www.w3.org/International/articles/inline-bidi-markup/uba-basics

A sequence of rtl characters such as سلسلة نصية الذهاب works automatically because of the Unicode bidirectional algorithm relying on the character's directional properties, but you need more to properly handle punctuation, images, and bidirectional text.

bdi is an element, not an attribute name.

don't get bdi confused with bdo. The former applies heuristics to guess the direction of text, the latter overrides the bidirectional algorithm (and is very rarely used).

For a more complete picture about how to work with RTL (or actually bidirectional) text in html, see

https://www.w3.org/International/tutorials/bidi-xhtml/index