/

HTML / CSS / JavaScript Tutorial

CSS Property: unicode-bidi

[this page | pdf | back links]

The CSS (CSS2) unicode-bidi property indicates whether text direction should be overridden to support multiple languages in the same document. It is used in conjunction with the direction property.

 

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

 

Value

Description

bidi-override

Creates an additional level of embedding and reorders depending on direction property

embed

Creates an additional level of embedding

normal

(default value). No additional level of embedding

 

Default Value:

normal

JavaScript syntax:

e.g. object.style.unicodeBidi="bidi-override"

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 isSupportedCSSPropertyUnicodeBidi() {
  var x = document.createElement("DIV"); x.style.unicodeBidi = "bidi-override"; return (window.getComputedStyle(x, null).unicodeBidi == "bidi-override");
}


NAVIGATION LINKS
Contents | Prev | Next | CSS Properties


Desktop view | Switch to Mobile