In HTML, the term bdo stands for Bi-Directional Override. The tag specifies the direction that the text is displayed. This tag overrides the current directionality of the text. It is the new sectioning element for HTML 5.
Mostly, the tag is used in RTL words such as Arabic or Hebrew. This element contains the “dir“ attribute to specify the direction of the text. You can use the <bdi> tag for isolating the bidirectional text.
Estimated reading time: 3 minutes
Syntax:
The tag always comes in pairs. The content is written between both opening tag and closing tag.
<bdo dir="ltr"> text </bdo>
Sample of the HTML Tag:
<!DOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
<p>Text from left to right </p>
<p>
<bdo dir="rtl">This is the reversed text</bdo>.
</p>
</body>
</html>
Result:
Attributes:
The tag supports Global Attributes and the Event Attributes.
| Attributes | Value | Description |
|---|---|---|
| dir | ltr | |
| rtl | LTR will define the direction from left to right | |
| RTL specifies the direction from right to left |
Styling Methods for Tag:
You can use the following CSS properties to style an HTML bidirectional override 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 Override Tag appeared first on Share Point Anchor.
Top comments (0)