LTR — Left-to-right

Internationalization Done Right

A live Next.js demonstration of RTL layout, locale-aware routing, and Intl formatting — the i18n skills enterprise teams actually need.

4 LocalesRTL + LTRIntl APICSS Logical Props

Viewing in:EnglishFrançaisالعربيةעברית

What this demonstrates

RTL Layout

Full right-to-left support using CSS logical properties. Switch to Arabic or Hebrew — the entire layout mirrors without a single margin-left in the codebase.

Intl Formatting

Dates, numbers, and currency formatted correctly for each locale via the native Intl API. No third-party library. No manual formatting.

Locale Routing

Locale-aware URLs powered by next-intl middleware. Accept-Language detection automatically redirects users to their preferred locale.

Locale	Date	Number	Currency	Direction
`en`English	January 15, 2024	1,234,567.89	$9,999.99	Left-to-right
`fr`Français	15 janvier 2024	1 234 567,89	9 999,99 €	Left-to-right
`ar`العربية	15 يناير 2024	1,234,567.89	‏9,999.99 ر.س.‏	Right-to-left
`he`עברית	15 בינואר 2024	1,234,567.89	‏9,999.99 ‏₪	Right-to-left

card.module.css

.card {
  padding-inline: 1.5rem;  /* ≠ padding-left/right */
  margin-block-end: 1rem;  /* ≠ margin-bottom */
  border-inline-start: 2px solid var(--color-accent);  /* ≠ border-left */
  text-align: start;  /* ≠ text-align: left */
  inset-inline-start: 0;  /* ≠ left: 0 */
}

/* No margin-left. No margin-right.
   Direction is handled by the browser. */

Jane SmithPosted on January 15, 2024

Example Card

This card uses only CSS logical properties. Change the direction above to watch it mirror.

What RTL actually changes

English (LTR)

nav direction
border-inline-start
text-align: start
icon flips

Arabic (RTL)

nav direction
border-inline-start
text-align: start
icon flips

The entire page uses these properties — every margin, padding, and border. Switch locales in the nav to see it live.