<bdi> stops .NET from turning into NET. in Arabic text

While building the Arabic version of this site, a sentence that mentions .NET and C# came out as NET. and #C. Nothing was wrong with the text itself. It was the Unicode bidirectional algorithm doing exactly what it’s designed to do.

Why it happens

In a right-to-left paragraph, letters like N are strongly left-to-right, but punctuation such as . and # has no strong direction of its own. When a neutral character sits at the edge of a Latin word, it takes the paragraph’s direction, so it gets drawn on the “wrong” side of the word.

The fix: isolate the term

<bdi> (bidirectional isolate) lays its content out on its own, and the surrounding text treats it as a single unit:

<p dir="rtl">
  أبني أنظمة خلفية باستخدام <bdi>.NET</bdi> و <bdi>C#</bdi>
</p>

<bdi> guesses the direction from the first strong character, which is right for .NET. To make it explicit for every term, including ones that start with a digit, I also force left-to-right in CSS:

html[dir="rtl"] bdi {
  direction: ltr;
  unicode-bidi: isolate;
}

Related: keep code blocks left-to-right

On an RTL page, code blocks inherit the right-to-left direction too, so brackets and comment markers get mirrored. Setting direction: ltr on code containers keeps them reading like code.