i18n: A Brief Primer of Web Internationalization by Elika J. Etemad aka fantasai W3C CSS Working Group Invited Expert

i18n = in1t2e3r4n5a6t7i8o9n10a11l12i13z14a15t16i17o18n
the process of enabling software to support
multiple languages and locales


Bienvenue! Welcome! Wilkommen!

$ € £   M/D/Y D/M/Y   °C °F



Use UTF-8

HTML <meta charset=utf-8> or HTTP Content-Type: text/html;charset=utf-8

Styling an Internationalized Website

Declare the Language

Automatic Language Tailorings in CSS

Language-based Selectors

:lang(fr)       { ... CSS for elements en français ... }
:lang(\*-CH)    { ... CSS for elements in Swiss dialects ... }
:lang(\*-Latn)  { ... CSS for elements in Latin transcription ... }
[lang]:lang(fr) { ... CSS to inherit from language root ... }

Bidirectionality → What Happens When Writing Directions Collide? ← چه می‌شود هنگامیکه روش‌های نگارش با هم برخورد دارند؟

As soon as you expect to have any RTL, you must deal with bidi.

Introduction to Unicode Bidirectional Algorithm

Text is stored in logical order, not visual order.

by Elika Etemad (الیکا اعتماد) on bidi.
1    2      3      5      4     6   7

Visual order depends on line-breaking.

by Elika Etemad (الیکا اعتماد) on bidi.
1    2      3      5      4     6   7
by Elika Etemad (الیکا
1    2      3      4
اعتماد) on bidi.
   5     6   7

The (Vastly Simplified) Unicode Bidirectional Algorithm

  1. Classify neutrals
  2. Calculate contiguous runs
  3. Reorder runs

Resolving Neutrals: Intrinsic Directionality

All Unicode characters are either:

Note: Numbers are special. We'll pretend they're L for now.

Resolving Neutrals: Sandwich Rule

Surrounded neutrals take surrounding directionality.


Resolving Neutrals: Sandwich Rule Failures

Resolving Neutrals: Base Direction

Each paragraph has a base direction.

Use the base direction for initial/final/conflicted neutrals.

Wrong Base Direction Correct Base Direction
.This is my sentence
This is my sentence.
این جمله است‎.
این جمله است.

Declaring Directionality

Bidi Isolation

Using Bidi Isolation

dir=auto and <bdi>

Automatic Layout Effects of Direction

Logical Properties & Values

Physical Logical
text-align: left text-align: start
margin-left: 2em margin-inline-start: 2em

Logical Properties & Values

Directionality-based Selectors

:dir(rtl) { ... CSS for rtl elements ... }
:dir(ltr) { ... CSS for ltr elements ... }


Font Size, Line Height

Content Length Varies

Intrinsic Sizing

Intrinsic Sizing

Intrinsic Sizing

Resizable Typography Experiment using “Intrinsic Design” (Jen Simmons)

Intrinsic Sizing

grid-template-columns: max-content max-content minmax(min-content,1fr) min-content

Automatic Sizes

Intrinsic Sizing Adapts to Chinese

CSS i18n Tools

Further Resources


Get Involved: i18n Task Forces @ W3C