Bidirectional text in HTML | @samgai

Today's obscure HTML element: <bdi>. It stands for "bidirectional" and refers to text that can include both RTL and LTR languages (does not appear to care about other variations).

Looking on MDN, the exact order is quite complex, but thankfully the browser does most of the heavy lifting for you.

Usernames and other user-provided values should be directionally isolated from their surrounding inline text, if there is any.

In HTML, this can be done with the <bdi> element.

Not only does this stop people messing with text direction using directional overrides (sorry for ruining your jokes), it also makes sure that an English sentence still ends on the right even when starting with an Arabic name.

Explore Other Notes

Newer

Inclusive glasses frames

I've always struggled to find glasses or sunglasses that fit my weird head, so I was intrigued by a company explicitly targeting body shapes that aren't well catered for. Unfortunately, the selection …

  • <!DOCTYPE html> <html> <head> <title></title> </head> <body> <p>Today's obscure HTML element: &lt;bdi&gt;. It stands for "bidirectional" and refers to text that can include both RTL and LTR languages (does not appear to care about other …</p> </body> </html>
  • Murray Adcock.
Journal permalink