CSS direction property example CSS| dir ltr rtl in html


The text/content displayed in the webpage can be controlled with html and CSS.

  • dir attribute in HTML
  • direction attribute in CSS

dir attribute in html

This 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>

This has a support in all major browsers.

direction attribute in CSS

direction property in CSS used to change the direction of an text element displayed in a page. It has two values rtl and ltl, ltr is default value. rtl is a language read from right to left, ltr is from left to right.

This can also be used to define the page content direction, block text or table columns direction

This will be used to display the page content on web applications in left to right direction for English language based websites and right to left from Arabic based sites.

This article talks about 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 value from 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 has text direction from right to left on web page.

That means, css direction has to be applied on entire html element, Html tag has dir attribute to specify 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 can be controlled 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 90,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts