Comment afficher les noms de systèmes d'écriture comme latin, cyrillique, arabe ?

Introduction

Un système d'écriture est un système de notation écrite. Le latin est le système d'écriture utilisé pour l'anglais, le français et l'espagnol. Le cyrillique est le système d'écriture utilisé pour le russe, le bulgare et l'ukrainien. L'arabe est le système d'écriture utilisé pour l'arabe, le persan et l'ourdou. Les systèmes d'écriture diffèrent des langues car une même langue peut être écrite dans plusieurs systèmes d'écriture. Le serbe utilise à la fois les systèmes d'écriture cyrillique et latin. Les utilisateurs en Serbie choisissent le système d'écriture qu'ils préfèrent.

Lorsque vous créez des sélecteurs de langue, des sélecteurs de police ou des contrôles de saisie de texte, vous devez afficher les noms des systèmes d'écriture afin que les utilisateurs puissent identifier les systèmes d'écriture. L'API Intl.DisplayNames convertit les codes de systèmes d'écriture en noms localisés et lisibles sans que vous ayez besoin de maintenir des tables de traduction.

Comprendre les systèmes d'écriture et les langues

Les systèmes d'écriture et les langues ne sont pas la même chose. Une langue est ce que les gens parlent. Un système d'écriture est la façon dont les gens l'écrivent.

L'anglais est une langue. Le latin est un système d'écriture. L'anglais utilise le système d'écriture latin, mais des dizaines d'autres langues l'utilisent également, notamment l'espagnol, le français, l'allemand, le vietnamien et le turc.

Le serbe est une langue qui peut être écrite dans deux systèmes d'écriture. Le serbe écrit en cyrillique ressemble à « Српски ». Le serbe écrit en latin ressemble à « Srpski ». Les deux représentent la même langue avec les mêmes mots et la même grammaire. La différence réside uniquement dans le système d'écriture.

Le chinois possède deux variantes de systèmes d'écriture courantes. Le chinois simplifié utilise des caractères han simplifiés. Le chinois traditionnel utilise des caractères han traditionnels. La même phrase apparaît différemment selon le système d'écriture que vous utilisez.

Cette distinction est importante lors de la création d'interfaces. Un utilisateur serbe peut préférer le texte en cyrillique plutôt qu'en latin. Un utilisateur chinois doit choisir entre les caractères simplifiés et traditionnels. Votre interface doit afficher les noms des systèmes d'écriture afin que les utilisateurs puissent faire ces choix.

Le problème du codage en dur des noms de systèmes d'écriture

Vous pouvez créer une table de correspondance qui associe les codes de systèmes d'écriture à leurs noms.

const scriptNames = {
  Latn: "Latin",
  Cyrl: "Cyrillic",
  Arab: "Arabic",
  Hans: "Simplified Chinese",
  Hant: "Traditional Chinese"
};

console.log(scriptNames.Latn);
// "Latin"

Cette approche ne fonctionne que pour les anglophones. Les utilisateurs qui parlent d'autres langues voient des noms de systèmes d'écriture en anglais qu'ils peuvent ne pas comprendre. Vous avez besoin de traductions pour chaque langue que vous prenez en charge.

const scriptNames = {
  en: {
    Latn: "Latin",
    Cyrl: "Cyrillic",
    Arab: "Arabic"
  },
  es: {
    Latn: "latino",
    Cyrl: "cirílico",
    Arab: "árabe"
  },
  fr: {
    Latn: "latin",
    Cyrl: "cyrillique",
    Arab: "arabe"
  }
};

Cela devient rapidement impossible à maintenir. Chaque nouvelle langue nécessite un ensemble complet de traductions. Chaque nouveau système d'écriture nécessite des entrées dans chaque langue. Vous avez besoin d'une meilleure solution.

Utiliser Intl.DisplayNames pour obtenir les noms de systèmes d'écriture

Le constructeur Intl.DisplayNames crée un formateur qui convertit les codes de systèmes d'écriture en noms lisibles par l'homme. Vous spécifiez une locale et définissez le type sur "script".

const names = new Intl.DisplayNames(["en"], { type: "script" });
console.log(names.of("Latn"));
// "Latin"

Le premier argument est un tableau d'identifiants de locale. Le deuxième argument est un objet d'options où type: "script" indique au formateur que vous souhaitez des noms de systèmes d'écriture. La méthode of() prend un code de système d'écriture et renvoie son nom.

Les codes de systèmes d'écriture suivent la norme ISO 15924. Chaque système d'écriture possède un code de quatre lettres avec la première lettre en majuscule et les trois lettres restantes en minuscules. Le latin est Latn. Le cyrillique est Cyrl. L'arabe est Arab.

const names = new Intl.DisplayNames(["en"], { type: "script" });

console.log(names.of("Latn"));
// "Latin"

console.log(names.of("Cyrl"));
// "Cyrillic"

console.log(names.of("Arab"));
// "Arabic"

console.log(names.of("Hani"));
// "Han"

console.log(names.of("Hira"));
// "Hiragana"

console.log(names.of("Kana"));
// "Katakana"

Le formateur gère toute la complexité de la maintenance des traductions des noms de systèmes d'écriture. Vous devez uniquement fournir le code du système d'écriture.

Codes de script courants

La norme ISO 15924 définit des codes pour plus de 160 scripts. Voici les codes les plus couramment utilisés.

const names = new Intl.DisplayNames(["en"], { type: "script" });

console.log(names.of("Latn"));
// "Latin"

console.log(names.of("Cyrl"));
// "Cyrillic"

console.log(names.of("Arab"));
// "Arabic"

console.log(names.of("Hebr"));
// "Hebrew"

console.log(names.of("Deva"));
// "Devanagari"

console.log(names.of("Thai"));
// "Thai"

console.log(names.of("Hani"));
// "Han"

console.log(names.of("Hans"));
// "Simplified Han"

console.log(names.of("Hant"));
// "Traditional Han"

console.log(names.of("Hang"));
// "Hangul"

console.log(names.of("Hira"));
// "Hiragana"

console.log(names.of("Kana"));
// "Katakana"

console.log(names.of("Beng"));
// "Bengali"

console.log(names.of("Grek"));
// "Greek"

Le latin couvre la plupart des langues d'Europe occidentale. Le cyrillique couvre le russe, le bulgare, l'ukrainien et d'autres langues slaves. L'arabe couvre l'arabe, le persan et l'ourdou. Le han couvre le chinois, avec hans pour le chinois simplifié et hant pour le chinois traditionnel. Le hangul couvre le coréen. Les hiragana et katakana sont des scripts japonais.

Affichage des noms de scripts dans différentes locales

Les noms de scripts se localisent en fonction de la locale d'affichage. Créez des formateurs avec différentes locales pour voir les noms dans différentes langues.

const enNames = new Intl.DisplayNames(["en"], { type: "script" });
const esNames = new Intl.DisplayNames(["es"], { type: "script" });
const frNames = new Intl.DisplayNames(["fr"], { type: "script" });
const jaNames = new Intl.DisplayNames(["ja"], { type: "script" });

console.log(enNames.of("Latn"));
// "Latin"

console.log(esNames.of("Latn"));
// "latino"

console.log(frNames.of("Latn"));
// "latin"

console.log(jaNames.of("Latn"));
// "ラテン文字"

Chaque formateur renvoie le nom du script dans sa locale d'affichage. Cela gère toute la complexité de la maintenance des traductions des noms de scripts.

Le même modèle fonctionne pour n'importe quel code de script.

const enNames = new Intl.DisplayNames(["en"], { type: "script" });
const deNames = new Intl.DisplayNames(["de"], { type: "script" });
const zhNames = new Intl.DisplayNames(["zh"], { type: "script" });

console.log(enNames.of("Cyrl"));
// "Cyrillic"

console.log(deNames.of("Cyrl"));
// "Kyrillisch"

console.log(zhNames.of("Cyrl"));
// "西里尔文"

console.log(enNames.of("Arab"));
// "Arabic"

console.log(deNames.of("Arab"));
// "Arabisch"

console.log(zhNames.of("Arab"));
// "阿拉伯文"

Le formateur applique automatiquement les conventions linguistiques appropriées pour chaque langue.

Création d'un sélecteur de script pour les variantes linguistiques

Certaines langues offrent aux utilisateurs un choix de scripts. Le serbe peut s'écrire en cyrillique ou en latin. Le chinois peut s'écrire en caractères simplifiés ou traditionnels. Vous devez afficher ces options pour que les utilisateurs puissent choisir.

function getScriptOptions(language, userLocale) {
  const names = new Intl.DisplayNames([userLocale], { type: "script" });

  if (language === "sr") {
    return [
      { code: "Cyrl", name: names.of("Cyrl") },
      { code: "Latn", name: names.of("Latn") }
    ];
  }

  if (language === "zh") {
    return [
      { code: "Hans", name: names.of("Hans") },
      { code: "Hant", name: names.of("Hant") }
    ];
  }

  return [];
}

console.log(getScriptOptions("sr", "en"));
// [
//   { code: "Cyrl", name: "Cyrillic" },
//   { code: "Latn", name: "Latin" }
// ]

console.log(getScriptOptions("zh", "en"));
// [
//   { code: "Hans", name: "Simplified Han" },
//   { code: "Hant", name: "Traditional Han" }
// ]

console.log(getScriptOptions("zh", "es"));
// [
//   { code: "Hans", name: "han simplificado" },
//   { code: "Hant", name: "han tradicional" }
// ]

Cette fonction renvoie les options de script dans la langue d'interface de l'utilisateur. Les utilisateurs serbes voient les options pour les scripts cyrillique et latin. Les utilisateurs chinois voient les options pour les scripts simplifiés et traditionnels. Les noms apparaissent dans la langue que l'utilisateur comprend.

Affichage des identifiants de locale complets avec les informations de script

Les identifiants de locale peuvent inclure des codes de script pour distinguer les systèmes d'écriture. Le format est language-script-region, comme sr-Cyrl-RS pour le serbe écrit en cyrillique en Serbie ou zh-Hans-CN pour le chinois simplifié en Chine.

Lorsque vous affichez ces identifiants de locale, extrayez le code d'écriture et convertissez-le en un nom lisible.

function parseLocaleWithScript(locale) {
  const parts = locale.split("-");

  if (parts.length < 2) {
    return null;
  }

  const [language, script] = parts;

  if (script.length === 4) {
    return {
      language,
      script: script.charAt(0).toUpperCase() + script.slice(1).toLowerCase()
    };
  }

  return null;
}

function formatLocaleWithScriptName(locale, displayLocale) {
  const parsed = parseLocaleWithScript(locale);

  if (!parsed) {
    return locale;
  }

  const languageNames = new Intl.DisplayNames([displayLocale], {
    type: "language"
  });
  const scriptNames = new Intl.DisplayNames([displayLocale], { type: "script" });

  const languageName = languageNames.of(parsed.language);
  const scriptName = scriptNames.of(parsed.script);

  return `${languageName} (${scriptName})`;
}

console.log(formatLocaleWithScriptName("sr-Cyrl", "en"));
// "Serbian (Cyrillic)"

console.log(formatLocaleWithScriptName("sr-Latn", "en"));
// "Serbian (Latin)"

console.log(formatLocaleWithScriptName("zh-Hans", "en"));
// "Chinese (Simplified Han)"

console.log(formatLocaleWithScriptName("zh-Hant", "en"));
// "Chinese (Traditional Han)"

console.log(formatLocaleWithScriptName("sr-Cyrl", "es"));
// "serbio (cirílico)"

Ce modèle rend les identifiants de locale lisibles par l'humain en combinant les noms de langues avec les noms d'écritures. Les utilisateurs voient « Serbe (cyrillique) » au lieu de « sr-Cyrl ».

Créer un sélecteur de polices avec les noms d'écritures

Les interfaces de sélection de polices regroupent souvent les polices selon les écritures qu'elles prennent en charge. Vous devez afficher les noms d'écritures pour que les utilisateurs comprennent quelles écritures chaque police couvre.

function createFontOptions() {
  const fonts = [
    {
      name: "Arial",
      scripts: ["Latn", "Cyrl", "Grek", "Hebr", "Arab"]
    },
    {
      name: "Noto Sans CJK",
      scripts: ["Hans", "Hant", "Hira", "Kana", "Hang"]
    },
    {
      name: "Noto Sans Devanagari",
      scripts: ["Deva"]
    }
  ];

  const names = new Intl.DisplayNames(["en"], { type: "script" });

  return fonts.map((font) => ({
    name: font.name,
    scripts: font.scripts.map((code) => names.of(code))
  }));
}

console.log(createFontOptions());
// [
//   {
//     name: "Arial",
//     scripts: ["Latin", "Cyrillic", "Greek", "Hebrew", "Arabic"]
//   },
//   {
//     name: "Noto Sans CJK",
//     scripts: ["Simplified Han", "Traditional Han", "Hiragana", "Katakana", "Hangul"]
//   },
//   {
//     name: "Noto Sans Devanagari",
//     scripts: ["Devanagari"]
//   }
// ]

Cela crée une liste de polices avec leurs écritures prises en charge sous forme lisible par l'humain. Les utilisateurs peuvent choisir des polices en fonction des systèmes d'écriture dont ils ont besoin.

Afficher les méthodes de saisie disponibles par écriture

Les systèmes d'exploitation et les navigateurs fournissent des méthodes de saisie pour différentes écritures. Une méthode de saisie japonaise convertit les caractères latins en hiragana, katakana ou kanji. Une méthode de saisie chinoise convertit le pinyin en caractères chinois simplifiés ou traditionnels. Vous pouvez afficher les méthodes de saisie disponibles avec leurs noms d'écritures.

function getInputMethods(userLocale) {
  const inputMethods = [
    { id: "latin-ime", script: "Latn" },
    { id: "japanese-ime", script: "Hira" },
    { id: "chinese-pinyin-simplified", script: "Hans" },
    { id: "chinese-pinyin-traditional", script: "Hant" },
    { id: "korean-ime", script: "Hang" },
    { id: "arabic-ime", script: "Arab" },
    { id: "hebrew-ime", script: "Hebr" }
  ];

  const names = new Intl.DisplayNames([userLocale], { type: "script" });

  return inputMethods.map((method) => ({
    id: method.id,
    name: names.of(method.script)
  }));
}

console.log(getInputMethods("en"));
// [
//   { id: "latin-ime", name: "Latin" },
//   { id: "japanese-ime", name: "Hiragana" },
//   { id: "chinese-pinyin-simplified", name: "Simplified Han" },
//   { id: "chinese-pinyin-traditional", name: "Traditional Han" },
//   { id: "korean-ime", name: "Hangul" },
//   { id: "arabic-ime", name: "Arabic" },
//   { id: "hebrew-ime", name: "Hebrew" }
// ]

console.log(getInputMethods("ja"));
// [
//   { id: "latin-ime", name: "ラテン文字" },
//   { id: "japanese-ime", name: "ひらがな" },
//   { id: "chinese-pinyin-simplified", name: "簡体字" },
//   { id: "chinese-pinyin-traditional", name: "繁体字" },
//   { id: "korean-ime", name: "ハングル" },
//   { id: "arabic-ime", name: "アラビア文字" },
//   { id: "hebrew-ime", name: "ヘブライ文字" }
// ]

Cela affiche les noms des méthodes de saisie dans la langue de l'utilisateur. Les utilisateurs voient « Hiragana » lorsque l'interface est en anglais et « ひらがな » lorsque l'interface est en japonais.

Comprendre la capitalisation des codes d'écriture

Les codes d'écriture suivent un modèle de capitalisation spécifique. La première lettre est en majuscule. Les trois lettres restantes sont en minuscules. Latn est correct. LATN, latn et LaTn ne sont pas standard.

La méthode of() accepte les codes d'écriture quelle que soit la capitalisation.

const names = new Intl.DisplayNames(["en"], { type: "script" });

console.log(names.of("Latn"));
// "Latin"

console.log(names.of("LATN"));
// "Latin"

console.log(names.of("latn"));
// "Latin"

console.log(names.of("LaTn"));
// "Latin"

Le formateur gère correctement toutes les variations. Cependant, l'utilisation du modèle de capitalisation standard rend votre code plus lisible et cohérent avec la norme ISO 15924.

Gestion des locales de secours

Le constructeur Intl.DisplayNames accepte un tableau de locales. Si la première locale n'est pas disponible, le formateur bascule vers la locale suivante dans le tableau.

const names = new Intl.DisplayNames(["xx-XX", "en"], { type: "script" });
console.log(names.of("Latn"));
// "Latin"

Le formateur essaie d'abord "xx-XX", qui n'existe pas, puis bascule vers "en". Cela garantit que votre code fonctionne même lorsque la locale demandée n'est pas disponible.

Vous pouvez vérifier quelle locale le formateur utilise réellement avec la méthode resolvedOptions().

const names = new Intl.DisplayNames(["xx-XX", "en"], { type: "script" });
console.log(names.resolvedOptions().locale);
// "en"

Cela montre que le formateur a basculé vers l'anglais après le repli.

Création d'un système de gestion de contenu multilingue

Les systèmes de gestion de contenu qui prennent en charge plusieurs systèmes d'écriture doivent indiquer quels systèmes sont disponibles pour chaque élément de contenu. Vous pouvez afficher les noms des systèmes d'écriture pour aider les éditeurs de contenu à choisir la version correcte.

function getContentVersions(contentId, userLocale) {
  const versions = [
    { script: "Latn", url: `/content/${contentId}/latn` },
    { script: "Cyrl", url: `/content/${contentId}/cyrl` },
    { script: "Arab", url: `/content/${contentId}/arab` }
  ];

  const names = new Intl.DisplayNames([userLocale], { type: "script" });

  return versions.map((version) => ({
    script: version.script,
    name: names.of(version.script),
    url: version.url
  }));
}

console.log(getContentVersions("article-123", "en"));
// [
//   { script: "Latn", name: "Latin", url: "/content/article-123/latn" },
//   { script: "Cyrl", name: "Cyrillic", url: "/content/article-123/cyrl" },
//   { script: "Arab", name: "Arabic", url: "/content/article-123/arab" }
// ]

Ce modèle aide les éditeurs de contenu à voir quelles versions de systèmes d'écriture existent et à naviguer entre elles.

Compatibilité des navigateurs

L'API Intl.DisplayNames avec prise en charge du type de système d'écriture est disponible dans tous les navigateurs modernes. Elle est prise en charge depuis mars 2021 dans les principaux navigateurs, notamment Chrome, Firefox, Safari et Edge.

Vous pouvez vérifier si l'API est disponible avant de l'utiliser.

if (typeof Intl.DisplayNames !== "undefined") {
  const names = new Intl.DisplayNames(["en"], { type: "script" });
  console.log(names.of("Latn"));
} else {
  console.log("Intl.DisplayNames is not supported");
}

Pour les navigateurs plus anciens, vous devez fournir une solution de secours ou utiliser un polyfill. Une solution de secours simple utilise une correspondance codée en dur entre les codes de systèmes d'écriture et leurs noms.

function getScriptName(code, locale) {
  if (typeof Intl.DisplayNames !== "undefined") {
    const names = new Intl.DisplayNames([locale], { type: "script" });
    return names.of(code);
  }

  const fallbackNames = {
    Latn: "Latin",
    Cyrl: "Cyrillic",
    Arab: "Arabic",
    Hans: "Simplified Han",
    Hant: "Traditional Han"
  };

  return fallbackNames[code] || code;
}

console.log(getScriptName("Latn", "en"));
// "Latin"

Cela garantit que votre code fonctionne même dans les navigateurs sans prise en charge de Intl.DisplayNames, bien que vous perdiez les fonctionnalités de localisation automatique.