Frontendová internacionalizace: Komplexní průvodce vícejazyčnou podporou

V dnešním propojeném světě již není tvorba webových aplikací pro globální publikum luxusem, ale nutností. Frontendová internacionalizace (často zkracovaná jako i18n, odvozeno od 18 písmen mezi 'i' a 'n') je proces navrhování a vývoje vaší aplikace tak, aby ji bylo možné přizpůsobit různým jazykům a regionům bez nutnosti technických změn. To jde nad rámec jednoduchého překladu; zahrnuje přizpůsobení uživatelského rozhraní (UI), obsahu a funkcionality tak, aby odpovídaly kulturním a jazykovým očekáváním různých lokalit.

Proč je frontendová internacionalizace důležitá?

Implementace robustní i18n přináší řadu výhod:

• Rozšířený dosah: Vstupte na nové trhy a oslovte výrazně širší publikum tím, že poskytnete obsah v jejich rodném jazyce. Například uvedení produktu na trh ve Španělsku bude mnohem úspěšnější, pokud bude prezentován ve španělštině, nikoli pouze v angličtině.
• Zlepšený uživatelský zážitek: Uživatelé se s větší pravděpodobností zapojí do webové stránky nebo aplikace, která mluví jejich jazykem a respektuje jejich kulturní zvyklosti. To vede ke zvýšené spokojenosti, loajalitě a konverzním poměrům. Představte si uživatele v Japonsku, který narazí na webovou stránku zcela v angličtině. Může mít potíže s porozuměním obsahu a navigací v rozhraní, což vede k frustraci a nakonec k opuštění stránky.
• Posílení reputace značky: Projevení závazku k inkluzivitě a globální dostupnosti posiluje reputaci vaší značky a staví vás do pozice progresivní organizace. Poskytování lokalizovaného obsahu ukazuje respekt k různým kulturám a signalizuje, že si vaše firma váží svých mezinárodních zákazníků.
• Snížení nákladů na podporu: Jasný a srozumitelný obsah snižuje potřebu zákaznické podpory související s jazykovými bariérami. Méně požadavků na podporu znamená nižší provozní náklady a efektivnější pracovní postupy.
• Výhody pro SEO: Lokalizovaný obsah zlepšuje vaši optimalizaci pro vyhledávače (SEO) v různých regionech, což uživatelům usnadňuje nalezení vašich webových stránek v jejich rodném jazyce. Vyhledávače upřednostňují obsah, který je relevantní pro polohu a jazykové nastavení uživatele.

Klíčové pojmy ve frontendové internacionalizaci

Než se ponoříme do technických aspektů, definujme si některé klíčové pojmy:

• Lokalita (Locale): Lokalita identifikuje konkrétní geografickou oblast a jazyk. Obvykle je reprezentována kódem jazyka (např. 'cs' pro češtinu, 'fr' pro francouzštinu) a kódem země (např. 'CZ' pro Českou republiku, 'CA' pro Kanadu). Příklady zahrnují 'cs-CZ', 'fr-FR', 'es-ES', 'de-DE', 'ja-JP' a 'zh-CN'. Lokalita určuje jazyk, formáty data a času, symboly měn a další kulturní konvence.
• Sady zdrojů (překladové soubory): Tyto soubory obsahují překlady všech textových řetězců použitých ve vaší aplikaci. Každá lokalita má svou vlastní sadu zdrojů. Struktura je obvykle pár klíč-hodnota, kde klíč je identifikátor a hodnota je přeložený text pro daný klíč. Tyto soubory jsou často ve formátu JSON.
• Internacionalizace (i18n): Proces navrhování a vývoje aplikace tak, aby ji bylo možné přizpůsobit různým jazykům a regionům. Zahrnuje oddělení logiky aplikace od lokalizovaného obsahu.
• Lokalizace (l10n): Proces přizpůsobení internacionalizované aplikace pro konkrétní lokalitu. Zahrnuje překlad textu, úpravu formátů data a času a處理 další kulturní konvence.

Kroky k implementaci frontendové internacionalizace

Zde je podrobný průvodce implementací i18n ve vaší frontendové aplikaci:

1. Výběr i18n knihovny

Pro různé frontendové frameworky je k dispozici několik vynikajících i18n knihoven. Výběr správné knihovny závisí na specifických požadavcích vašeho projektu a na frameworku, který používáte. Mezi populární volby patří:

• i18next: Velmi populární a všestranná JavaScriptová i18n knihovna, která funguje s různými frameworky (React, Angular, Vue.js atd.) a dokonce i s čistým JavaScriptem. Je známá svou flexibilitou a rozsáhlými funkcemi, včetně pluralizace, kontextových překladů a načítání překladů z různých zdrojů.
• React Intl (FormatJS): Knihovna speciálně navržená pro aplikace v Reactu. Poskytuje komplexní sadu nástrojů pro formátování dat, čísel a měn, stejně jako pro zpracování pluralizace a shody rodů. Je součástí většího projektu FormatJS.
• ngx-translate: Výkonná i18n knihovna pro aplikace v Angularu. Nabízí funkce jako překladové pipes, direktivy a HTTP loadery pro správu překladových souborů. Bezproblémově se integruje se systémem dependency injection v Angularu.
• vue-i18n: Oficiální i18n knihovna pro Vue.js. Poskytuje jednoduché a intuitivní API pro překlad vašich komponent ve Vue.js. Podporuje funkce jako pluralizace, pojmenované formátování a vlastní direktivy.

Při výběru i18n knihovny zvažte tyto faktory:

• Kompatibilita s frameworkem: Ujistěte se, že je knihovna kompatibilní s frameworkem, který používáte (React, Angular, Vue.js atd.).
• Funkce: Zhodnoťte funkce knihovny, jako je pluralizace, formátování data a času, formátování měn a podpora různých formátů překladových souborů.
• Snadnost použití: Vyberte si knihovnu, která je snadno naučitelná a použitelná. Zvažte srozumitelnost dokumentace a dostupnost příkladů.
• Výkon: Zvažte dopad knihovny na výkon vaší aplikace. Některé knihovny mohou být výkonnější než jiné.
• Komunitní podpora: Zkontrolujte komunitní podporu knihovny. Velká a aktivní komunita může poskytnout cennou pomoc a zdroje.

2. Nastavení i18n knihovny

Jakmile si vyberete i18n knihovnu, musíte ji nainstalovat a nakonfigurovat ve svém projektu. Proces nastavení se liší v závislosti na zvolené knihovně. Zde je obecný přehled kroků:

1. Nainstalujte knihovnu: Použijte svůj správce balíčků (npm, yarn nebo pnpm) k instalaci knihovny. Například pro instalaci i18next byste spustili: npm install i18next nebo yarn add i18next.
2. Nakonfigurujte knihovnu: Inicializujte i18n knihovnu s požadovanými nastaveními, jako je výchozí lokalita, umístění vašich překladových souborů a další konfigurační možnosti. To obvykle zahrnuje vytvoření konfiguračního souboru i18n nebo inicializaci knihovny v hlavním souboru vaší aplikace.
3. Načtěte překladové soubory: Načtěte překladové soubory pro každou lokalitu do i18n knihovny. To lze provést pomocí HTTP požadavků, přímým importem souborů nebo použitím vlastního loaderu.
4. Nastavte počáteční lokalitu: Nastavte počáteční lokalitu pro vaši aplikaci. To může být založeno na nastavení prohlížeče uživatele, jeho poloze nebo uživatelské preferenci.

Příklad (použití i18next s Reactem):

Nejprve nainstalujte potřebné balíčky:

            npm install i18next react-i18next i18next-browser-languagedetector i18next-http-backend

            

              
                Copy
              
            
          

Poté vytvořte soubor i18n.js pro konfiguraci i18next:

            import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import HttpApi from 'i18next-http-backend';

i18n
  .use(HttpApi)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    debug: true,
    detection: {
      order: ['localStorage', 'cookie', 'htmlTag', 'queryString', 'navigator'],
      caches: ['localStorage']
    },
    backend: {
      loadPath: '/locales/{{lng}}/translation.json'
    },
    interpolation: {
      escapeValue: false
    }
  });

export default i18n;

            

              
                Copy
              
            
          

Nakonec importujte soubor i18n.js ve vašem hlavním souboru aplikace (např. index.js):

            import './i18n';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    
        
    
);

            

              
                Copy
              
            
          

3. Vytváření sad zdrojů (překladových souborů)

Sady zdrojů jsou srdcem vaší i18n implementace. Obsahují přeložené textové řetězce pro každou lokalitu. Obvykle vytvoříte samostatnou sadu zdrojů pro každý jazyk, který chcete podporovat.

Nejběžnějším formátem pro sady zdrojů je JSON. Každý JSON soubor obsahuje páry klíč-hodnota, kde klíč je identifikátor a hodnota je přeložený text pro daný klíč.

Příklad (en.json - Angličtina):

            {
  "greeting": "Hello, world!",
  "welcome_message": "Welcome to our website.",
  "product_name": "Awesome Product",
  "add_to_cart": "Add to Cart"
}

            

              
                Copy
              
            
          

Příklad (fr.json - Francouzština):

            {
  "greeting": "Bonjour, le monde !",
  "welcome_message": "Bienvenue sur notre site web.",
  "product_name": "Produit Génial",
  "add_to_cart": "Ajouter au panier"
}

            

              
                Copy
              
            
          

Doporučené postupy pro sady zdrojů:

• Používejte smysluplné klíče: Vybírejte klíče, které jsou popisné a snadno srozumitelné. Vyhněte se používání obecných klíčů jako "string1" nebo "text2". Místo toho používejte klíče, které odrážejí význam textu, jako je "greeting" nebo "welcome_message".
• Organizujte své soubory: Uspořádejte své sady zdrojů do logické adresářové struktury. Běžným přístupem je vytvořit samostatný adresář pro každý jazyk (např. locales/en, locales/fr).
• Používejte konzistentní formát: Používejte konzistentní formát pro všechny své sady zdrojů. To usnadňuje správu a údržbu vašich překladů.
• Vyhněte se natvrdo kódovanému textu: Nikdy nekódujte text natvrdo přímo do kódu vaší aplikace. Vždy používejte i18n knihovnu k načtení přeloženého textu ze sad zdrojů.

4. Implementace překladu ve vašich komponentách

Jakmile máte nastavenou i18n knihovnu a vytvořené sady zdrojů, můžete začít s implementací překladu ve svých komponentách. Konkrétní přístup závisí na i18n knihovně, kterou používáte, a na frameworku, se kterým pracujete.

Zde jsou některé běžné techniky:

• Překladová funkce/Hook: Většina i18n knihoven poskytuje funkci nebo hook, který můžete použít k načtení přeloženého textu pro daný klíč. Například v i18next můžete použít funkci t: t('greeting'). V React Intl můžete použít hook useIntl.
• Překladové komponenty: Některé knihovny poskytují komponenty, které můžete použít k obalení textových řetězců a jejich automatickému překladu. Například v React Intl můžete použít komponentu FormattedMessage.
• Pipes/Direktivy: V Angularu můžete použít překladové pipes k překladu textových řetězců přímo ve vašich šablonách. Například můžete použít pipe translate: {{ 'greeting' | translate }}.

Příklad (použití i18next s Reactem):

            import React from 'react';
import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t } = useTranslation();

  return (
    

      
{t('welcome_message')}
      
{t('greeting')}
      {t('add_to_cart')}
    
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

5. Zpracování pluralizace

Pluralizace je proces přizpůsobení textových řetězců různým množstvím. Různé jazyky mají různá pravidla pro pluralizaci. Například angličtina má dvě množné formy (jednotné a množné číslo), zatímco některé jazyky mají složitější pravidla pluralizace.

Většina i18n knihoven poskytuje mechanismy pro zpracování pluralizace. Tyto mechanismy obvykle zahrnují použití speciální syntaxe ve vašich sadách zdrojů k určení různých množných forem pro daný textový řetězec.

Příklad (použití i18next):

en.json:

            {
  "item_count": "{{count}} item",
  "item_count_plural": "{{count}} items"
}

            

              
                Copy
              
            
          

fr.json:

            {
  "item_count": "{{count}} article",
  "item_count_plural": "{{count}} articles"
}

            

              
                Copy
              
            
          

            import React from 'react';
import { useTranslation } from 'react-i18next';

function MyComponent({ count }) {
  const { t } = useTranslation();

  return (
    
{t('item_count', { count: count, plural: count !== 1 })}
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

6. Formátování dat, čísel a měn

Různé lokality mají různé konvence pro formátování dat, čísel a měn. Například formát data ve Spojených státech je obvykle MM/DD/YYYY, zatímco v Evropě je to často DD.MM.YYYY. Podobně symbol měny pro americký dolar je '$', zatímco pro euro je to '€'.

Většina i18n knihoven poskytuje funkce pro formátování dat, čísel a měn podle aktuální lokality. Tyto funkce obvykle používají standard International Components for Unicode (ICU).

Příklad (použití React Intl):

            import React from 'react';
import { useIntl, FormattedDate, FormattedNumber, FormattedCurrency } from 'react-intl';

function MyComponent() {
  const intl = useIntl();

  const currentDate = new Date();
  const price = 1234.56;

  return (
    

      
Current Date: 
      
Number: 
      
Currency: 
    
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

7. Zpracování jazyků psaných zprava doleva (RTL)

Některé jazyky, jako je arabština a hebrejština, se píší zprava doleva. Při tvorbě aplikací pro RTL jazyky musíte zajistit, aby vaše UI bylo zrcadleno, aby odpovídalo směru textu.

Existuje několik technik pro zpracování RTL jazyků:

• Logické vlastnosti CSS: Používejte logické vlastnosti CSS (např. margin-inline-start, margin-inline-end) místo fyzických vlastností (např. margin-left, margin-right). Logické vlastnosti se automaticky přizpůsobí směru textu.
• Vlastnost direction: Použijte vlastnost direction k nastavení směru textu pro celý dokument nebo pro konkrétní prvky. Nastavte vlastnost direction na rtl pro RTL jazyky.
• JavaScriptové knihovny: Používejte JavaScriptové knihovny, které poskytují podporu pro RTL, jako je rtlcss.

Příklad (použití logických vlastností CSS):

            .my-element {
  margin-inline-start: 10px; /* Ekvivalent margin-left v LTR, margin-right v RTL */
  margin-inline-end: 20px;   /* Ekvivalent margin-right v LTR, margin-left v RTL */
}

            

              
                Copy
              
            
          

8. Detekce lokality uživatele

Abyste poskytli nejlepší uživatelský zážitek, musíte detekovat preferovanou lokalitu uživatele. Existuje několik způsobů, jak to udělat:

• Nastavení prohlížeče: Prohlížeč uživatele posílá seznam preferovaných jazyků v hlavičce Accept-Language. Můžete použít JavaScript k přístupu k této hlavičce a určení preferované lokality uživatele.
• Geolokace: Můžete použít geolokaci k určení polohy uživatele a odvození jeho preferované lokality. Tento přístup však není vždy přesný, protože uživatelé se mohou nacházet v regionu, kde se mluví jiným jazykem.
• Uživatelské preference: Umožněte uživatelům ručně si vybrat preferovanou lokalitu v nastavení vaší aplikace. To je nejspolehlivější přístup, protože dává uživatelům úplnou kontrolu nad jejich jazykovými preferencemi. Uložte preferenci lokality uživatele do cookie nebo do local storage.

Příklad (použití JavaScriptu k detekci jazyka prohlížeče):

            const userLocale = navigator.languages && navigator.languages[0]
    || navigator.language
    || navigator.userLanguage;

            

              
                Copy
              
            
          

9. Testování vaší internacionalizované aplikace

Testování je klíčové pro zajištění správného fungování vaší i18n implementace. Měli byste testovat vaši aplikaci v různých lokalitách, abyste ověřili, že text je správně přeložen, data, čísla a měny jsou správně formátovány a UI je přizpůsobeno pro RTL jazyky.

Zde jsou některé strategie testování:

• Manuální testování: Manuálně testujte vaši aplikaci v různých lokalitách změnou jazykového nastavení vašeho prohlížeče nebo použitím přepínače jazyků ve vaší aplikaci.
• Automatizované testování: Používejte nástroje pro automatizované testování k ověření, že text je správně přeložen a UI je přizpůsobeno pro různé lokality.
• Jazykové testování: Nechte rodilé mluvčí zkontrolovat vaše překlady, aby se zajistilo, že jsou přesné a kulturně vhodné.

10. Správa překladů

Správa překladů může být složitý úkol, zejména pro velké aplikace s mnoha jazyky. Zvažte použití systému pro správu překladů (TMS) k zefektivnění překladatelského procesu.

TMS vám může pomoci:

• Ukládat a organizovat vaše překlady: TMS poskytuje centrální úložiště pro všechny vaše překlady.
• Spravovat překladatele: TMS vám umožňuje přidělovat překladatelské úkoly různým překladatelům a sledovat jejich pokrok.
• Automatizovat pracovní postup překladu: TMS může automatizovat mnoho kroků v překladatelském procesu, jako je odesílání požadavků na překlad, revize překladů a integrace překladů do vaší aplikace.
• Zajistit konzistenci: TMS pomáhá zajistit konzistenci napříč vašimi překlady tím, že poskytuje funkce jako překladová paměť a správa terminologie.

Mezi populární TMS řešení patří:

• Transifex
• Phrase (dříve Lokalise)
• Crowdin
• Smartling

Pokročilé techniky internacionalizace

Jakmile máte základy i18n zvládnuté, můžete prozkoumat některé pokročilé techniky k dalšímu vylepšení internacionalizace vaší aplikace:

• Kontextové překlady: Použijte kontext k poskytnutí různých překladů pro stejný klíč na základě kontextu, ve kterém je použit. Například slovo "run" může mít různé významy v závislosti na kontextu (např. "run a marathon" vs. "the program is running").
• Shoda rodů: Zpracujte shodu rodů v jazycích, kde podstatná a přídavná jména mají různé tvary v závislosti na rodu osoby nebo objektu, ke kterému se vztahují.
• Obousměrný text: Podporujte obousměrný text, který kombinuje text psaný zleva doprava a zprava doleva v jednom dokumentu. To je běžné v jazycích jako arabština a hebrejština.
• Interpolace proměnných: Použijte interpolaci proměnných k vkládání dynamických hodnot do vašich překladů. Například můžete použít interpolaci proměnných k vložení jména uživatele nebo aktuálního data do přeložené zprávy.
• Líné načítání překladů: Načítejte překladové soubory na vyžádání, abyste zlepšili výkon vaší aplikace. To je obzvláště užitečné pro velké aplikace s mnoha jazyky.

Časté chyby, kterým se vyhnout

Zde jsou některé časté chyby, kterým se vyhnout při implementaci frontendové internacionalizace:

• Natvrdo kódovaný text: Vyhněte se natvrdo kódovanému textu přímo v kódu vaší aplikace. Vždy používejte i18n knihovnu k načtení přeloženého textu ze sad zdrojů.
• Ignorování pluralizace: Nezapomeňte správně zpracovat pluralizaci v různých jazycích.
• Používání nekonzistentní terminologie: Používejte konzistentní terminologii napříč všemi vašimi překlady. S tím vám může pomoci TMS.
• Nedostatečné testování: Důkladně testujte vaši aplikaci v různých lokalitách, abyste se ujistili, že vše funguje správně.
• Zanedbání podpory RTL: Pokud podporujete RTL jazyky, ujistěte se, že jste podporu RTL správně implementovali.
• Předpoklad, že jedna velikost sedí všem: Pamatujte, že různé kultury mají různá očekávání a preference. Přizpůsobte svou aplikaci tak, aby vyhovovala specifickým potřebám každé lokality. Například koncept osobního prostoru se napříč kulturami velmi liší; návrhy UI by to měly odrážet.

Závěr

Frontendová internacionalizace je klíčovým aspektem tvorby webových aplikací pro globální publikum. Dodržováním kroků uvedených v tomto průvodci můžete vytvořit aplikace, které jsou přístupné, poutavé a kulturně vhodné pro uživatele po celém světě. Investice do i18n není jen o překladu textu; je to o poskytování skutečně lokalizovaného a personalizovaného uživatelského zážitku, který podpoří zapojení, loajalitu a nakonec i úspěch na globálním trhu. Nezapomeňte si vybrat správné nástroje, pečlivě naplánovat implementaci a důkladně testovat, abyste zajistili hladký a efektivní proces internacionalizace. Zvažte nejen jazykové rozdíly, ale také kulturní nuance ve vašem designu a obsahu, abyste vytvořili skutečně inkluzivní a uživatelsky přívětivý zážitek.