HTML5: How to isolate a part of text that might be formatted in a different direction from other text outside it?

Last update on February 06 2024 11:30:44 (UTC/GMT +8 hours)

Solution :

HTML Code :

<!DOCTYPE html><!-- HTML5 document type declaration -->
<html><!-- Start of HTML document -->
<head><!-- Start of head section -->
<meta charset="utf-8"><!-- Declares document character encoding -->
<title><span class="heading">How to isolate a part of text that might be formatted in a different direction from other text outside it</span></title><!-- Sets the title of the webpage -->
</head><!-- End of head section -->
<body><!-- Start of body section -->
<p><!-- Start of paragraph -->
In the example below, usernames are shown along with the number of points in a contest.
If the bdi element is not supported in the browser, the username of the Arabic user would confuse the text (the bidirectional algorithm would put the colon and the number "80" next to the word "User" rather than next to the word "points").
</p><!-- End of paragraph -->
<ul><!-- Start of unordered list -->
<li>User <bdi>hrefs</bdi>: 40 points</li><!-- List item with username and points, bdi used to isolate text direction -->
<li>User <bdi>jdoe</bdi>: 60 points</li><!-- List item with username and points, bdi used to isolate text direction -->
<li>User <bdi>ترحيب</bdi>:80 points</li><!-- List item with Arabic username and points, bdi used to isolate text direction -->
</ul><!-- End of unordered list -->
<p><b>Note:</b> The bdi element is currently supported only in Firefox and Chrome.</p><!-- Additional note about browser support for the bdi element -->
</body><!-- End of body section -->
</html><!-- End of HTML document -->

Explanation:

This HTML document starts with a doctype declaration specifying it's an HTML5 document.
The <html> tag encloses the entire HTML content.
The <head> section contains metadata about the document, such as character encoding and the title.
Within the <body> section:

There's a paragraph explaining the purpose of the example.
An unordered list (<ul>) contains list items (<li>), each displaying a username along with points.
The <bdi> element is used to isolate text that might be formatted in a different direction.
There's an additional note at the end regarding browser support for the <bdi> element.