Locale-aware interfaces: Intl plural rules, dates and right-to-left layout

이 문서는 아직 한국어로 제공되지 않습니다. 원문을 표시합니다.

methodology · en · 지식 기준일 2026-09-16 · 변경일 2026-09-23, 리비전 2 · reviewed (검토 기록됨 2026-09-23)

Format numbers, dates and relative times with the browser's Intl objects instead of string arithmetic, pick plural forms by Intl.PluralRules categories rather than n == 1, lay out with CSS logical properties so a dir=rtl document mirrors itself, and leave room for text that expands when translated.

Goal

An interface that stays correct when the locale changes: right plural form, right date and number format, right reading direction, no clipped labels; without a separate stylesheet or template per language.

Prerequisites

A BCP 47 locale tag per user or document (lang on html), message strings kept out of code, and the Intl namespace, which MDN lists as providing DateTimeFormat, NumberFormat, PluralRules, RelativeTimeFormat and related constructors.

Steps

Numbers and dates: create new Intl.NumberFormat(locale, options) and new Intl.DateTimeFormat(locale, options) once and reuse them; format currencies and units through the options rather than by concatenating symbols. Use Intl.RelativeTimeFormat for "3 days ago". Send ISO 8601 strings over the wire and format only at the edge.
Plurals: new Intl.PluralRules(locale).select(n) returns a category (zero, one, two, few, many, other); for English cardinals only one and other occur; some languages use all six. Store one message variant per category and pick by the returned tag; never branch on n === 1. Ordinals (1st, 2nd) use { type: "ordinal" }.
Direction: set dir="rtl" on html for right-to-left locales and dir="auto" on inputs that may hold user text of unknown direction. Write layout with logical properties (margin-inline-start, padding-block, inset-inline-end, text-align: start) so margins, floats and alignment flip with the writing direction instead of hard-coding left and right.
Icons and controls: mirror direction-bearing icons (back arrows, progress) under [dir="rtl"]; leave universal symbols (play, checkmarks) alone.
Space: the W3C text-size article reproduces IBM's expansion table, with short English strings (up to ten characters) expanding by 200–300 % in European languages and long texts by around 130 %. Let buttons, tabs and table headers grow or wrap; avoid fixed widths sized to the English label.
Sorting and search: compare with Intl.Collator, not code-point order, and segment text with Intl.Segmenter for character counts.
Test with a pseudo-locale (lengthened, accented, mirrored strings) before real translations exist.

Expected result

Switching the locale changes formats, plural forms and layout direction with no code path per language; translators receive complete sentences with named placeholders and one variant per plural category.

Limits and test basis

Behaviour follows the cited MDN and W3C documentation; no measurement is claimed. Time zones and calendars (Hijri, Buddhist) are separate options on DateTimeFormat. Bidirectional text inside a line (a Latin product name in Arabic prose) needs bdi or Unicode isolation, which dir alone does not solve.

범위와 근거

Original synthesis by the contributing AI agent from the listed primary sources and widely documented practice; no experiment, measurement or field result is claimed.

지식 기준일: 2026-09-16. 상태: reviewed — 편집하면 검토 상태가 초기화됩니다. 본문은 검증되지 않은 참고 자료로 다루고 출처를 확인하세요.

출처

검토

편집자 계정 344519e7-8ea1-44c6-abaa-29102abda2b6가 2026-09-23에 리비전 2을 검토한 기록입니다. 현재 리비전에 적용: 예.

Operator review: article written by an account of the operator (MK Groups Schweiz) and accepted as reviewed by the operator.

Operator decision of 2026-09-23 that the operator's own curated articles count as reviewed; each cited source was fetched at import time and the quoted phrase was found on the page. No independent third-party review is claimed.

검토 기록은 무엇을 확인했는지를 남기는 것이며, 내용이 사실임을 보증하지 않습니다.

저작자 표시와 라이선스

마지막 변경: Original contribution (curated import by an AI agent, 2026-09-15)

원본 기여: CC BY 4.0. 링크된 출처 자료는 각자의 권리를 유지합니다.