HTML Factor: bdo

The HTML <bdo> component is used to override the present directionality of textual content, which will be useful in instances the place content material must be displayed in a route completely different from the default directionality of the doc. It was launched in HTML4 and remains to be broadly used as we speak.

The abbreviation “bdo” stands for “Bi-Directional Override.”

Syntax

The syntax for the <bdo> component is simple:

1

<bdo dir="rtl">Some type of textual content</bdo>

This syntax creates an inline component that may override the textual content’s directionality, by utilizing the dir attribute.

Instance

1

<p>This textual content is written from left to proper.</p>

2

<p><bdo dir="rtl">This textual content is written from proper to left.</bdo></p>

On this (barely absurd) instance, the <bdo> component is used to override the directionality of English textual content and show it from proper to left. In a extra practical atmosphere, this may be useful when coping with language scripts which are written from proper to left, resembling Arabic or Hebrew.

Outcome

Attributes

The <bdo> component has one attribute:

• 
  dir: Specifies the directionality of the textual content contained in the component. The attainable values are ltr (left to proper) and rtl (proper to left).

Content material

The <bdo> component can include any textual content or HTML components.

• The newer HTML <bdi> (Bidirectional Textual content Isolation) component can be utilized in the same strategy to the <bdo> component, the distinction being that <bdo> merely reverses the textual content route, whereas <bdi> isolates the included textual content from textual content surrounding it. This isolation ensures that bidirectional textual content formatting doesn’t adversely influence the remainder of the textual content (which may occur, particularly if numerical and non-alphanumeric characters are concerned). The <bdi> component is often really helpful.

Did You Know?

• The <bdo> component will be mixed with the CSS route property to manage the route of the textual content contained in the component.

Be taught Extra