/

HTML / CSS / JavaScript Tutorial

CSS Property: direction

[this page | pdf | back links]

The CSS (CSS2) direction property specifies the text or writing direction. It can be used with the unicode-bidi property to set or indicate whether text should be overridden to support multiple languages (that are formatted in different directions) in the same document.

 

Valid property values (other than inherit and initial) are:

 

Value

Description

ltr

(default value). Text direction is left-to-right

rtl

Text direction is right-to-left

zoom-in

Indicates something can be zoomed in

zoom-out

Indicates something can be zoomed out

 

Default Value:

ltr

JavaScript syntax:

e.g. object.style.direction="rtl"

Inherited:

Yes

Animatable:

No

 

EXAMPLE:


HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
div {width: 200px; border: thin solid green;}
div.x1 {direction: rtl; unicode-bidi: bidi-override;}
</style>
</head>
<body>
Element with default property
<div>Text1</div><br>
Property set using HTML
<div class="x1">Text2</div><br>
Property set using JavaScript
<div id="x2">Text3</div>

<script>
document.getElementById("x2").style.direction = "rtl";
document.getElementById("x2").style.unicodeBidi = "bidi-override";
</script>

</body>
</html>

FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedCSSPropertyDirection() {
  var x = document.createElement("DIV"); x.style.direction = "rtl"; return (window.getComputedStyle(x, null).direction == "rtl");
}


NAVIGATION LINKS
Contents | Prev | Next | CSS Properties


Desktop view | Switch to Mobile