CSS direction Property
The direction CSS property defines in which direction the text should be. See some example and try it for yourself.
The direction property defines the text direction.
The direction property sets the base text direction of block-level elements and the direction of embeddings which are created by the unicode-bidi property. It also sets the text's default alignment of block-level elements and the direction that cells flow within a table row.
The text direction is usually specified inside a document, like the dir attribute of HTML, instead of the direct use of the direction property. In contrast to the HTML dir attribute, the CSS direction property is not inherited into table cells from table columns, because table cells are inside rows, not columns. Instead, cells inherit the direction from the table element itself.
The direction property has no effect on inline-level elements.
| Initial Value | ltr |
|---|---|
| Applies to | All elements. |
| Inherited | Yes. |
| Animatable | Discrete. |
| Version | CSS2 |
| DOM Syntax | object.style.direction = "rtl"; |
Syntax
Syntax of CSS direction Property
direction: ltr | rtl | initial | inherit;Example of the direction property:
Example of CSS direction Property with rtl (right to left) value
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
direction: rtl;
}
</style>
</head>
<body>
<p>As you can see, this text is written with default direction.</p>
<div>However, this text is written from right to left as we defined.</div>
</body>
</html>Result
In the given example the "rtl" value is used. The text goes from right to left.
Values
| Value | Description | Play it |
|---|---|---|
| ltr | Means that the direction of text will be from left to right. This is the default value of the property. | Play it » |
| rtl | Means that the direction of text will be from right to left. | Play it » |
| initial | Sets the property to its default value. | Play it » |
| inherit | Inherits the property from its parent element. |
Practice
What does the CSS 'direction' property does?