CSS Properties: How unicode-bidi property is used

Last update on March 01 2024 13:09:48 (UTC/GMT +8 hours)

Solution:

HTML Code :

<!DOCTYPE html><!-- Declares the document type and version of HTML -->
<html><!-- Begins the HTML document -->
<head><!-- Contains metadata and links to external resources -->
<title>How unicode-bidi property is used</title><!-- Sets the title of the document -->
<style type="text/css"> /* Starts CSS styling */
div.ex1 {
    direction: rtl; /* Sets the text direction to right-to-left for the div with the class "ex1" */
    unicode-bidi: bidi-override; /* Overrides the default bidirectional algorithm for the div with the class "ex1" */
}
</style><!-- Ends CSS styling -->
</head><!-- Ends the head section -->
<body><!-- Begins the body of the document -->
<h1><strong>w3resource Tutorial</strong></h1><!-- Displays a level 1 heading with bold text "w3resource Tutorial" -->
<div>Default Text: Web Development Tutorial.</div><!-- Displays a div with default left-to-right text direction -->
<div class="ex1">Right-to-left direction: Web Development Tutorial</div><!-- Displays a div with right-to-left text direction -->
</body><!-- Ends the body section -->
</html><!-- Ends the HTML document -->

Explanation:

This HTML document demonstrates the use of the unicode-bidi property to control the directionality of text.
The CSS rule div.ex1 targets div elements with the class "ex1".
direction: rtl; sets the text direction to right-to-left for the div with the class "ex1".
unicode-bidi: bidi-override; overrides the default bidirectional algorithm for the div with the class "ex1", allowing manual control over the directionality of text within that div.
The document contains two div elements, one with default left-to-right text direction and another with right-to-left text direction specified by the CSS rules.

Live Demo:

See the Pen unicode-bidi-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page