CSS direction Property

February 10, 2021 12:37 pm IST

You are Here:

CSS direction Property

CSS direction property sets the direction of text, table columns, and horizontal overflow.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> p:nth-child(3){ direction: rtl; } </style> </head> <body> <h1>CSS direction Property</h1> <p>This is a paragraph goes from left to right (ltr). This is default.</p> <p>This is a paragraph goes from right to left.</p> </body> </html>

Run

Syntax

Using CSS

element{ direction: rtl; }

Using Javascript

object.style.direction="rtl";

Animatable

No, direction property is not animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS direction property is ltr.

Property Value

The following table provides a list of values for CSS direction property.

Value	Explanation
ltr	Text direction goes from left-to-right.
rtl	text direction goes from right-to-left.

Using JavaScript

In the following example, we will demonstrate how to change the CSS direction property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <body> <h1>CSS direction Property</h1> <p>This is a paragraph.</p> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("p")[0]; function myFunction(){ x.style.direction = "rtl"; } </script> </body> </html>

Run