Çok dilli arayüzler ve yerelleştirme

1) İlkeler

1. Dil deri değildir. Metinler, formatlar, yazının yönü, çizimler, yasal bloklar ve hatta navigasyon değişiyor.
2. Önce anahtarlar, sonra mesajlar. Semantik anahtarları ve parametreleri yapılandırın - çeviriler daha sonra gelir.
3. Psödolokalizasyon - çıkıştan önce. Catch taşmaları, "sert dikilmiş" çizgiler ve gizli anglicisms.
4. Geri dönüşler tahmin edilebilir. 'ru-UA - ru - en'. "Sessiz" başarısızlık yok.
5. Güvenlik. Sterilizasyon olmadan çeviriden DOM'a HTML yok; Yer tutucular yalnızca konumsal/isimlidir.
6. A11y-equivalence. Alt metinler, arya etiketleri, kısaltmalar - her şey yerelleştirilmiştir.

2) Yerel strateji

Sistem kodları: 'language-REGION' (örneğin, 'pt-BR','en-GB ').
Yerel ayar seçimi: kullanıcı profili _ ayarı; yedek - tarayıcı/geo ile otomatik algılama (onay ile).
Çok bölgeli: Dili hukuktan ayırır:'es-ES '≠'es-MX' (farklı yasalar/ödemeler/sınırlar).
Folback zinciri: UI en yakın dildir; yasal metinler - kesinlikle bölgesel versiyon, aksi takdirde blok ve onay talebi.

3) Bilgi mimarisi ve içeriği

Anahtar alanlar: gezinme, CTA, hatalar, formlar, istemler, bildirimler, harfler, PDF/afişler.
Metin uzantıları: + %30-40 genişlik rezervi (Almanca/Fince). Düzen - elastik (esnek/ızgara).
Ton/stil: marka sözlüğü (terimler, kritik yerlerde "argo çeviri" olmadan).
Görüntüler/simgeler: resimlerdeki metinden kaçının; Gerekirse, yerel versiyonları saklayın.

4) i18n mimarisi

Anahtarlar: 'domain. bölümü. Niyet '-' ödemeleri. geri çekilin. hata. insufficient_funds'.
Yer tutucular: adlandırılmış ('{miktar}', '{dakika}'), satır dışında biçimlendirilmiş.
ICU MessageFormat: çokluk, cinsiyet, uyum.
Dosyalar: yerel ve etki alanlarına göre ('/i18n/{ locale }/{ domain} .json '), parçalar tembel olarak yüklenir.
Server/client: universal render, locale in cookie + HTTP-Vary.

json
{
"betslip": {
"placed": "Ставка на сумму {amount} {currency} принята",
"timeout": "Ожидаем подтверждение… ~{seconds, plural, one {# сек} few {# сек} many {# сек} other {# сек}}"
}
}

5) Biçimlendirme: sayılar, tarihler, para birimleri, birimler

js const nf = new Intl.NumberFormat('uk-UA', { style:'currency', currency:'UAH' });
nf.format(2000); // 2 000,00 ₴

const df = new Intl.DateTimeFormat('tr-TR', { dateStyle:'medium', timeStyle:'short' });
df.format(new Date());

const pl = new Intl.PluralRules('ru-RU');

Küçük birimler: Tutarları sent/kopek olarak tutun; İstemcide format.
Göreceli zaman: 'Intl. RelativeTimeFormat '.
Birimler: 'Intl. NumberFormat ({style: 'unit', unit: 'meter'}) '.
Takvim/hafta: Haftanın 1. günü ve tarih biçimi - yerel ayarlara göre.

6) RTL ve yazma yönü

Destek'dir = 'rtl''ar ',' he ',' fa 'için; Özel içerik için'dir = "auto" 'kullanın.
Simgeleri/chevronları ters çevirin; Atlıkarınca ve kademeli aynalar.
Para birimi numaraları/sembolleri - LTR pencereleri (karışık BiDi kaosundan kaçının).
Sol/sağ yerine CSS Boole özellikleri ('satır içi-başlangıç/bitiş').

7) Formlar ve giriş

Adlar/adresler: kesme işaretlerine/diyakritiklere/çift soyadlarına izin ver.
Telefonlar: E.164 depolama; Maskeler - yumuşak, ek destek ile.
Adres formatları: ülkeye göre alan sırası; indeks/durum eksik olabilir.
Klavyeler: 'inputmode', 'autocomplete' yerel ayar için doğru.
Yer tutucular: yerel dilde/formatta örnekler.

8) Psödolokalizasyon ve test

Satırları otomatik olarak '【 ěňő 】' + uzantısı '+ + +' (~ %35) ile değiştirin.
Pseudolocal'ı 'qps-ploc'olarak geliştirme derlemesine dahil edin.
Çevirmenler için bağlamlı ekran görüntüleri: yer tutucuları ve uzun metinleri vurgulamak.
Test: düzeltmeler, tirelemeler, taşmalar, "sert dikişli" dizeler, RTL.

9) Bildirimler, mektuplar, şablonlar

Harf ve konu şablonu - her yerel ayar için; Ayrı metinler ve düzen.
Öznedeki tarihler/miktarlar - yerel ayarla biçimlendirilmiş.
Bildirimleri Yapılandır bağlantıları her zaman harfin dilindedir.
SMS: kısa, çok satırlı alıntılar olmadan; UTM - yerelleştirme yok.

10) Güvenlik ve güvenilirlik

Çeviriyi asla HTML olarak yorumlamayın, güvenli ekler kullanın.
Yer tutucular - yalnızca veriler, işaretleme değil.
Günlükler/metrikler sınıflandırılmamıştır, ancak izleme sorunları için bir yerel ayara sahiptir.
Çeviri dosyası mevcut olmadığında Folback - "sessiz" (İngilizce + telemetri göster).

11) Performans

Rotalara/alanlara göre transfer parçaları; Sık sık için ön yükleme.
Кеш CDN с 'ETag'/' Cache-Control'.
Yerel ayarları değiştirirken yeniden düzenleyicilerden kaçının - memoization ile i18n bağlam.

12) iGaming'in özellikleri

Feragatnameler ve sorumlu oyun: ifadeler ülkeye bağlıdır (18 +/21 +, düzenleyici otoriteler, yardım hatları).
KYC/AML: yasal olarak doğru terimler (örneğin, "Fonların Kaynağı", "Faydalı Mal Sahibi"), vaka/doğum seçenekleri.
Ödeme yöntemleri: Yerel isimler (PIX, Papara, SEPA) ve koşullar (ETA/komisyonlar) - kesinlikle bölgeye göre.
Katsayılar ve biçim: 'Ondalık/kesirli/amerikan' - yerel açıklamalar ve örnek.
Yasal metinler: değişmemiş bölgesel versiyonlar; Folbeck'i diğer yargı yetkilerinden yasaklamak.

13) Tasarım sistemi belirteçleri (örnek)

json
{
"i18n": {
"fallback": ["en"],
"rtl": ["ar", "he", "fa"],
"textExpansionPct": 0.35,
"screenshotHints": true
},
"typography": {
"lineHeight": { "ui": 1.4, "dense": 1.3 },
"hyphens": "auto",
"tabularNums": true
},
"layout": {
"minLabelWidth": 96,
"gap": { "sm": 8, "md": 12, "lg": 16 }
},
"a11y": {
"ariaMirroring": true,
"altTranslate": true,
"contrastAA": true
}
}

14) Snippet'lar

ts import i18n from 'i18next';
import ICU from 'i18next-icu';
import { initReactI18next } from 'react-i18next';

i18n.use(ICU).use(initReactI18next).init({
lng: 'uk-UA',
fallbackLng: ['ru', 'en'],
load: 'languageOnly',
interpolation: { escapeValue: false },
resources: {} // пусто — грузим лениво
});

export async function loadNamespace(ns: string, lng = i18n.language){
const mod = await import(`/i18n/${lng}/${ns}.json`);
i18n.addResourceBundle(lng, ns, mod.default, true, true);
}

json
{
"notifications": "{count, plural, one {# уведомление} few {# уведомления} many {# уведомлений} other {# уведомления}}"
}

js const money = (v, c, l) => new Intl.NumberFormat(l, {style:'currency', currency:c}).format(v/100);
const rel = (v, unit, l) => new Intl.RelativeTimeFormat(l, {numeric:'auto'}).format(v, unit);
// money(250000,'EUR','de-DE') → 2.500,00 €

js const rtl = new Set(['ar','he','fa']);
document.documentElement.dir = rtl.has(locale.split('-')[0])? 'rtl': 'ltr';

js const pseudo = s => s.replace(/[aAeEiIoOuU]/g, m => ({a:'à',e:'ê',i:'ï',o:'ô',u:'û'}[m.toLowerCase()]        m)).replace(/([^\s])/g,'$1\u0301');

15) Boş/hata/gri tonlamalı bozulma

Anahtar çevirisi yok: İngilizce + log 'missing _ key'i gösteriyoruz.
Yerel ayar dosyası yok: folback ve banner "İngilizce arayüzün bir parçası".
Metin çok uzun: multi-line, yerinde 'line-clamp', tam metin ile araç ipucu.

16) Metrikler ve kalite kontrolü

Anahtar/konuma göre kapsama % (hedef ≥ %98).
Yeni sürümler için Time-to-Translate (TTT).
Hata oranı L10n: görsel kupürler, RTL kusurları, hatalı formatlar.
Okuma kolaylığı (öznel anket) ve yerel ayar başına NPS.
Bölgeye göre yasal doğrulama (uyumluluk kontrol listesi).

17) Antipatterns

Dizelerin kodda birleştirilmesi ("Kazandınız" + miktar + "!") - dilbilgisini bozar.
Yerel sürümleri olmayan resimlerdeki/simgelerdeki metin.
İngilizce için sert genişlikler.
Ülke hukukunun dil ile değiştirilmesi (Meksika için'es-ES 'kullanın).
Sanitasyon olmadan CMS'den HTML çevirisi.
Farklı yerlerde farklı anlamları olan aynı anahtar.

18) KG kontrol listesi

Çizgiler ve tuşlar

• Adlandırılmış yer tutucular; bitiştirme yok.
• YBÜ-çoğullaşma/gerektiğinde cins.
• Folback zinciri çalışır.

Düzen ve kullanılabilirlik

• Genişlik marjı + %30-40; 'çizgi-kelepçe', kelime sarma.
• Alt/aria etiketleri yerelleştirilmiştir.
• RTL, simgeleri/navigasyonu yansıtır; rakamlar okunabilir.

Formatlar

• Tarihler/Para birimleri via 'Intl. '; küçük birimlerden gelen miktarlar.
• Adres/Telefon/İsim - Esnek Ülke Kuralları.

Güvenlik/performans

• Çeviriler HTML çalıştırmaz; XSS hariç.
• Tembel parçalar, CDN önbellek, gereksiz renderers olmadan.

iGaming özellikleri

• Disclaimers/18 +/yardım hatları - yargı yetkisine göre.
• KYC/AML metinleri yasal olarak uzlaştırılmıştır.
• Ödeme adları/ETA'lar/ücretler - yerel.

19) Tasarım sistemindeki belgeler

Разделы: i18n Belirteçler, Kılavuzlar (ICU/Çoğul/RTL), Desenler (E-postalar/SMS/Tostlar), Bölge başına Yasal Dizeler.
Araçlar: pseudolocal, ekranların ekran görüntüsü, kapsama raporu, anahtar linter.
Süreç: sözlük, Çeviri Belleği, bağlamsal ekran görüntüleri, anadili tarafından inceleme.

Kısa özet

Çok dilli UI, mimarlık, tasarım, içerik ve hukuk düzeyinde sistematik bir çalışmadır. Anahtarları ve folback'leri organize edin, ICU ve 'Intl' kullanın, RTL'yi destekleyin, önceden bir pseudo-locale çalıştırın ve bölgesel ifadelerin yasal doğruluğunu sağlayın. Daha sonra ürün, her ülkede ve her kullanıcı için katsayılardan ve ödemelerden harflere ve yardıma kadar yerel hissedecektir.