Css 简明教程
CSS - Unicode-bidi Property
CSS unicode-bidi 属性用于控制在文档中显示双向文本的方式。双向文本包含从左到右 (LTR) 和从右到左 (RTL) 的文本。
CSS unicode-bidi property is used to control how bidirectional text is displayed in a document. Bidirectional text contains both left-to-right (LTR) and right-to-left (RTL) text.
unicode-bidi 属性允许开发者覆盖浏览器的默认行为并确保双向文本正常显示。
The unicode-bidi property allows developers to override the default behavior of the browser and ensure that bidirectional text is displayed correctly.
Possible Values
-
normal − This is the default value, and it specifies that the text should be displayed according to the inherent direction of the text itself. In other words, it will use the direction of the characters in the text to determine how it should be displayed.
-
embed − This value is used to explicitly set the direction of the text within an element. When you set unicode-bidi to embed, you can also use the direction property to specify whether the text should be displayed left-to-right (ltr) or right-to-left (rtl).
-
bidi-override − This value creates an override for inline elements. In case of block elements, it overrides the browser’s bi-directional text algorithm and flows the text inside any inline children strictly according to the direction property.
-
isolate − This value isolates the element from its siblings.
-
isolate-override − This value uses the isolation behavior of the isolate keyword to the surrounding content and the override behavior of the bidi-override keyword to the inner content.
-
plaintext − Prevents bidirectional text (BIDI) algorithms from affecting the text inside the element.
Applies to
所有定位元素，但某些值对非内联元素无效。
All positioned elements, but some of the values have no effect on non-inline elements.
DOM Syntax
object.style.unicodeBidi = "normal|embed|bidi-override|isolate|isolate-override|plaintext";CSS unicode-bidi - normal Value
以下示例演示如何使用 unicode-bidi: normal ，文本按从右到左方向（RTL）的默认顺序显示−
The following example demonstrates using unicode-bidi: normal, the text in its default order from right-to-left direction (RTL) −
<html>
<head>
<style>
.box {
direction: rtl;
unicode-bidi: normal;
color:red;
}
</style>
</head>
<body>
<h2>CSS unicode-bidi - normal Value</h2>
<p>The following text is displayed in its default order from right-to-left direction.</p>
<div class="box">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</body>
</html>CSS unicode-bidi - embed Value
以下示例演示如何使用 unicode-bidi: embed ，此值嵌入其周围内容中文本的方向，而当 direction 设置为 rtl 时，文本将以从右到左（RTL）方向显示−
The following example demonstrates using unicode-bidi: embed. This value embeds the direction of the text within its surrounding content, and when the direction is set to rtl, the text is displayed in a right-to-left (RTL) direction −
<html>
<head>
<style>
.box {
direction: rtl;
unicode-bidi: embed;
color:red;
}
</style>
</head>
<body>
<h2>CSS unicode-bidi - embed Value</h2>
<p>The following text is displayed in its default order from right-to-left direction.</p>
<div class="box">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</body>
</html>CSS unicode-bidi - bidi-override Value
以下示例演示如何使用 unicode-bidi: bidi-override ，此值以相反的顺序显示文本，最右边的字符显示在第一个位置。−
The following example demonstrates using unicode-bidi: bidi-override. This value displays the text in reverse order, with the right most character displayed in the first position.−
<html>
<head>
<style>
.box {
direction: rtl;
unicode-bidi: bidi-override;
color:red;
}
</style>
</head>
<body>
<h2>CSS unicode-bidi - bidi-override Value</h2>
<p>The following text is displayed in reverse order of the characters in right-to-left direction.</p>
<div class="box">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</body>
</html>CSS unicode-bidi - isolate Value
以下示例演示如何使用 unicode-bidi: isolate ，此值用于将双向文本与其周围文本隔离开。−
The following example demonstrates using unicode-bidi: isolate. This value is used to isolate a bidirectional text from its surrounding text. −
<html>
<head>
<style>
.box {
direction: rtl;
unicode-bidi: isolate;
color:red;
}
</style>
</head>
<body>
<h2>CSS unicode-bidi - isolate Value</h2>
<p>The following text is displayed in its default order from right to left.</p>
<div class="box">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</body>
</html>CSS unicode-bidi - isolate-override Value
以下示例演示如何使用 unicode-bidi: isolate-override ，此值用于将双向文本与其周围文本隔离开并覆盖−
The following example demonstrates using unicode-bidi: isolate-override. This value is used to isolate and override the bidirectional text from its surrounding text −
<html>
<head>
<style>
.box {
direction: rtl;
unicode-bidi: isolate-override;
color:red;
}
</style>
</head>
<body>
<h2>CSS unicode-bidi - isolate-override Value</h2>
<p>The following text is displayed in reverse order of the characters in right-to-left direction.</p>
<div class="box">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</body>
</html>CSS unicode-bidi - plaintext Value
以下示例演示如何使用 unicode-bidi: plaintext ，此值将文本视为纯文本，不应用任何双向文本算法。
The following example demonstrates using unicode-bidi: plaintext. This value treats the text as plain text without applying any bidirectional text algorithms. −
<html>
<head>
<style>
.box {
direction: rtl;
unicode-bidi: plaintext;
color:red;
}
</style>
</head>
<body>
<h2>CSS unicode-bidi - plaintext Value</h2>
<p>The following text is displayed in its default order from left-to-right direction.</p>
<div class="box">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</body>
</html>