{

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

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 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 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 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, CSS direction has to be applied on the entire HTML element, Html tag has 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 has 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 to right to left and vice versa.

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.