Foundations · Extended

RTL & Internationalization

Direction-aware layout using logical CSS properties, a confirmed mirror/no-mirror classification for the icon vocabulary, and what never changes regardless of reading direction. Not observed in the captured CSS — Instagram's English-language about-page source is LTR-only — so this page is derived from CSS internationalization standards applied to this system's existing tokens.

Core technique

Logical properties, not direction conditionals

The entire system should use logical CSS properties everywhere a physical left/right value would otherwise appear. Done consistently, most components need zero [dir="rtl"] overrides — they mirror automatically.

Physical (avoid)Logical (use instead)

margin-left / margin-rightmargin-inline-start / margin-inline-end

padding-left / padding-rightpadding-inline-start / padding-inline-end

left / rightinset-inline-start / inset-inline-end

border-left / border-rightborder-inline-start / border-inline-end

text-align: left / righttext-align: start / end

border-top-left-radiusborder-start-start-radius

flex-direction: rowrow (auto-reverses with dir — no change needed)

Example — a notification row, direction-agnostic

/* Works correctly in both LTR and RTL with zero [dir] overrides */
.notification-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-inline: var(--space-4);
  text-align: start;
}

.notification-row__avatar {
  margin-inline-end: var(--space-2);
}

.notification-row__timestamp {
  margin-inline-start: auto; /* pushes to line-end: right in LTR, left in RTL */
}

Icon mirroring

Directional icons flip — symbolic icons don't

The rule: if the icon depicts a direction or motion relative to reading order, it mirrors. If it depicts a real object or a universal symbol, it stays fixed. Applied to this system's confirmed icon vocabulary from the Icons page:

Mirrors

Back chevron

Points toward 'previous' in reading order — reverses with text direction

Mirrors

Forward chevron / disclosure

Points toward 'next' in reading order

Mirrors

Send / paper-plane

Implies forward motion in reading direction

Mirrors

Reply / forward (message)

Arrow direction is reading-direction-relative

Mirrors

Text alignment icons

Depict line-start/line-end, which swaps with direction

Mirrors

Progress / loading fill direction

Fills toward reading-end, same as Stories Progress segments

Fixed

Play button (triangle)

Universal media convention, not direction-coded — every platform keeps it pointing right

Fixed

Like / heart

Symbolic, not directional

Fixed

Checkmark

Universal confirmation symbol

Fixed

Camera

Depicts a real object, not a direction

Fixed

Search / magnifying glass

Symbolic object, no inherent direction

Fixed

Profile / person

Symbolic, not directional

Fixed

Settings / gear

Symbolic, not directional

Fixed

Bell / notifications

Symbolic object

Fixed

Instagram logo / wordmark

Brand marks never mirror — identity stays fixed regardless of direction

Mirroring a directional icon — CSS

/* Only directional icons need this — symbolic icons get no rule at all */
[dir="rtl"] .icon--directional {
  transform: scaleX(-1);
}

Layout

Navigation order mirrors — brand position doesn't

Primary navigation (Tab Bars, sidebars) reverses its item order so the reading-start item in RTL is still the first thing encountered. The Instagram wordmark stays at the structural start of the header in both directions — brand identity isn't subject to mirroring the way navigation flow is.

LTR

HomeSearchReelsActivityProfile

RTL

HomeSearchReelsActivityProfile

Tab Bar — order mirrors for free with logical flex + DOM order untouched

.tab-bar {
  display: flex;
  flex-direction: row; /* auto-reverses visually under dir="rtl" — no JS needed */
}
/* Do NOT reorder the DOM or use flex-direction: row-reverse —
   that breaks screen-reader and keyboard tab order, which should still
   match the logical (start-to-end) reading sequence. */

What never mirrors

Content stays content, regardless of chrome direction

Direction-awareness applies to UI chrome — layout, icons, alignment. It does not apply to the content those surfaces hold.

Photography & video

User media is content, not chrome — never flipped, cropped, or repositioned for direction.

The Instagram logo and wordmark

Brand identity is fixed orientation in every market and every direction.

Code blocks & monospace content

Source code, URLs, and file paths stay LTR even inside an RTL page — see this manual's own CodeBlock component.

Numerals

Arabic-indic and Western numerals both read left-to-right even within RTL body text — '٣٢ متابع' keeps its number LTR-internal.

Usernames, emails, hashtags

These are identifiers, not prose — '@username' and '#hashtag' stay LTR even mid-RTL-sentence.

Charts with a time axis

Time-series charts conventionally read oldest→newest left-to-right regardless of UI direction — mirroring would misrepresent the data, not just the chrome.

Implementation

Setting direction

Direction is set once, on the root element, driven by the active locale — never per-component.

Direction attribute — set from locale, not detected from content

// Server-rendered or set on initial locale resolution
const RTL_LOCALES = ["ar", "he", "fa", "ur"];

function getDirection(locale) {
  const lang = locale.split("-")[0];
  return RTL_LOCALES.includes(lang) ? "rtl" : "ltr";
}

// <html lang={locale} dir={getDirection(locale)}>

Do

Use logical properties by default — margin-inline-*, padding-inline-*, inset-inline-*, text-align: start/end — everywhere a physical left/right value would otherwise appear.
Keep DOM order as logical reading order — Let flex-direction: row mirror visually under dir="rtl" rather than reversing the DOM — this preserves correct keyboard and screen-reader tab order.
Mirror only direction-coded icons — Chevrons, arrows, send/reply icons. Leave symbolic icons (heart, camera, search, play) untouched.
Keep numerals, code, and identifiers LTR — Numbers, usernames, hashtags, and code blocks stay left-to-right even inside RTL body text — this matches how every major OS handles bidirectional text.

Don’t

Don't use flex-direction: row-reverse to mirror layout — It visually flips content but leaves DOM/tab order wrong — assistive tech and keyboard users get a layout that doesn't match navigation order.
Don't mirror the Instagram logo or any photo/video content — Brand marks and user media are content, not direction-relative chrome.
Don't detect direction from text content — Set dir from the resolved locale, not by sniffing whether a string contains RTL characters — mixed-content strings (a username inside an Arabic caption) need the container's direction to stay stable.
Don't build a separate RTL-only style system — Logical properties mean most components need zero [dir="rtl"] overrides — only direction-coded icons and rare layout exceptions need explicit rules.