How to Inspect and Control CSS unicode-bidi and Text Direction in Safari Web Inspector

Modern internationalized websites must seamlessly accommodate both Left-to-Right (LTR) scripts (such as English, French, and Russian) and Right-to-Left (RTL) scripts (such as Arabic, Hebrew, Persian, and Urdu). While the Unicode Bidirectional Algorithm (UBA) automatically handles directionality for pure text strings, bidirectional layouts frequently exhibit visual glitches when mixed-language content—such as numbers, punctuation marks, technical code, telephone numbers, or URLs—is inserted into RTL paragraphs.

Common bidirectional formatting errors include punctuation marks jumping to the wrong end of a sentence, numbers reversing their sequence, or inline English phrases disrupting the surrounding Arabic alignment. To control bidirectional text rendering, CSS provides the direction and unicode-bidi properties. In Apple Safari on macOS and iOS, the WebKit layout engine implements rigorous support for bidirectional text specifications. Using Safari Web Inspector, developers can inspect computed bidirectional properties, isolate inline elements, debug punctuation reversals, and simulate mixed-script typography dynamically.

Understanding CSS unicode-bidi and direction in WebKit

The direction property dictates the base inline flow (ltr or rtl) and text alignment defaults. However, changing direction alone on an inline element does not override the Unicode Bidirectional Algorithm unless paired with the unicode-bidi property.

The unicode-bidi property controls how the WebKit rendering engine interprets bidirectional embedding levels:

• normal: The element does not open an additional level of embedding; the Unicode algorithm processes the text strictly according to character directional types.
• embed: Creates a directional embedding level. If direction: rtl is applied, the inline element is treated as an embedded RTL run within the surrounding LTR flow.
• isolate: Treats the interior text as directional isolation (equivalent to the HTML <bdi> tag). The internal text does not affect the bidirectional formatting of the surrounding text, and external text does not affect the internal text. This is the modern recommended approach for dynamic user-generated content.
• bidi-override: Completely overrides the Unicode Bidirectional Algorithm, forcing every character to render strictly in the direction declared by the direction property.
• isolate-override: Combines the effects of isolate and bidi-override, isolating the element from surrounding text while strictly enforcing internal character order.
• plaintext: Determines the base directionality of the element by evaluating the first strongly typed directional character in the text, regardless of parent container properties.

Enabling Safari Web Inspector and Selecting Bi-Directional Content

To inspect bidirectional text rendering in Safari on macOS:

1. Launch Safari and navigate to Safari > Settings (or press Cmd + ,).
2. Select the Advanced tab and ensure Show features for web developers is selected.
3. Close the Settings window. The Develop menu will now appear in the macOS menu bar.
4. Navigate to your webpage, right-click the text run or mixed-language container exhibiting layout anomalies, and select Inspect Element (or press Cmd + Option + I).

The target DOM node is highlighted in the Elements tree view of Safari Web Inspector.

Inspecting Computed BiDi Properties in the Styles Sidebar

Once the element is selected in the DOM tree, examine the right-hand panel of Web Inspector.

To audit active bidirectional rules:

1. In the Styles panel, inspect applied rules. Check whether framework reset styles or cascading parent containers apply direction: rtl or direction: ltr.
2. Switch to the Computed tab to view the final values resolved by the WebKit engine.
3. Type direction or bidi into the search box. Web Inspector reveals the computed values for direction, unicode-bidi, and writing-mode, alongside direct links to the originating CSS stylesheet and line number.
4. Inspect the parent container for HTML directional attributes (such as dir="rtl" or dir="auto"), as HTML directional attributes establish higher precedence than CSS rules in modern browser rendering engines.

Testing and Simulating BiDi Values Live in Web Inspector

You can adjust bidirectional declarations directly in Safari Web Inspector to resolve typography bugs in real time.

A common issue occurs when dynamic strings (such as product names, email addresses, or phone numbers) are injected into an Arabic or Hebrew sentence, causing adjacent brackets or punctuation to flip to the opposite margin:

To isolate the dynamic string and prevent punctuation displacement:

1. In the Styles panel, click inside the declaration block of your target inline selector (e.g. .user-handle or .product-sku).
2. Add directional isolation properties:

   .dynamic-content {
       direction: ltr;
       unicode-bidi: isolate;
   }

3. Observe the browser viewport immediately. The English SKU or handle renders cleanly in LTR order, while surrounding Arabic text and exclamation marks remain anchored in their proper RTL flow without jumping across the phrase boundary.

To test what happens when strict character ordering is required (for example, displaying reversed serial numbers or specialized cipher strings), test bidi-override:

.strictly-reversed {
    direction: rtl;
    unicode-bidi: bidi-override;
}

Comparing unicode-bidi: isolate with HTML dir Attribute

The World Wide Web Consortium (W3C) internationalization guidelines recommend using semantic HTML markup rather than pure CSS whenever handling document directionality:

In Web Inspector, use CSS unicode-bidi: isolate to enhance styling or fix legacy third-party components where direct modification of HTML templates is not feasible.

Auditing International Typography in Responsive Design Mode

Bidirectional layout bugs are particularly disruptive on mobile screens, where right margins and form inputs can become misaligned.

1. Press Cmd + Ctrl + R (or choose Develop > Enter Responsive Design Mode).
2. Select an iPhone or iPad viewport simulation.
3. Verify that form inputs with mixed scripts maintain appropriate text alignment (using CSS text-align: start rather than hardcoded left or right).
4. Ensure that navigation bars, flex containers, and grid layouts adapt cleanly using CSS Logical Properties:

   /* Use logical properties instead of physical left/right */
   .multilingual-card {
       margin-inline-start: 1.5rem;
       padding-inline-end: 1rem;
       text-align: start;
       unicode-bidi: isolate;
   }