CSS direction property example| dir ltr rtl in html

CSS direction property example| dir ltr rtl in html

HTML and CSS contain code to display text and content on a webpage.

  • dir attribute in HTML
  • direction attribute in CSS

dir attribute in HTML

It will be useful when CSS is not supported in some browsers. It is a global attribute applied to any HTML tag.

<div dir="rtl">text content from right to left</div>

It has support in all major browsers.

direction attribute in CSS

direction property in CSS uses to change the direction of a text element displayed on a page. It has two values RTL and LTL, ltr is the default value. RTL is a language read from right to left, ltr is from left to right.

It uses to define the page content direction, block text, or table columns direction.

It displays the page content on web applications in the left to the right direction for the English language-based websites and right to left from Arabic-based sites.

This article talks about the following things.

syntax:

css_selector{
direction:rtl/ltr/initial/inherit;
}

direction attribute values are:

  • ltr - default, left to right
  • RTL - right to left
  • initial - initial default value
  • inherit the value from the parent

CSS direction property rtl ltr with examples

if CSS property is declared with ltr all the elements displayed and shown to the user from left to right

Here is an example with and without direction property

<!doctype html>
<html>
  <head>
    <style>
      .leftToRight {
        direction: ltr;
      }

      .rightToLeft {
        direction: rtl;
      }
    </style>
  </head>

  <body>
    <h3>CSS Direction Example</h3>
    <hr />
    <p class="leftToRight">This is text placed from left to right</p>
    <p>Default to the left to right without direction property</p>

    <p class="rightToLeft">This is text placed from right to left</p>
  </body>
</html>

And the output

CSS direction ltr rtl example

Arabic website direction with CSS direction property

Arabic websites have text directions from right to left on the web page.

That means, the CSS direction has to be applied to the entire HTML element, Html tag has a dir attribute to specify the entire document text direction from right to left.

with html,

<html dir="rtl">
  <head> </head>
  <body>
    <p>this will be Arabic text</p>
  </body>
</html>

with CSS direction property,

body {
  direction: rtl;
}

Browser support

This direction in CSS and dir attribute in HTML have support in all popular browsers.

  • Chrome
  • Mozilla
  • Internal Explorer
  • Opera
  • Safari

Conclusion

text direction does control with CSS direction property and dir attribute in HTML.

These are very useful from right to left and vice versa.