# Demo: BiDi isolation

This page can help you understand the problem of displaying strings that are made up of multiple pieces -- each potentially with different directionalities. This is common when dealing with user-generated text, or with results that come from mixed sources, like searches.

You can play around with the demo here. Scroll down to read more about the problem statement and explanation.

# Dynamic demo

Note: The initial values represent strings that can cause common BiDirectionality issues without isolation. You can change the values of the inputs according to your needs to see the results.


Plain text
field1 (field2) field3
Test string (עברית עם אנגלית (english parenthetical)) ויקידאטא Q12345
With html tags
<span>field1</span> <span>(field2)</span> <bdi>field3</bdi>
Test string (עברית עם אנגלית (english parenthetical)) ויקידאטא Q12345

# Problem statement

It's very common for many tools and components to output mixed directionality within the same displayed string. This is especially true for components that display user-generated content, or ones that are aimed at displaying content from potentially multiple languages, like search boxes.

Displaying a single string that may content multiple directionalities is a tricky endeavor. It can get very complicated to display these properly, especially depending on the strings used, on which direction starts, on where the changes happen, on how many of those language combinations they involve, etc.

As a general rule of thumb, the recommendation is to individually isolate each known piece of the string as they're combined: This means that the internal structure of the resulting sentence is usually rendered correctly, regardless of the overall RTL or LTR context of the entire page.

Last Updated: 4/24/2022, 2:17:01 PM