وقتی یک سایت فارسی را به انگلیسی ترجمه می‌کنید، فقط متن دکمه‌ها عوض نمی‌شود. طول عنوان، جای برچسب، جهت خواندن، نمایش عدد و رفتار یک نشانی داخل جمله هم تغییر می‌کنند. اگر نسخه دوم صرفاً با جابه‌جایی چپ و راست ساخته شود، ممکن است کلمات درست باشند ولی مسیر استفاده نامنظم بماند. طراحی چندزبانه باید محتوا، ساختار، جهت و تنظیمات محلی را به قراردادهای روشن تبدیل کند.
زبان، کشور، جهت متن و منطقه زمانی مفهوم‌های جدا هستند. فارسی معمولاً در نوشتار وب راست‌به‌چپ است، اما کلمه فارسی تعیین نمی‌کند کاربر در کدام کشور یا منطقه زمانی است. زبان انگلیسی هم واحد پول یا فرمت همه عددها را مشخص نمی‌کند. اگر محصول به منطقه وابسته است، تنظیم زبان را با تنظیم منطقه یکی ندانید. این تفکیک در پرداخت، تاریخ قرار ملاقات و نمایش نشانی اهمیت عملی پیدا می‌کند.
lang و dir دو مسئولیت متفاوت دارند
راهنمای اعلام زبان در HTML استفاده از lang روی html و تعیین زبان بخش‌های متفاوت را توضیح می‌دهد. lang="fa" زبان پایه را اعلام می‌کند و می‌تواند برای پردازش و ابزار کمکی مفید باشد. اما این ویژگی به‌تنهایی جهت متن را راست‌به‌چپ نمی‌کند. dir="rtl" جهت پایه را مشخص می‌کند؛ برای نسخه انگلیسی معمولاً lang="en" و dir="ltr" انتخاب‌های مربوط‌اند.
راهنمای ساختار RTL در W3C تنظیم جهت در Markup را توصیه می‌کند. جهت پایه را فقط با text-align:right شبیه‌سازی نکنید؛ تراز ظاهری و الگوریتم ترتیب متن یک چیز نیستند. می‌توانید یک بخش LTR داخل صفحه RTL داشته باشید و برعکس. هر تغییر جهت باید محدوده مشخصی داشته باشد تا اثر ناخواسته روی متن و کنترل‌های دیگر ایجاد نشود.
متن ترکیبی به محدوده مستقل نیاز دارد
URL، ایمیل، نام API و شماره نسخه ممکن است داخل جمله فارسی باشند. نشانه‌های خنثی مانند پرانتز و دونقطه گاهی در ترکیب این جهت‌ها جابه‌جا دیده می‌شوند. راهنمای متن دوجهته استفاده از محدوده‌ای با جهت مشخص را برای عبارت معلوم و bdi یا dir="auto" را برای داده با جهت نامعلوم توضیح می‌دهد. ترتیب واقعی کاراکترها را برای درست‌کردن ظاهر یک نمونه دستکاری نکنید.
dir="auto" بر اساس محتوا جهت را تعیین می‌کند و ترجمه یا تشخیص کشور انجام نمی‌دهد. برای فیلد نظر کاربر، این رفتار ممکن است مناسب باشد. برای یک شماره حساب یا کد فنی با جهت معلوم، انتخاب صریح معمولاً قرارداد روشن‌تری است. داده‌ای که از Server می‌آید همچنان باید امن در DOM قرار گیرد؛ bdi یا تعیین جهت، جلوی HTML Injection را نمی‌گیرد. در نمونه پایین متن‌ها با textContent نمایش داده می‌شوند.
Logical Properties را با معنای Layout هماهنگ کنید
CSS Logical Properties به جای بعضی جهت‌های فیزیکی، محورهای Inline و Block را به کار می‌برد. margin-inline-start می‌تواند با جهت نوشتار هماهنگ شود، ولی left برای یک اثر فیزیکی مشخص همیشه اشتباه نیست. تصمیم به معنای طراحی وابسته است: فاصله ابتدای متن باید منطقی باشد؛ موقعیت یک شیء در تصویر ممکن است به جهت زبان ارتباطی نداشته باشد.
تبدیل همه leftها به right، لوگو، نمودار و تصویر را درست بومی‌سازی نمی‌کند. فلش بازگشت می‌تواند با جهت پیمایش ارتباط داشته باشد، ولی علامت پخش، نشان برند یا تصویر کالا نباید بدون دلیل Mirror شود. ترتیب DOM و Focus را هم حفظ کنید. چیدمان بصری که با order معکوس شده، ممکن است مسیر صفحه‌کلید را متفاوت نشان دهد. راهنمای Logical Properties جزئیات این انتخاب را ادامه می‌دهد.
متن ترجمه‌شده را در فضای واقعی جا دهید
یک برچسب کوتاه فارسی ممکن است در انگلیسی بلندتر یا برعکس شود. عرض ثابت دکمه و ارتفاع ثابت کارت، این تفاوت را به بریدن متن تبدیل می‌کنند. عنوان‌های طولانی، خطا و ترکیب عدد را از ابتدا در نمونه محتوا بگذارید. اگر ترجمه برای جا شدن بیش‌ازحد کوتاه شود، ممکن است معنای لازم از دست برود. بهتر است Layout انعطاف داشته باشد و کوتاه‌نویسی هم با حفظ معنا انجام شود.
فونت و وزن را برای هر زبان بررسی کنید؛ یک خانواده ممکن است حروف لازم هر دو زبان را نداشته باشد. Fallback نباید صرفاً یک نام اتفاقی باشد. انتخاب فونت باید مجوز، پوشش حروف و رفتار بارگذاری را هم در نظر بگیرد. در راهنمای Typography وب درباره اندازه، طول سطر و بارگذاری توضیح داده شده است. شباهت بصری دو نسخه با قابل استفاده‌بودن آن‌ها یکی نیست.
عدد، تاریخ و واحد را جدا بومی‌سازی کنید
مقدار داده باید از قالب نمایش جدا باشد. قیمت عددی را در منطق برنامه نگه دارید و برای نمایش، Locale و واحد معتبر را اعمال کنید. تبدیل واحد پول یک عملیات جداست و با تغییر زبان اتفاق نمی‌افتد. برای تاریخ نیز زمان ثبت‌شده، منطقه زمانی و تقویم انتخابی را روشن کنید. Intl.DateTimeFormat برای قالب‌بندی کاربرد دارد، نه حدس‌زدن ترجیح همه کاربران.
نام ماه، جداکننده عدد و ترتیب روز و ماه روی فهم اطلاعات اثر می‌گذارند. در موعد پرداخت یا قرار ملاقات، منطقه زمانی مبهم می‌تواند مشکل واقعی ایجاد کند. اگر تنظیم تقویم و منطقه در محصول لازم است، آن را مستقل از زبان قابل فهم کنید. در فرم، قالب مورد انتظار را توضیح دهید و پیام خطا را نیز ترجمه کنید. فقط ترجمه Label و باقی‌گذاشتن Validation انگلیسی، نسخه چندزبانه کامل نمی‌سازد.
نمونه کامل: یک کارت فارسی و انگلیسی
فایل زیر را با نام index.html ذخیره کنید و در مرورگر باز کنید. هیچ Build، فونت، تصویر یا Library خارجی لازم ندارد. انتخاب زبان، متن‌ها، lang، dir و قالب عدد را تغییر می‌دهد. فیلد یادداشت dir="auto" دارد و نام لاتین محصول داخل bdi قرار می‌گیرد. این نمونه فقط نمایش محلی است؛ Routing، ذخیره ترجیح، ترجمه Server و hreflang را پیاده‌سازی نمی‌کند و نباید به‌عنوان سایت چندزبانه Production معرفی شود.
<!doctype html>
<html lang="fa" dir="rtl">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>کارت چندزبانه</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; padding: 1.5rem; background: #f4f7fb; color: #172638; font: 1rem/1.8 sans-serif; }
main { max-inline-size: 40rem; margin-inline: auto; }
.card { padding: 1.5rem; margin-block: 1.5rem; border: 1px solid #64778c; background: white; border-radius: .75rem; }
label { display: block; margin-block: 1rem .25rem; }
select, textarea { font: inherit; padding: .6rem; max-inline-size: 100%; }
textarea { inline-size: 100%; min-block-size: 6rem; }
:is(select, textarea):focus-visible { outline: 3px solid #164d86; outline-offset: 3px; }
p { overflow-wrap: anywhere; }
</style>
</head>
<body><main>
<label id="languageLabel" for="language">زبان رابط</label>
<select id="language"><option value="fa" lang="fa">فارسی</option><option value="en" lang="en">English</option></select>
<article class="card">
<h1 id="heading">کارت چندزبانه</h1>
<p id="description"></p>
<p><span id="productLabel"></span> <bdi lang="en" dir="ltr">Design Kit 2.0</bdi></p>
<p id="price"></p>
<label id="noteLabel" for="note"></label>
<textarea id="note" dir="auto"></textarea>
<p id="noteHelp"></p>
</article>
</main>
<script>
const messages = {
fa: { direction: 'rtl', title: 'کارت چندزبانه', language: 'زبان رابط',
description: 'این نمونه فقط متن و جهت رابط را تغییر می‌دهد.', product: 'نام محصول:',
price: 'مبلغ نمونه:', unit: 'تومان', note: 'یادداشت شما',
help: 'جهت یادداشت از متن آن تشخیص داده می‌شود؛ داده ذخیره یا ارسال نمی‌شود.' },
en: { direction: 'ltr', title: 'Bilingual card', language: 'Interface language',
description: 'This demo only changes interface text and direction.', product: 'Product name:',
price: 'Example price:', unit: 'tomans', note: 'Your note',
help: 'The note direction follows its content. No data is saved or sent.' }
};
const language = document.getElementById('language');
function renderLanguage() {
const locale = language.value;
const text = messages[locale];
document.documentElement.lang = locale;
document.documentElement.dir = text.direction;
document.title = text.title;
const values = { languageLabel: text.language, heading: text.title, description: text.description,
productLabel: text.product, noteLabel: text.note, noteHelp: text.help };
for (const [id, value] of Object.entries(values)) document.getElementById(id).textContent = value;
const formatted = new Intl.NumberFormat(locale === 'fa' ? 'fa-IR' : 'en-US').format(250000);
document.getElementById('price').textContent = `${text.price} ${formatted} ${text.unit}`;
}
language.addEventListener('change', renderLanguage);
renderLanguage();
</script></body>
</html>
کلاس‌ها و شناسه‌های استفاده‌شده در JavaScript همگی در Markup موجودند. تغییر زبان محتوای یادداشت را پاک نمی‌کند، چون فقط متن‌های رابط عوض می‌شوند. عدد نمونه همان مقدار قبلی می‌ماند و واحد تومان صریح است. در محصول واقعی، پیش‌نویس کاربر را بی‌اجازه ترجمه نکنید؛ زبان رابط و زبان داده‌ای که کاربر نوشته می‌تواند متفاوت باشد. تغییر زبان نباید ناخواسته انتخاب‌ها یا وضعیت فرم را از بین ببرد.
انتخاب زبان باید مقصد معنادار داشته باشد
در یک سایت محتوایی، بهتر است انتخاب زبان کاربر را به نسخه متناظر همان صفحه ببرد، نه همیشه صفحه اصلی. اگر ترجمه موجود نیست، این وضعیت را روشن کنید و کاربر را به یک صفحه نامرتبط نفرستید. نام زبان را به شکل قابل تشخیص نمایش دهید؛ پرچم کشور به‌تنهایی معادل زبان نیست. یک زبان می‌تواند در چند کشور استفاده شود و یک کشور می‌تواند چند زبان داشته باشد.
رفتار URL را با ساختار محتوا هماهنگ کنید. برای هر نسخه، نشانی پایدار و قابل لینک‌دادن مفید است. ترجیح ذخیره‌شده کاربر می‌تواند برای تجربه او استفاده شود، ولی بازکردن یک لینک مشخص نباید بدون توضیح به نسخه دیگری منتقل شود. اگر فرم در جریان است، پیام تغییر زبان باید اثر آن بر داده را روشن کند. این تصمیم به معماری محصول وابسته است و صرف یک Dropdown آن را حل نمی‌کند.
SEO چندزبانه قرارداد مستقل دارد
راهنمای نسخه‌های محلی در Google Search Central کاربرد hreflang و ارتباط نسخه‌ها را توضیح می‌دهد. این علامت، محتوا را ترجمه نمی‌کند و تضمین رتبه هم نیست. نسخه‌های متناظر باید نشانی درست و ارتباط معتبر داشته باشند. نمونه محلی بالا چنین نشانی‌هایی ندارد، بنابراین کد نمایشی hreflang با URL ساختگی در آن قرار داده نشده است.
عنوان، توضیح متا، لینک‌ها و متن خطا را با نسخه محتوا هماهنگ کنید. ترجمه صفحه‌ای که نیمی از اطلاعات آن همچنان زبان دیگری دارد ممکن است برای کاربر ناکافی باشد. تاریخ به‌روزرسانی ترجمه و مسئول بازبینی را ثبت کنید تا نسخه‌ها از هم فاصله نگیرند. اگر متن اصلی تغییر کند، باید معلوم باشد کدام ترجمه نیاز به اصلاح دارد. این فرایند بخشی از نگهداری سایت است، نه فقط تنظیم اولیه SEO.
تحویل را با نمونه‌های دشوار کامل کنید
برای تیم اجرا، عنوان بلند، ایمیل، URL، عدد، متن کاربر و خطا را در هر دو نسخه نشان دهید. قرارداد Iconها، فاصله‌ها، ترتیب Focus و تنظیمات محلی را همراه آن ثبت کنید. از یک نمونه کوتاه نتیجه نگیرید که همه صفحه‌ها درست هستند. مسیر واقعی مانند پرکردن فرم یا مرور سفارش، اختلاف‌هایی را نشان می‌دهد که در کارت ساده دیده نمی‌شوند. متن و Layout باید با هم بررسی شوند.
هر نسخه باید اطلاعات لازم برای کار اصلی را داشته باشد. اگر اطلاعات حقوقی، شرایط خدمت یا پیام مهم هنوز ترجمه نشده، رابط نباید کامل‌بودن نسخه را القا کند. برای سازمان‌دهی رفتارهای مشترک، راهنمای Design System مرتبط است. طراحی چندزبانه زمانی قابل نگهداری می‌شود که قواعد مشترک و استثناهای هر زبان روشن باشند؛ Mirror کردن صفحه فقط بخش کوچکی از این کار است.
هنوز دیدگاهی ثبت نشده
اولین نفری باشید که نظر می‌دهد!