Bi-Directional Text with HTML BDO

Introduction

HTML <bdo> tag is used to change the direction of the text, especially in situations where you have different languages mixed together. The tag is useful in cases where you need to display languages that read from right to left, like Arabic or Hebrew alongside languages that read from left to right like English. In this lab, you will learn how to create bi-directional text using the HTML <bdo> tag.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/TextContentandFormattingGroup -.-> html/para_br("`Paragraphs and Line Breaks`") html/TextContentandFormattingGroup -.-> html/text_dir("`Text Direction`") subgraph Lab Skills html/basic_elems -.-> lab-70712{{"`Bidirectional Text with HTML BDO`"}} html/head_elems -.-> lab-70712{{"`Bidirectional Text with HTML BDO`"}} html/text_head -.-> lab-70712{{"`Bidirectional Text with HTML BDO`"}} html/para_br -.-> lab-70712{{"`Bidirectional Text with HTML BDO`"}} html/text_dir -.-> lab-70712{{"`Bidirectional Text with HTML BDO`"}} end

HTML Tag

Create a new file and name it "index.html".

Add the following code to your index.html file to open the HTML tag:

<!doctype html>
<html>
  <head>
    <title>Bi-Directional Text using bdo tag</title>
  </head>
  <body></body>
</html>

Adding the bdo Tag

In between the body tags, add the following code to create a bi-directional text using the <bdo> tag:

<h3>Bi-Directional Text using bdo tag:</h3>
<bdo dir="rtl">مرحبا بالعالم</bdo><br />
<bdo dir="ltr">Hello world</bdo>

Here, we have created a simple example of a bi-directional text. The dir attribute is added to specify the direction of the text in the bdo tag. The rtl value tells the browser to read the text from right to left, whereas the ltr value tells the browser to read the text from left to right.

Save your index.html file and open it in a web browser. You should now see the bi-directional text displayed on the page.

Summary

The <bdo> tag is used to create bi-directional text on a webpage. It helps to display languages that read from right to left, alongside languages that read from left to right. The dir attribute is used to specify the direction of the text in the bdo tag and can have two values either ltr or rtl. Use the tag carefully as it can change the meaning of the text.

Bidirectional Text with HTML BDO

Introduction

Skills Graph

HTML Tag

Adding the bdo Tag

Summary

Other HTML Tutorials you may like