Geek Answers Handbook

Differences between direction and text alignment in css

What's the difference between:

  • direction: rtl

  • text-align: right

(related to this issue)

+8
html css
source share
5 answers

Direction orders your item 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: BA

Text-align displays your element on the right.

Example:

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

prints test to the extreme edge of the specified width.

+14
source share

It’s easier to say what they have in common: the direction of the settings: ltr and direction: rtl implies the default alignment by default: left and text-align: right, respectively.

Other more fundamental effects of directional properties are:

  • The direction of the text for text with neutral text (as defined by the concepts of Unicode directivity, for example, letters have an inherent neutrality that is not affected by the direction property, unless it is redefined using the unicode-bidi property).
  • The direction of the location of the blocks that appear side by side.
  • The direction of the columns in the table.
  • The direction of horizontal overflow.
  • Alignment direction for the last line of text when aligning text: alignment affects.
  • Placement of list markers (list of markers or list item numbers) in relation to list items.

For example, if you want to play with the direction: rtl on the UL element to place the bullets in the list on the right, for normal English you should set the direction: ltr on LI elements to avoid spoiling the direction of the text (when the text contains, for example, punctuation marks).

+4
source share

text-align: right tells the browser to align the text on the right side of the container.

direction: rtl tells the browser how the text is displayed, either left to right or right to left. Some countries write from right to left (unlike left to right, as you probably are used to).

I gave an example here for you: http://jsfiddle.net/9HP4Q/

+3
source share

The direction indicates the direction in which the text is supposed to be read (for example, Arabic text is read from right to left)

Text alignment indicates where the text is placed inside the element (for example, right-aligned)

0
source share

Refer to this script to learn more about this.

  <div style="direction: rtl;width:200px;"> <div style="display: inline-block">A</div> <div style="display: inline-block">B</div> </div> <div style="text-align: right;width:200px;"> <div style="display: inline-block">A</div> <div style="display: inline-block">B</div> </div>
0
source share

More articles:


All Articles