The HTML tag stands for Bi-Directional Isolation tag. That means it will isolate a part of the text that might be formatted in a different direction from the rest of the text. The tas is new in HTML 5. It is helpful for languages such as Arabic or Hebrew when embedding user-generated content with an unknown text direction.
The Bi-Directional text can contain both the sequences of characters arranged from right-to-left (RTL) and another sequence of characters that are arranged left-to-right (LTR). For instance, the Latin characters are treated as LTR while the Arabic characters are treated as RTL.
Note : The tag does not physically turn the text , it only tells the browser that it should read the text in the opposite direction.
The browsers implement the Unicode Bidirectional Algorithm to handle this. Usually, the element will work properly and there won’t be a need to provide a special markup.
The tag is similar to . The main difference between these two elements is that the tag separates and changes the direction of the text , while the tag only reverses the direction.
Estimated reading time: 4 minutes
Syntax:
The tag contains both an opening tag and closing tag. The content is written between these two tags.
<bdi dir="rtl"> text </bdi>
Sample of the HTML Tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1> Sample of Bidirectional tag</h1>
<p dir="ltr"><bdi>مرحبا بعودتك</bdi><br>This sentence in Arabic is automatically displayed from right to left.</p>
</body>
</html>
Result:
Attributes:
The tag supports the global attributes and the event attributes.
Styling Methods for Tag:
You can use the following CSS properties to style an HTML bidirectional isolation tag.
Properties to style the visual weight/emphasis/size of the text in tag:
- CSS font-style – This CSS property helps to set the font style of the text such as normal, italic, oblique, initial, inherit.
- CSS font-family – This CSS property specifies a prioritized list of one or more font family names or generic family names for the selected element.
- CSS font-size – This CSS property will help to set the size of the font.
- CSS font-weight – This CSS property used to define whether the font should be bold or thick.
- CSS text-transform – This CSS property will control the text case and capitalization.
- CSS test-decoration – This CSS property specifies the decoration added to text such as text-decoration-line , text-decoration-color , text-decoration- style.
Styles to coloring the text in Tag:
- CSS color – This CSS property will specify the color of the text content and decorations.
- CSS background-color – This CSS property helps to set the background color of an element.
Text layout styles for Tag:
- CSS text-indent – This CSS property is used to specify the indentation of the first line in a text block.
- *CSS text-overflow * – This CSS property helps to describe how overflowed content that is not displayed should be signaled to the user.
- CSS white-space – This CSS property describes how white-space inside an element is handled.
- CSS word-break – This CSS property decides where the lines should be broken.
Other Properties for Tag:
- CSS text-shadow – This CSS property helps to add the shadow to text.
- CSS text-align-last – This CSS property will set the alignment of the last line of the text.
- CSS line-height – This CSS property defines the height of a line.
- CSS letter-spacing – This CSS property helps to decide the spaces between letters/characters in a text.
- CSS word-spacing – This CSS property specifies the spacing between every word.
Browser Support:
Related Articles:
- HTML
- HTML Abbreviation Tag
- Basic HTML Definitions and Usages in the Real World
- HTML Address Tag
- HTML Acronym Tag
The post HTML Bi-Directional Isolation Tag appeared first on Share Point Anchor.
Top comments (0)