Bi-Directional Text Formatting with BDI

Introduction

Bi-Directional Text (bidi) is a formatting style where text is written from both left to right and right to left. It is highly useful when you are writing content in multiple languages and also when the user enters input in languages other than the default language of your webpage. In such cases, having the <bdi> tag can greatly benefit you and improve the user experience.

In this lab you will learn how to use the <bdi> tag to isolate bi-directional text in HTML. By the end of this lab, you will be able to create web content that is both user-friendly and promotes multilingualism.

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(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html(("`HTML`")) -.-> html/FormsandInputGroup(["`Forms and Input`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) 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`") html/LayoutandSectioningGroup -.-> html/access_cons("`Accessibility Considerations`") html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`") html/FormsandInputGroup -.-> html/forms("`Form Elements`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") subgraph Lab Skills html/basic_elems -.-> lab-70710{{"`Bidirectional Text Formatting with BDI`"}} html/head_elems -.-> lab-70710{{"`Bidirectional Text Formatting with BDI`"}} html/text_head -.-> lab-70710{{"`Bidirectional Text Formatting with BDI`"}} html/para_br -.-> lab-70710{{"`Bidirectional Text Formatting with BDI`"}} html/text_dir -.-> lab-70710{{"`Bidirectional Text Formatting with BDI`"}} html/access_cons -.-> lab-70710{{"`Bidirectional Text Formatting with BDI`"}} html/doc_flow -.-> lab-70710{{"`Bidirectional Text Formatting with BDI`"}} html/forms -.-> lab-70710{{"`Bidirectional Text Formatting with BDI`"}} html/inter_elems -.-> lab-70710{{"`Bidirectional Text Formatting with BDI`"}} end

Set up the HTML file structure

Let's set up the basic file structure for our HTML file. Open your preferred text editor, create a new file, and save it as index.html.

<!doctype html>
<html>
  <head>
    <title>Bi-Directional Text Using HTML</title>
  </head>
  <body></body>
</html>

Create a Form for User Input

Next, we will create a form for collecting user feedback, which can be written in any language. This form will be added to the body tag you created in the previous step. To achieve this, add the following code to your index.html file:

<body>
  <h1>User Feedback Form</h1>

  <form>
    <label for="user-feedback">Enter your feedback here:</label>
    <br />
    <textarea name="user-feedback" id="user-feedback" rows="5"></textarea>
    <br />
    <button type="submit">Submit Feedback</button>
  </form>
</body>

The code above creates a simple form containing a label for the feedback, an input area for feedback, and a submit button.

Add `<bdi>` Tag to Bi-Directional Text

To ensure that any bi-directional language the users enter in feedback is correctly displayed on the webpage, we need to wrap it with the <bdi> tag. The below code block demonstrates how to use the <bdi> tag.

<body>
  <h1>User Feedback Form</h1>

  <form>
    <label for="user-feedback">Enter your feedback here:</label>
    <br />
    <textarea name="user-feedback" id="user-feedback" rows="5"></textarea>
    <br />
    <button type="submit">Submit Feedback</button>

    <div>
      <p>User Feedback:</p>

      <!-- Adding <bdi> Tag -->

      <p><bdi id="feedback-display"></bdi></p>
    </div>
  </form>
</body>

// Script to display user feedback
<script>
  const feedbackDisplay = document.getElementById("feedback-display");
  const feedbackInput = document.getElementById("user-feedback");

  // Handle Form Submit
  document.querySelector("form").addEventListener("submit", (event) => {
    event.preventDefault();
    feedbackDisplay.innerHTML = feedbackInput.value;
  });
</script>

The code above contains a code block that displays <bdi>-wrapped user feedback given above as output.

Rest assured, your bi-directional text is now correctly isolated by the <bdi> tag! So let's test your form. Open the index.html file in any web browser, and enter some feedback. This feedback may contain letters, punctuations, and words from many languages. Upon submitting the form, you will observe that the feedback is displayed in the output area.

Enhance Accessibility with ARIA

To enhance the accessibility of your web page, you may add ARIA attributes. ARIA stands for Accessible Rich Internet Applications. ARIA attributes support accessibility for users with a wide range of disabilities like blindness, deafness, and limited mobility.

<label for="user-feedback" aria-label="Enter your feedback"></label>

Using the aria-label attribute, we can attach a text label to any HTML element in order to make it more accessible. In the above code block, we have attached an aria-label to <label> tag.

Summary

In this lab, you learned how to use the <bdi> tag to isolate bidirectional text in HTML. Following are the key takeaways from this lab:

Bi-Directional Text (bidi) helps in formatting text that is written in multiple languages.
The <bdi> tag is used on a span of text that should be isolated from its surroundings for bi-directional text formatting.
<bdi> tag is useful for a variety of languages, including Arabic and Hebrew.
To correctly display bi-directional text, first, wrap it with the <bdi> tag, then use CSS to style it.
ARIA attributes can be added to enhance the accessibility of web pages.

Bidirectional Text Formatting with BDI