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