Isolate inserted text from the text around it

How to do it

An Arabic shop name inside an English sentence can reorder the words around it. So can a number after a Hebrew word. An isolate keeps the inserted text from affecting its neighbours. In HTML, wrap the value in <bdi>, or set dir="auto" on markup that tightly wraps it. In plain text, such as notifications and native app strings, wrap it in FIRST STRONG ISOLATE (U+2068) and POP DIRECTIONAL ISOLATE (U+2069). On Android, BidiFormatter.unicodeWrap wraps values for the same purpose. Set page direction as Support right-to-left text says.

Examples

HTML example

<p><bdi>مطعم السلام</bdi> wrote 5 reviews</p>

JavaScript example

const FIRST_STRONG_ISOLATE = '⁨';
const POP_DIRECTIONAL_ISOLATE = '⁩';
export const isolate = value => `${FIRST_STRONG_ISOLATE}${value}${POP_DIRECTIONAL_ISOLATE}`;
const body = `${isolate(shopName)} wrote ${count} reviews`;

Kotlin example

import androidx.core.text.BidiFormatter
val body = getString(R.string.wrote_reviews, BidiFormatter.getInstance().unicodeWrap(shopName), count)

How to check

A test renders "{name} wrote 5 reviews" with the name "مطعم السلام" in an English page. The words "wrote 5 reviews" stay in order after the name, and the value sits inside a bdi element or between U+2068 and U+2069.

Sources

• W3C Inline markup and bidirectional text in HTML
• W3C How to use Unicode controls for bidi text
• UAX #9 (Unicode Bidirectional Algorithm)

Related rules

• LOC-9 Support right-to-left text in Localization