Wie zeige ich Schriftnamen wie Lateinisch, Kyrillisch, Arabisch an?

Einführung

Eine Schrift ist ein Schriftsystem. Lateinisch ist die Schrift, die für Englisch, Französisch und Spanisch verwendet wird. Kyrillisch ist die Schrift, die für Russisch, Bulgarisch und Ukrainisch verwendet wird. Arabisch ist die Schrift, die für Arabisch, Persisch und Urdu verwendet wird. Schriften unterscheiden sich von Sprachen, da dieselbe Sprache in mehreren Schriften geschrieben werden kann. Serbisch verwendet sowohl kyrillische als auch lateinische Schriften. Benutzer in Serbien wählen, welche Schrift sie bevorzugen.

Wenn Sie Sprachauswahlen, Schriftartenwähler oder Texteingabesteuerelemente erstellen, müssen Sie Schriftnamen anzeigen, damit Benutzer Schriftsysteme identifizieren können. Die Intl.DisplayNames-API konvertiert Schriftcodes in lokalisierte, menschenlesbare Namen, ohne dass Sie Übersetzungstabellen pflegen müssen.

Schriften und Sprachen verstehen

Schriften und Sprachen sind nicht dasselbe. Eine Sprache ist das, was Menschen sprechen. Eine Schrift ist, wie Menschen sie schreiben.

Englisch ist eine Sprache. Lateinisch ist eine Schrift. Englisch verwendet die lateinische Schrift, aber das tun auch Dutzende anderer Sprachen, darunter Spanisch, Französisch, Deutsch, Vietnamesisch und Türkisch.

Serbisch ist eine Sprache, die in zwei Schriften geschrieben werden kann. Serbisch in kyrillischer Schrift sieht aus wie "Српски". Serbisch in lateinischer Schrift sieht aus wie "Srpski". Beide repräsentieren dieselbe Sprache mit denselben Wörtern und derselben Grammatik. Der Unterschied liegt nur im Schriftsystem.

Chinesisch hat zwei gängige Schriftvarianten. Vereinfachtes Chinesisch verwendet vereinfachte Han-Zeichen. Traditionelles Chinesisch verwendet traditionelle Han-Zeichen. Derselbe Satz erscheint unterschiedlich, je nachdem, welche Schrift Sie verwenden.

Diese Unterscheidung ist wichtig beim Erstellen von Benutzeroberflächen. Ein serbischer Benutzer bevorzugt möglicherweise kyrillischen Text gegenüber lateinischem Text. Ein chinesischer Benutzer muss zwischen vereinfachten und traditionellen Zeichen wählen. Ihre Benutzeroberfläche muss Schriftnamen anzeigen, damit Benutzer diese Auswahl treffen können.

Das Problem mit fest codierten Schriftnamen

Sie können eine Lookup-Tabelle erstellen, die Schriftcodes auf Schriftnamen abbildet.

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

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

Dieser Ansatz funktioniert nur für englischsprachige Personen. Benutzer, die andere Sprachen sprechen, sehen englische Schriftnamen, die sie möglicherweise nicht verstehen. Sie benötigen Übersetzungen für jede Sprache, die Sie unterstützen.

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

Dies wird schnell nicht mehr wartbar. Jede neue Sprache erfordert einen vollständigen Satz von Übersetzungen. Jede neue Schrift erfordert Einträge in jeder Sprache. Sie benötigen eine bessere Lösung.

Verwendung von Intl.DisplayNames zum Abrufen von Schriftnamen

Der Intl.DisplayNames-Konstruktor erstellt einen Formatter, der Schriftcodes in menschenlesbare Namen umwandelt. Sie geben ein Gebietsschema an und setzen den Typ auf "script".

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

Das erste Argument ist ein Array von Gebietsschema-Identifikatoren. Das zweite Argument ist ein Optionsobjekt, bei dem type: "script" dem Formatter mitteilt, dass Sie Schriftnamen möchten. Die of()-Methode nimmt einen Schriftcode entgegen und gibt dessen Namen zurück.

Schriftcodes folgen dem ISO 15924-Standard. Jede Schrift hat einen vierstelligen Code, wobei der erste Buchstabe großgeschrieben und die verbleibenden drei Buchstaben kleingeschrieben sind. Lateinisch ist Latn. Kyrillisch ist Cyrl. Arabisch ist 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"

Der Formatter übernimmt die gesamte Komplexität der Verwaltung von Schriftnamen-Übersetzungen. Sie müssen nur den Schriftcode angeben.

Gängige Schriftcodes

Der ISO 15924-Standard definiert Codes für über 160 Schriftsysteme. Dies sind die am häufigsten verwendeten Codes.

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"

Latin umfasst die meisten westeuropäischen Sprachen. Cyrillic umfasst Russisch, Bulgarisch, Ukrainisch und andere slawische Sprachen. Arabic umfasst Arabisch, Persisch und Urdu. Han umfasst Chinesisch, wobei Hans für vereinfachtes Chinesisch und Hant für traditionelles Chinesisch steht. Hangul umfasst Koreanisch. Hiragana und Katakana sind japanische Schriftsysteme.

Anzeige von Schriftnamen in verschiedenen Locales

Schriftnamen werden basierend auf dem Anzeigelocale lokalisiert. Erstellen Sie Formatter mit verschiedenen Locales, um Namen in verschiedenen Sprachen anzuzeigen.

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"));
// "ラテン文字"

Jeder Formatter gibt den Schriftnamen in seinem Anzeigelocale zurück. Dies übernimmt die gesamte Komplexität der Verwaltung von Schriftnamenübersetzungen.

Das gleiche Muster funktioniert für jeden Schriftcode.

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"));
// "阿拉伯文"

Der Formatter wendet automatisch die korrekten linguistischen Konventionen für jede Sprache an.

Erstellen eines Schriftselektors für Sprachvarianten

Einige Sprachen bieten Benutzern eine Auswahl an Schriftsystemen. Serbisch kann in kyrillischer oder lateinischer Schrift geschrieben werden. Chinesisch kann in vereinfachten oder traditionellen Zeichen geschrieben werden. Sie müssen diese Optionen anzeigen, damit Benutzer wählen können.

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" }
// ]

Diese Funktion gibt Schriftoptionen in der Oberflächensprache des Benutzers zurück. Serbische Benutzer sehen Optionen für kyrillische und lateinische Schrift. Chinesische Benutzer sehen Optionen für vereinfachte und traditionelle Schrift. Die Namen erscheinen in der Sprache, die der Benutzer versteht.

Anzeige vollständiger Locale-Identifikatoren mit Schriftinformationen

Locale-Identifikatoren können Schriftcodes enthalten, um zwischen Schriftsystemen zu unterscheiden. Das Format ist language-script-region, wie sr-Cyrl-RS für Serbisch in kyrillischer Schrift in Serbien oder zh-Hans-CN für vereinfachtes Chinesisch in China.

Wenn Sie diese Locale-Bezeichner anzeigen, extrahieren Sie den Skriptcode und wandeln Sie ihn in einen lesbaren Namen um.

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)"

Dieses Muster macht Locale-Bezeichner für Menschen verständlich, indem es Sprach- und Skriptnamen kombiniert. Nutzer sehen "Serbisch (Kyrillisch)" statt "sr-Cyrl".

Einen Schriftauswahl-Dialog mit Skriptnamen erstellen

Schriftauswahl-Oberflächen gruppieren Schriftarten häufig nach den unterstützten Schriftsystemen. Sie müssen Skriptnamen anzeigen, damit Nutzer verstehen, welche Schriftsysteme jede Schriftart abdeckt.

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"]
//   }
// ]

Dadurch entsteht eine Liste von Schriftarten mit ihren unterstützten Schriftsystemen in lesbarer Form. Nutzer können Schriftarten basierend auf den benötigten Schriftsystemen auswählen.

Verfügbare Eingabemethoden nach Schriftsystem anzeigen

Betriebssysteme und Browser bieten Eingabemethoden für verschiedene Schriftsysteme an. Eine japanische Eingabemethode wandelt lateinische Zeichen in Hiragana, Katakana oder Kanji um. Eine chinesische Eingabemethode wandelt Pinyin in vereinfachte oder traditionelle chinesische Zeichen um. Sie können verfügbare Eingabemethoden mit ihren Skriptnamen anzeigen.

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: "ヘブライ文字" }
// ]

Dadurch werden die Namen der Eingabemethoden in der Sprache des Nutzers angezeigt. Nutzer sehen "Hiragana", wenn die Oberfläche auf Englisch ist, und "ひらがな", wenn sie auf Japanisch ist.

Groß- und Kleinschreibung von Skriptcodes verstehen

Skriptcodes folgen einem bestimmten Groß-/Kleinschreibemuster. Der erste Buchstabe ist groß, die restlichen drei Buchstaben sind klein. Latn ist korrekt. LATN, latn und LaTn entsprechen nicht dem Standard.

Die Methode of() akzeptiert Skriptcodes unabhängig von der Groß-/Kleinschreibung.

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"

Der Formatter verarbeitet alle Varianten korrekt. Die Verwendung des standardisierten Groß-/Kleinschreibemusters macht Ihren Code jedoch lesbarer und konsistent mit dem ISO-15924-Standard.

Umgang mit Fallback-Locales

Der Intl.DisplayNames-Konstruktor akzeptiert ein Array von Locales. Wenn das erste Locale nicht verfügbar ist, greift der Formatter auf das nächste Locale im Array zurück.

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

Der Formatter versucht zuerst "xx-XX", das nicht existiert, und greift dann auf "en" zurück. Dies stellt sicher, dass Ihr Code auch dann funktioniert, wenn das angeforderte Locale nicht verfügbar ist.

Sie können mit der Methode resolvedOptions() überprüfen, welches Locale der Formatter tatsächlich verwendet.

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

Dies zeigt, dass der Formatter nach dem Fallback auf Englisch aufgelöst wurde.

Aufbau eines mehrsprachigen Content-Management-Systems

Content-Management-Systeme, die mehrere Schriftsysteme unterstützen, müssen anzeigen, welche Schriftsysteme für jeden Inhalt verfügbar sind. Sie können Schriftsystemnamen anzeigen, um Content-Editoren bei der Auswahl der richtigen Version zu unterstützen.

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" }
// ]

Dieses Muster hilft Content-Editoren zu sehen, welche Schriftsystemversionen existieren, und zwischen ihnen zu navigieren.

Browser-Unterstützung

Die Intl.DisplayNames-API mit Schriftsystem-Typ-Unterstützung ist in allen modernen Browsern verfügbar. Sie wird seit März 2021 in allen wichtigen Browsern einschließlich Chrome, Firefox, Safari und Edge unterstützt.

Sie können überprüfen, ob die API verfügbar ist, bevor Sie sie verwenden.

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");
}

Für ältere Browser müssen Sie einen Fallback bereitstellen oder ein Polyfill verwenden. Ein einfacher Fallback verwendet ein fest codiertes Mapping von Schriftsystem-Codes zu Namen.

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"

Dies stellt sicher, dass Ihr Code auch in Browsern ohne Intl.DisplayNames-Unterstützung funktioniert, obwohl Sie die automatischen Lokalisierungsfunktionen verlieren.