Locale tags and language pieces

A locale code in a GT interface is a chip with its flag first and the code in mono after it. Two components draw the flag, and they answer from different data. The language diagrams next door show what localization does to text: width, plural rules, direction, context and script. They are built from HTML text, so the browser shapes Arabic, stacks Devanagari and resolves bidi.

Locale tags and flagsCopy Anchor Link

The plate resolves one locale code with both components. Type any code or pick one of the examples, and switch the host chip between a pill and bare text. The set under the comparison shows LocaleTag across twelve codes in the chosen chip.

LocaleTag reads its own map of 20 languages, and an explicit region in the code wins, so en-GB shows the British flag and zh-Hant resolves through zh. LocaleFlag asks Intl.Locale for the likely region, the CLDR data gt-cloud's own resolver reads. The two agree on most codes. They differ on a few, such as ar, for which LocaleTag shows the flag of Saudi Arabia and LocaleFlag the flag of Egypt. A code neither knows renders with no flag, as tlh does.

Import and propsCopy Anchor Link

import LocaleTag from '@/app/d/toolchain/components/LocaleTag';
import LocaleFlag from '@/components/shared/LocaleFlag';

<span className='chip'>
  <LocaleTag code='ja' />
</span>;
<LocaleFlag locale='pt-BR' />;

Both draw the flag-icons SVG pack through its fi fi-<country> classes, so every platform prints the same flag at text size, and neither ever draws an emoji.

When to use itCopy Anchor Link

Use LocaleTag inside any chip, cell or label that shows a bare locale code. Use LocaleFlag beside a language's name in a selector, where it matches gt-cloud's shared LocaleFlag component. Flags render only through these two. A hand-written fi class fails the gt-ui/no-raw-locale-flags lint, and BRAND.md rules out an emoji flag.

Reduced motion and themesCopy Anchor Link

Neither moves. The flag artwork has its own colors in both themes, and the code takes the ink of its host.

Language diagramsCopy Anchor Link

The plate mounts the Toolchain direction's seven language diagrams one at a time. Sentence width measures one sentence in four locales against the English width, Plurals cycles one count through the plural rules of English, Polish and Japanese, and Right to left mirrors one panel by its dir attribute alone. Context resolves "Save" to two German verbs, Expansion charts how much room each locale needs, Scripts sets the word for language in eight writing systems, and One term prints one interface term in every locale it ships in.

Accent spends the accent hue on the diagram's one accent element, and Replay remounts the diagram, which restarts its loop.

Import and propsCopy Anchor Link

import PluralForms from '@/app/d/toolchain/diagrams/lang/PluralForms';

<PluralForms accent title='One count against the plural rules of English, Polish and Japanese' />;

Every diagram takes the same three props, the LangProps contract in src/app/d/toolchain/diagrams/lang/lang.ts.

When to use itCopy Anchor Link

Use a language diagram to make one claim about localization in a feature cell or a docs page, with the claim written beside it. Each diagram is complete at rest, so a still or a screenshot reads on its own.

Reduced motion and themesCopy Anchor Link

Under reduced motion every diagram freezes at its most legible frame. The ink derives from currentColor and the accent from --iso-accent, so the diagrams follow the docs theme, and the same ancestor themes the isometric drawings.

TrapsCopy Anchor Link

• The fallback face next/font writes for the Inter binding is local("Arial") with size-adjust: 107.89%. Arial has Hebrew and Arabic glyphs, so in any stack that starts with the Inter variable those two scripts render in Arial and never reach a script face listed after it. CJK and Devanagari are absent from Arial and fall through to the listed faces. Set an Arabic or Hebrew stack on its own rule, a :lang() selector or a class, with no Inter variable in front, as the deck's .lang .ar does (The correct Inter in practice).
• The canvas renderer of lottie-web stops drawing a frame at a character missing from the animation's glyph list, and no layer after it draws. The \r that lottie-web writes where it wraps box text counts as such a character, so a longer translation can break where the source did not. The error surfaces only as the animation's error event and never in the console. Give every drawable character an empty glyph entry, plus \r and \u0003 (Lottie on canvas).