Bidirectional Text

Mixed-direction text handling.

html

<div class="bidi bidi--true">
  <p class="bidi__line bidi__line--isolated">Invoice &mdash; <bdi>شركة الأمل</bdi> &mdash; was approved.</p>
  <p class="bidi__line bidi__line--plain">Invoice &mdash; <span>شركة الأمل</span> &mdash; was approved.</p>
  <p class="bidi__note">&lt;bdi&gt; isolates the Arabic run so surrounding Latin punctuation keeps its own order.</p>
</div>
<style>
.bidi { font: 16px/1.7 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 320px; box-sizing: border-box; }
.bidi__line { margin: 0 0 10px; padding: 10px 12px; border-radius: 8px; background: #ffffff; border: 1px solid #24143018; display: none; }
.bidi__note { margin: 8px 0 0; font-size: 11px; color: #24143099; }
.bidi--true .bidi__line--isolated { display: block; }
.bidi--false .bidi__line--plain { display: block; }
</style>

tailwind

<div class="biditw biditw--true font-sans text-base leading-7 text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[320px] box-border">
  <p class="biditw__line biditw__line--isolated hidden m-0 mb-2.5 py-2.5 px-3 rounded-lg bg-white border border-[#24143018]">Invoice &mdash; <bdi>شركة الأمل</bdi> &mdash; was approved.</p>
  <p class="biditw__line biditw__line--plain hidden m-0 mb-2.5 py-2.5 px-3 rounded-lg bg-white border border-[#24143018]">Invoice &mdash; <span>شركة الأمل</span> &mdash; was approved.</p>
  <p class="m-0 mt-2 text-[11px] text-[#24143099]">&lt;bdi&gt; isolates the Arabic run so surrounding Latin punctuation keeps its own order.</p>
</div>
<style>
.biditw--true .biditw__line--isolated { display: block; }
.biditw--false .biditw__line--plain { display: block; }
</style>

react

export function BidirectionalText({
  leadText = "Invoice",
  rtlPhrase = "شركة الأمل",
  trailText = "was approved.",
  isolate = true,
}) {
  const lineStyle = { margin: "0 0 10px", padding: "10px 12px", borderRadius: 8, background: "#ffffff", border: "1px solid #24143018" };
  return (
    <div style={{ font: "16px/1.7 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 20, borderRadius: 12, width: 320, boxSizing: "border-box" }}>
      {isolate
        ? <p style={lineStyle}>{leadText} &mdash; <bdi>{rtlPhrase}</bdi> &mdash; {trailText}</p>
        : <p style={lineStyle}>{leadText} &mdash; <span>{rtlPhrase}</span> &mdash; {trailText}</p>}
      <p style={{ margin: "8px 0 0", fontSize: 11, color: "#24143099" }}>
        {isolate ? "<bdi> isolates the Arabic run so surrounding Latin punctuation keeps its own order." : "Without <bdi>, the Unicode bidi algorithm can pull neighbouring punctuation into the Arabic run."}
      </p>
    </div>
  );
}