CODEWITHSUNDEEP
htmlcss
gdoron
gdoron

Reputation: 150243

Differences between direction and text-align in css

What are the differences between:

(Related to this question)

Upvotes: 11

Views: 8600

Answers (7)

Neigyl R. Noval
Neigyl R. Noval

Reputation: 6038

direction orders your element from right to left.

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

outputs: B A

text-align displays your element in the right.

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

outputs test on the rightmost edge of the specified width.

Upvotes: 18

thisisnabi
thisisnabi

Reputation: 1200

direction : to control content by languages written from right to left or visa versa.

text-align : Is about content inside a block element.

Upvotes: 0

Amirhossein Jodeyri
Amirhossein Jodeyri

Reputation: 1

Differences between direction and text-align in css Source : next1code

Upvotes: -1

sudharshan reddy
sudharshan reddy

Reputation: 37

Refer this fiddle to know 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>

Upvotes: -1

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201508

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).

Upvotes: 4

Jan Hančič
Jan Hančič

Reputation: 53930

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

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

I've made an example here for you to see: http://jsfiddle.net/9HP4Q/

Upvotes: 3

Grexis
Grexis

Reputation: 1512

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

Text align indicates where the text is placed inside an element (aligned with the right edge for example)

Upvotes: 0

Related Questions