Bdi and bdo

BDI & BDO Visual Demo

BDI & BDO Visual Demo

Interactive demo that shows how <bdi> isolates direction and <bdo dir="rtl"> forces direction. Try controls below.

1) Basic mixing (no BDI/BDO)
<mix> Alice (علي) — score: 120
← LTR
↔
RTL →
2) Using <bdi> (isolation)
<bdi> Name: Alice (علي) — score: 120
3) Using <bdo dir="rtl"> (override)
<bdo dir="rtl"> Name: Alice (علي) — score: 120
4) Edge case: numbers + mixed text
numbers Order # 123ABC — customer: علي 2025

How to remember (cartoon rules)

Short memory rules and live HTML snippets you can copy/paste.

Memory rules
  • <bdi> = bubble 🫧 → isolate unknown text so it doesn’t flip other parts.
  • <bdo dir="rtl"> = arrow 🧭 → force content to read right-to-left.
  • Use direction: rtl or page-level <html dir="rtl"> to change whole page direction.
Copyable snippets
<!-- isolate unknown name --> <span>User: <bdi>علي</bdi></span> <!-- force RTL for special text --> <span>Label: <bdo dir="rtl">Hello</bdo></span>
Tip: Never put secret logic into direction handling; these tags only affect display order. Use <bdi> for user content (like usernames) and <bdo> only when you truly need to override display direction.

Comments

Post a Comment

Popular posts from this blog

HTML TAGS

🌐 HTML Tags Cheat Sheet 1. Document Structure & Metadata Tag Description <!DOCTYPE> Defines the document type <html> Defines the root of an HTML document <head> Contains metadata/information for the document <title> Defines a title for the document <base> Specifies base URL/target for all relative URLs <link> Defines the relationship to an external resource (like CSS) <meta> Defines metadata about the HTML document <style> Defines style information for a document <script> Defines a client-side script <noscript> Alternate content for users without script support <template> Container for content hidden when page loads 2. Document Layout & Sections Tag Description <body> Defines the document’s body <header> Defines a header for a document or section <footer> Defines a footer for a document or sec...
Read more

HTML Syntax

HTML Syntax October 23, 2025 🧠 What is HTML? HTML = HyperText Markup Language It’s the skeleton of a webpage — it builds the structure of what you see online. 🧩 Think of: HTML → bones (structure 🦴) CSS → clothes (style 👕) JavaScript → brain (actions 🧠) <!--!+Tab shortcut --> <!DOCTYPE html > <html lang = "en" > <head> <meta charset = "UTF-8" /> <meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> <!-- <meta http-equiv="refresh" content="10">--> <!-- <meta name="description" content="Learn HTML basics"> --> <title> Document </title> <link rel = "stylesheet" href = "stylesheet.css" /> </head> <body> <h1 class = "Heading" > Hello World </h...
Read more