رابط های چند زبانه و محلی سازی

1) اصول

1. زبان پوست نیست. متون، فرمت ها، جهت نوشتن، تصاویر، بلوک های قانونی و حتی ناوبری در حال تغییر هستند.
2. اول کلیدها، بعد پیامها. ساختار کلید معنایی و پارامترها - ترجمه آمده بعد.
3. Pseudolocalization - قبل از خروج. گرفتن سرریزها، خطوط «سخت دوخته شده» و زبان های پنهان.

4. چربی ها قابل پیش بینی هستند. «ru-UA → ru → en». عدم شکست «آرام»

5. امنیت. بدون HTML از ترجمه به DOM بدون پاکسازی ؛ placeholder ها فقط positional/named هستند.
6. A11y-equivalence است. Alt texts، aria labels، اختصارات - همه چیز محلی شده است.

2) استراتژی محلی

کدهای سیستم: «language-REGION» (به عنوان مثال، «pt-BR»، «en-GB»).
انتخاب محل: مشخصات کاربر → تنظیم ؛ یدکی - تشخیص خودکار توسط مرورگر/جغرافیایی (با تایید).
چند منطقه: زبان را از قانون تشخیص دهید: «es-ES» ≠ «es-MX» (قوانین/پرداخت ها/محدودیت های مختلف).
زنجیره ای Folback: UI نزدیکترین زبان است ؛ متون قانونی - نسخه کاملا منطقه ای، در غیر این صورت درخواست بلوک و تایید.

3) معماری اطلاعات و محتوا

زمینه های کلیدی: ناوبری، CTA، اشکالات، فرم ها، اعلان ها، اعلان ها، نامه ها، PDF/آگهی ها.
پسوند متن: + 30-40٪ عرض ذخیره (آلمانی/فنلاندی). طرح بندی - الاستیک (انعطاف پذیر/شبکه).
تن/سبک: فرهنگ لغت نام تجاری (شرایط، بدون «ترجمه عامیانه» در مکان های بحرانی).
تصاویر/آیکون ها: اجتناب از متن در تصاویر ؛ در صورت لزوم، نسخه های محلی را نگه دارید.

4) معماری i18n

کلید: «دامنه» بخش. قصد → 'پرداخت. عقب نشینی کنید. خطا. insufficient_funds' است.
متغیرهایی با نام ('{amount}', '{minutes}')، فرمت شده خارج از خط.
ICU MessageFormat: چندگانگی، جنسیت، هماهنگی.
فایل ها: با محلی و دامنه ها ('/i18n/{ locale }/{ domain} .json ')، تکه ها به صورت lazily بارگذاری می شوند.
سرور/مشتری: رندر جهانی، محلی در کوکی + HTTP-Vary.

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

5) قالب بندی: اعداد، تاریخ، ارز، واحد

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');

واحدهای کوچک: مقادیر را در سنت/کوپک نگه دارید ؛ فرمت در مشتری.
زمان نسبی: "بین المللی. 'زمان نسبی.
واحد ها: "بین المللی. NumberFormat ({سبک: 'واحد'، واحد: 'متر'}).
تقویم/هفته: روز 1 هفته و فرمت تاریخ - توسط محلی.

6) RTL و جهت نوشتن

پشتیبانی از 'dir =' rtl '' برای 'ar'، 'he'، 'fa' ؛ از «dir =» auto «» برای محتوای سفارشی استفاده کنید.
معکوس آیکون/chevrons ؛ آینه چرخ فلک و پله.
شماره ارز/نماد - پنجره LTR (جلوگیری از هرج و مرج BiDi مخلوط).
خصوصیات بولی CSS ('inline-start/end') به جای چپ/راست.

7) فرم ها و ورودی

نام/آدرس: اجازه دهید apostrophes/diacritics/نام خانوادگی دوگانه.
تلفن: ذخیره سازی E.164 ؛ ماسک - نرم، با پشتیبانی درج.
فرمت های آدرس: سفارش فیلد بر اساس کشور ؛ ممکن است index/state وجود نداشته باشد.
صفحه کلید: 'inputmode'، 'autocomplete' درست برای محلی.
متغیرهایی: نمونه هایی در زبان/فرمت محلی.

8) Pseudolocalization و آزمایش

به طور خودکار خطوط را با « » + extension «+ + +» جایگزین کنید.
شامل pseudolocal در مجمع توسعه به عنوان 'qps-ploc'.
تصاویر با زمینه برای مترجمان: برجسته کردن متغیرهایی و متون طولانی.
تست: trimmings، hyphenations، overflows، رشته های «سخت دوخته شده»، RTL.

9) اطلاعیه ها، نامه ها، قالب ها

الگوی نامه و موضوع - برای هر منطقه ؛ متون جداگانه و طرح.
تاریخ/مقدار در موضوع - فرمت شده توسط محلی.
پیوندهای Configure Notifications همیشه به زبان نامه هستند.
SMS: کوتاه، بدون نقل قول چند خط ؛ UTM - بدون محلی سازی.

10) ایمنی و قابلیت اطمینان

هرگز ترجمه را به عنوان HTML تفسیر نکنید، از درج امن استفاده کنید.
متغیرهایی - فقط داده ها، نه نشانه گذاری.
Logs/metrics طبقه بندی نشده اند، اما با محلی برای ردیابی مشکلات.
Folback هنگامی که فایل ترجمه در دسترس نیست - «آرام» (نشان دادن انگلیسی + تله متری).

11) عملکرد

تکه های انتقال توسط مسیرها/دامنه ها ؛ پیش بارگذاری برای مکرر.
Кеш CDN с «ETag »/« Cache-Control».
اجتناب از ارائه دهندگان در هنگام تغییر محلی - i18n زمینه با memoization.

12) ویژگی های iGaming

سلب مسئولیت و بازی مسئول: جمله بندی بستگی به کشور (18 +/21 +، مقامات نظارتی، خطوط کمک).
KYC/AML: اصطلاحات صحیح قانونی (به عنوان مثال، «منبع بودجه»، «مالک سودمند»)، گزینه های مورد/تولد.
روش های پرداخت: نام های محلی (PIX، Papara، SEPA) و شرایط (ETA/کمیسیون) - به شدت بر اساس منطقه.
ضرایب و فرمت: «اعشاری/کسری/آمریکایی» - توضیحات محلی و مثال.
متون حقوقی: نسخه های منطقه ای بدون تغییر ؛ ممنوعیت فولبک از سایر حوزه های قضایی.

13) نشانه های سیستم طراحی (به عنوان مثال)

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) قطعه

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) خالی/خطا/تخریب خاکستری

هیچ ترجمه کلیدی وجود ندارد: ما انگلیسی + log 'missing _ key' را نشان می دهیم.
بدون فایل محلی: folback و بنر «بخشی از رابط به زبان انگلیسی».
متن بیش از حد طولانی: چند خط، «خط گیره» در محل، راهنمای ابزار با متن کامل.

16) معیارها و کنترل کیفیت

پوشش٪ توسط کلید/محل (≥ هدف 98٪).
Time-to-Translate (TTT) برای نسخه های جدید.
L10n میزان اشکال: کلیپ های بصری، نقص RTL، فرمت های اشتباه.
سهولت خواندن (بررسی ذهنی) و NPS در هر منطقه.
اعتبار قانونی بر اساس منطقه (چک لیست انطباق).

17) ضد گلوله

الحاق رشته ها در کد («شما برنده» + مقدار + «!») - دستور زبان را می شکند.
متن در تصاویر/آیکون ها بدون نسخه های محلی.
عرض سخت برای انگلیسی.
جایگزینی قانون کشور با زبان (استفاده از «es-ES» برای مکزیک).
ترجمه HTML از CMS بدون بهداشت.
همان کلید با معانی مختلف در مکان های مختلف.

18) چک لیست QA

خطوط و کلیدها

• نام متغیرهایی ؛ بدون اتصال.
• ICU-پلورالیزاسیون/جنس که در آن مورد نیاز است.
• زنجیره ای folback کار می کند.

طرح بندی و در دسترس بودن

• حاشیه عرض + 30-40٪ ؛ 'خط گیره'، بسته بندی کلمه.
• برچسب های Alt/aria محلی هستند.
• RTL آینه آیکون/ناوبری ؛ اعداد قابل خواندن هستند.

فرمت ها

• تاریخ/ارز از طریق 'بین المللی. '; مقادیر از واحدهای کوچک
• آدرس/تلفن/نام - قوانین کشور انعطاف پذیر.

ایمنی/عملکرد

• ترجمه ها HTML را اجرا نمی کنند ؛ XSS حذف شده است.
• تکه های تنبل، حافظه پنهان CDN، بدون ارائه دهنده های غیر ضروری.

ویژگی های iGaming

• Disclaimers/18 +/خطوط کمک - توسط صلاحیت.
• متون KYC/AML از نظر قانونی آشتی.
• نام پرداخت/ETAs/هزینه - محلی.

19) مستندات در سیستم طراحی

Разделы: i18n Tokens، Guides (ICU/Plural/RTL)، الگوها (ایمیل/SMS/Toasts)، رشته های حقوقی در هر منطقه.
ابزار: pseudolocal، تصویر صفحه نمایش، گزارش پوشش، linter کلید.
روند: واژه نامه، حافظه ترجمه، تصاویر متنی، بررسی توسط یک سخنران بومی.

خلاصه ای کوتاه

UI چند زبانه یک کار سیستماتیک در سطح معماری، طراحی، محتوا و قانون است. سازماندهی کلید ها و folbacks، استفاده از ICU و Intl، پشتیبانی از RTL، اجرای یک شبه محلی در پیشبرد و اطمینان از صحت قانونی از جمله بندی منطقه ای است. سپس محصول احساس بومی - از ضرایب و پرداخت به حروف و کمک - در هر کشور و برای هر کاربر.