Differences between direction and text-align in css

Question

What are the differences between:

• direction : rtl

• text-align: right

(Related to this question)

Answer 1

Direction orders your element from right to left.

Example:

<div style="direction: rtl">
  <div style="display: inline-block">A</div>
  <div style="display: inline-block">B</div>
</div>

outputs: B A

Text-align display your element in the right.

Example:

<div style="text-align: right; width: 979px">
  test
</div>

outputs test on the rightmost edge of the specified width.

Answer 2

It’s easier to say what they have in common: the settings direction: ltr and direction: rtl imply the defaults text-align: left and text-align: right, respectively.

The other, more fundamental effects of the direction property are:

• Text direction for directionally neutral text (as defined by Unicode directionality concepts; e.g. letters have inherent neutrality that is not affected by direction property, unless overridden using the unicode-bidi property).
• Layout direction of blocks that appear side by side.
• Layout direction of columns in a table.
• Direction of horizontal overflow.
• Alignment direction for the last line of text when text-align: justify is in affect.
• Placement of list markers (list bullets or list item numbers) with respect to list items.

For example, if you wish to play with direction: rtl on an UL element to put list bullets on the right, for normal English you should set direction: ltr on the LI elements, to avoid messing up the text direction (when the text contains e.g. punctuation marks).