اینترنت بستری جهانی است که افراد را از پس‌زمینه‌های زبانی و فرهنگی متنوع به یکدیگر متصل می‌کند. در حالی که اکثر وب‌سایت‌ها با جهت متن چپ به راست (LTR) طراحی شده‌اند، بخش قابل توجهی از جمعیت جهان از زبان‌های راست به چپ (RTL) مانند عربی، عبری، فارسی و اردو استفاده می‌کنند. طراحی یک وبسایت که از متن‌های RTL پشتیبانی کند، صرفاً یک تنظیم فنی نیست بلکه برای تجربه کاربری، دسترسی‌پذیری و بین‌المللی‌سازی ضروری است. در ادامه به آموزش ساخت سایت راست چین RTL با جاوا اسکریپت و CSS می پردازیم.
ایجاد یک وبسایت راست چین بیش از تغییر جهت متن را می‌طلبد. این فرآیند شامل یک تحول کامل در طراحی، اجزای رابط کاربری و سبک‌ها است تا تجربه‌ای یکپارچه برای کاربران راست چین فراهم شود. علاوه بر این، بسیاری از وب‌سایت‌های امروزی نیاز دارند تا از چندین زبان پشتیبانی کنند، که این امر ایجاد راه‌حلی برای تغییر پویا بین جهت‌های LTR و RTL توسط کاربران را ضروری می‌سازد.
این راهنما شما را مرحله به مرحله در فرآیند ایجاد یک وبسایت راست چین کامل همراهی می‌کند.
راست چین RTL چیست؟
راست چین (Right-to-Left یا RTL) به معنای نمایش و خواندن متن از سمت راست به چپ است. در زبان‌هایی مانند فارسی، عربی، و عبری، جریان متن از راست آغاز شده و به چپ ختم می‌شود. این برخلاف متن‌های چپ‌چین (LTR) مانند زبان انگلیسی است.
چرا از راست چین RTL در جاوا اسکریپت و CSS استفاده کنیم؟
دلایلی که حمایت از راست چین را برای وب‌سایت‌ها ضروری می‌کند:
- تجربه کاربری بهتر: راست چین بودن متن برای کاربران بومی فارسی‌زبان راحت‌تر و آشنا‌تر است.
- دسترسی‌پذیری: طراحی راست چین امکان دسترسی بهتر به مخاطبان گسترده‌تری را فراهم می‌کند.
- حرفه‌ای بودن و بومی‌سازی: پشتیبانی از جهت مناسب متن نشان‌دهنده احترام به فرهنگ مخاطب است.
- رعایت استانداردها: استانداردهای بین‌المللی برای طراحی وب، پشتیبانی از زبان‌های RTL را توصیه می‌کنند.
برای زبان‌هایی مانند فارسی که به صورت طبیعی راست چین هستند، طراحی راست چین ضروری است. ساختن سایت‌های چپ‌چین برای محتوای فارسی ممکن است تجربه کاربری نامناسبی ایجاد کند و حرفه‌ای به نظر نرسد. اغلب کاربران انتظار دارند محتوای وبسایت مطابق جهت طبیعی زبان آن‌ها باشد.
چگونه یک سایت کاملاً راست چین RTL با جاوا اسکریپت و CSS بسازیم؟
با تکنولوژی های جدید و تازه ساخت وبسایت های راست چین بسیار آسان تر شده است.
الف) افزودن خاصیت dir
خاصیت dir="rtl" را در تگ HTML قرار دهید:
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<title>سایت راست‌چین</title>
</head>
<body>
<p>نمونه متن فارسی</p>
</body>
</html>
ب) ایجاد فایل CSS راست چین
یک فایل rtl.css برای تنظیمات راست چین ایجاد کنید:
body {
direction: rtl;
text-align: right;
}
.sidebar {
float: right;
}
چگونه وب‌سایتی با امکان سوییچ بین راست چین و چپ چین با جاوا اسکریپت و CSS بسازیم؟
از دکمه‌های تعویض جهت استفاده کنید:
<button onclick="toggleDirection()">تغییر جهت</button>
<script>
function toggleDirection() {
const htmlEl = document.documentElement;
const bodyEl = document.body;
if (htmlEl.dir === "rtl") {
htmlEl.dir = "ltr";
bodyEl.style.textAlign = "left"; // Align text to left for LTR
} else {
htmlEl.dir = "rtl";
bodyEl.style.textAlign = "right"; // Align text to right for RTL
}
// Save preference to localStorage
localStorage.setItem("textDirection", htmlEl.dir);
}
// Load saved preference on page load
window.onload = function() {
const savedDir = localStorage.getItem("textDirection");
if (savedDir) {
document.documentElement.dir = savedDir;
document.body.style.textAlign = savedDir === "rtl" ? "right" : "left";
}
};
</script>
توضیح
- تغییر جهت: با کلیک روی دکمه، ویژگی
dirتگ<html>بین مقادیرrtlوltrتغییر می‌کند. - ذخیره‌سازی محلی (Local Storage): این اسکریپت ترجیحات کاربر را در
localStorageذخیره می‌کند تا حتی بعد از رفرش کردن صفحه، انتخاب کاربر باقی بماند. - بارگذاری ترجیح: هنگام بارگذاری صفحه، اسکریپت ترجیح ذخیره‌شده را بازیابی کرده و جهت متن را اعمال می‌کند.
این روش یک انتقال روان بین RTL و LTR را فراهم می‌کند و تجربه کاربری را برای وب‌سایت‌های چندزبانه بهبود می‌بخشد.
چگونه ورودی‌ها را بر اساس زبان متن تغییر جهت دهیم؟
متناسب با زبان متن ورودی، از جاوااسکریپت استفاده کنید:
<input type="text" oninput="adjustDirection(this)">
<script>
function adjustDirection(input) {
const text = input.value;
input.style.direction = /^[\u0600-\u06FF]/.test(text) ? "rtl" : "ltr";
}
</script>
input.value: متن فعلی وارد شده در فیلد ورودی را بازیابی می‌کند.
- الگوی Regex
/^[\u0600-\u06FF]/: این الگوی منظم بررسی می‌کند که آیا اولین کاراکتر متن (با استفاده از^که ابتدا را مشخص می‌کند) در بازه یونیکد زبان‌های عربی و فارسی (\u0600-\u06FF) قرار دارد یا خیر. اگر کاراکتر اولیه با الگو تطابق داشته باشد، نشان می‌دهد که متن احتمالاً متعلق به یک زبان راست چین (مانند فارسی یا عربی) است. - input.style.direction: جهت متن فیلد ورودی را به صورت پویا تنظیم می‌کند.
- اگر متن راست چین باشد:
"rtl"، در غیر این صورت:"ltr"برای زبان‌هایی مانند انگلیسی.
چرا از چند زبان استفاده کنیم؟
در دنیای جهانی‌شده امروز، پشتیبانی از چند زبان برای گسترش دسترسی، بهبود قابلیت دسترسی و افزایش تعامل کاربران ضروری است. یک وبسایت که از زبان‌های مختلف پشتیبانی کند می‌تواند به مناطق مختلف خدمات دهد و قابلیت استفاده و مخاطبان خود را افزایش دهد.
چرا تغییر پویا به RTL در وب‌سایت‌های چندزبانه اهمیت دارد؟
هنگام تغییر زبان، جهت متن نیز باید متناسب تغییر کند. یک طراحی ایستا که در آن عناصر RTL و LTR ثابت باشند می‌تواند مشکلاتی در قابلیت استفاده ایجاد کند. پیاده‌سازی پویا RTL باعث تجربه کاربری روان می‌شود زیرا به‌طور خودکار طرح‌بندی را بر اساس زبان انتخاب‌شده تنظیم می‌کند.
بهترین کتابخانه‌ها برای پشتیبانی چندزبانه
برخی از بهترین کتابخانه‌ها برای پیاده‌سازی پشتیبانی چندزبانه در برنامه‌های وب عبارتند از:
- i18next: یک فریمورک محبوب جاوااسکریپت که امکانات قوی بین‌المللی‌سازی مانند ترجمه، جمع‌بندی و تشخیص زبان ارائه می‌دهد.
- react-i18next: بر اساس i18next ساخته شده و با برنامه‌های React به خوبی ادغام می‌شود.
- vue-i18n: یک کتابخانه اختصاصی برای Vue js جهت مدیریت ترجمه‌ها و تغییر پویا جهت متن.
- next-intl: یک کتابخانه کارآمد برای مدیریت پشتیبانی چندزبانه در برنامه‌های Next js
با استفاده از این کتابخانه‌ها، می‌توانید یک وبسایت بسازید که به‌صورت پویا زبان‌ها و جهت متن را تغییر دهد و تجربه کاربری روانی را حفظ کند.
با دنبال کردن این راهنما، می‌توانید یک وبسایت کاملاً راست چین (RTL) طراحی کنید، امکان جابه‌جایی بین راست چین (RTL) و چپ‌چین (LTR) را برای کاربران فراهم کنید، پشتیبانی چندزبانه را پیاده‌سازی کنید و ورودی‌ها را به‌طور داینامیک بر اساس زبان وارد شده توسط کاربر تنظیم کنید. این کار تجربه‌ای روان و یکپارچه برای کاربران با زبان‌ها و اسکریپت‌های مختلف فراهم می‌کند.