如何在HTML中实现币种符号前置的统一货币显示（含RTL符号）

Great question! This is a super common headache when dealing with bidirectional (BiDi) text in HTML—especially with currency symbols that use right-to-left (RTL) scripts like the Tunisian Dinar (د.ت.‏). Let’s break down why this happens and how to fix it consistently for every currency type.

Why the Reverse Order Happens #

The problem pops up because RTL characters (like the Arabic-based Tunisian Dinar symbol) trigger the browser to flip the text direction of the whole surrounding block. So if you just write د.ت.‏ 100, the browser sees the RTL symbol and treats the entire string as RTL content—reversing the order so the number shows up first, and the symbol ends up last.

Luckily, there are two reliable ways to force the browser to respect your desired order (symbol first, number last) regardless of the currency’s text direction.

Solution 1: Use the <bdi> Element #

The <bdi> (BiDi Isolation) tag is purpose-built for this scenario. It creates an isolated context for bidirectional text, preventing it from messing up the order of content you’ve explicitly set.

Here’s how to implement it:

<!-- If you're concatenating symbol and amount in your frontend (e.g., with JS or a template engine) -->
<bdi>{{ currencySymbol }} {{ amount }}</bdi>

<!-- Example with Tunisian Dinar -->
<bdi>د.ت.‏ 150</bdi>

<!-- Example with USD -->
<bdi>$ 75</bdi>

<!-- Example with Euro -->
<bdi>€ 120</bdi>

This works because <bdi> tells the browser to render the internal content according to each character’s inherent direction, but keeps it isolated so the overall order (symbol first, number last) stays exactly how you wrote it.

Solution 2: CSS Direction + Unicode-Bidi #

If you prefer using CSS instead of adding an extra HTML tag, you can apply two properties to a container element. This forces the text to render left-to-right while still respecting the correct display of individual RTL characters.

First, define a CSS class:

.currency-display {
  direction: ltr;
  unicode-bidi: embed;
}

Then wrap your currency string in this container:

<span class="currency-display">د.ت.‏ 200</span>
<span class="currency-display">$ 50</span>
<span class="currency-display">£ 85</span>

The unicode-bidi: embed value ensures that any RTL symbols inside the container are rendered correctly, but the browser won’t reverse the overall order you’ve set.

Key Tips for Consistency #

• Always concatenate symbol first: Both methods rely on you setting the correct order (symbol + number) in your markup. The HTML/CSS just prevents the browser from reversing it.
• Works for all currencies: No need for separate logic for LTR vs. RTL symbols—both methods handle USD, EUR, Tunisian Dinar, and any other currency seamlessly.
• Adjust spacing: Add or remove the space between symbol and number based on your design system—both solutions work either way.

内容的提问来源于stack exchange，提问作者Keshav1007