FA-TOOLS — Header Component
DIRECT LINE 09202232789

تنظیم زبان فارسی و راست‌چین کردن قالب‌های خارجی

خلاصه سریع: برای راست‌چین کردن اصولی یک قالب خارجی، ابتدا باید ویژگی dir="rtl" و lang="fa-IR" را به تگ <html> اضافه کنید، سپس فایل استایل rtl.css را برای معکوس‌سازی جهت‌ها بازنویسی کرده و با تعریف یک فونت فارسی استاندارد، ارتفاع خطوط را تنظیم کنید.

راست‌چین کردن و فارسی‌سازی قالب‌های خارجی فراتر از یک تغییر جهت ساده است. اجرای غیراصولی این کار باعث افت سرعت، به‌هم‌ریختگی چیدمان در موبایل و خراب شدن افزونه‌های تعاملی مانند اسلایدرها می‌شود. در این مقاله، نقشه راه گام‌به‌گام و استاندارد برای راست‌چین‌سازی کامل قالب‌های HTML و وردپرس را بررسی می‌کنیم.

۱. پایه استاندارد راست‌چین‌سازی: تنظیم lang و dir در HTML

پاسخ کوتاه: جهت تعیین راست‌چین بودن کل سند، صفت dir="rtl" و جهت معرفی زبان به موتورهای جستجو، صفت lang="fa-IR" باید مستقیماً در تگ <html> قرار گیرند.

اولین و مهم‌ترین قدم در بومی‌سازی قالب‌های وب، اعلام جهت خوانش متن به مرورگر است. اگر این کار را انجام ندهید، مرورگر متن‌ها را راست‌چین می‌کند اما ساختار باکس‌ها، نشانگر تایپ و علائم نگارشی متناظر با زبان‌های چپ‌به‌راست (LTR) باقی می‌مانند.

برای کدهای خام HTML، تگ اصلی ابتدای سند را به شکل زیر تغییر دهید. اگر نیاز به مشاهده ساختار دقیق سند دارید، می‌توانید از کدهای آماده HTML بهره ببرید:

<!DOCTYPE html>
<html lang=”fa-IR” dir=”rtl”>
<head>
    <meta charset=”UTF-8″>
    <title>عنوان صفحه فارسی</title>
</head>

۲. شیوه مدرن CSS: ویژگی‌های منطقی (Logical Properties)

پاسخ کوتاه: به جای استفاده از دستورات فیزیکی مثل margin-left از ویژگی‌های منطقی CSS مانند margin-inline-start استفاده کنید تا استایل‌ها با تغییر جهت سند خودکار بچرخند.

در گذشته برای راست‌چین کردن قالب مجبور بودیم تمام مقادیر `left` و `right` را تک‌به‌تک بازنویسی و اورراید (Override) کنیم. اما استانداردهای جدید CSS مفهومی به نام Logical Properties را معرفی کرده‌اند.

وقتی از ویژگی‌های منطقی استفاده می‌کنید، مرورگر با توجه به صفت `dir=”rtl”`، سمتی که جهت شروع متن است را به صورت خودکار تشخیص می‌دهد. در این حالت دیگر نیازی به نوشتن صدها خط کد اضافه در فایل راست‌چین نخواهید داشت. برای مرور نمونه‌های بیشتر می‌توانید به بخش قطعه کدهای استایل CSS مراجعه کنید.

۳. مقایسه روش قدیم و جدید در استایل‌دهی RTL

جدول زیر نحوه جایگزینی خصوصیات فیزیکی با خصوصیات منطقی را نشان می‌دهد:

روش قدیمی (Physical CSS) روش مدرن (Logical CSS)
margin-left: 15px; margin-inline-start: 15px;
padding-right: 20px; padding-inline-end: 20px;
float: left; float: inline-start;
text-align: right; text-align: start;
left: 0; inset-inline-start: 0;

۴. تنظیم فونت فارسی و اصلاح فاصله‌گذاری خطوط (Line Height)

تنظیم زبان فارسی و راست‌چین در قالب خارجی — تصویر 4
پاسخ کوتاه: برای نمایش صحیح حروف فارسی، باید فونت استاندارد مانند وزیرمتن را فراخوانی کرده و مقدار line-height را حداقل بین ۱.۶ تا ۱.۸ قرار دهید تا اعراب و حروف بالا و پایین بریده نشوند.

فونت‌های لاتین ارتفاع عمودی کمتری نسبت به حروف فارسی دارند. اگر فقط فونت فارسی را بدون تغییر `line-height` جایگزین کنید، متون شما بسیار متراکم و غیرقابل خواندن خواهند شد.

@font-face {
    font-family: ‘Vazirmatn’;
    src: url(‘fonts/Vazirmatn-Regular.woff2’) format(‘woff2’);
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: ‘Vazirmatn’, Tahoma, sans-serif;
    line-height: 1.8;
    direction: rtl;
    text-align: right;
}

۵. راست‌چین‌سازی اختصاصی در وردپرس با فایل rtl.css

پاسخ کوتاه: وردپرس به صورت خودکار زبانی بودن سایت را تشخیص می‌دهد. اگر فایل rtl.css در پوشه چایلدتم (Child Theme) باشد، وردپرس آن را پس از style.css لود می‌کند.

برای راست‌چین‌سازی اصولی قالب‌های خارجی وردپرس، نباید فایل اصلی `style.css` را تغییر دهید؛ زیرا با اولین آپدیت قالب، تمام تغییرات شما پاک می‌شوند. ساختار استاندارد به روش زیر است:

  1. یک پوسته فرزند (Child Theme) فعال کنید.
  2. یک فایل به نام rtl.css در مسیر اصلی چایلدتم بسازید.
  3. کدهای مربوط به معکوس‌سازی جهت‌ها و فونت را در این فایل بنویسید.
  4. در صورت نیاز به فراخوانی دستی یا مشروط استایل‌ها، از کدهای توابع وردپرس استفاده کنید. برای دیدن الگوهای آماده می‌توانید از لیست قطعه کدهای کاربردی وردپرس استفاده نمایید.

۶. ۳ نکته تخصصی برای جلوگیری از به‌هم‌ریختگی اسلایدرها و آیکون‌ها

بسیاری از توسعه‌دهندگان هنگام راست‌چین‌سازی با سه مشکل عمده مواجه می‌شوند که ظاهر سایت را کاملاً بهم می‌زند:

  • معکوس شدن اشتباه آیکون‌های فلش: آیکون‌های جهت‌نما (مانند فلش‌های قبلی/بعدی) پس از راست‌چین شدن باید چرخانده شوند. اما آیکون‌هایی مانند علامت چک‌مارک یا جستجو نباید تغییر کنند. برای فلش‌ها از کدهای آماده جاوا اسکریپت یا ویژگی CSS زیر استفاده کنید:

    .arrow-icon { transform: scaleX(-1); }
  • کار نکردن اسلایدرهای جاوا اسکریپت (Swiper / Slick): کتابخانه‌های اسلایدر نیاز به پیکربندی جاوا اسکریپتی برای RTL دارند. صرفاً تغییر CSS کافی نیست. در تنظیمات اسلایدر باید گزینه rtl: true یا dir="rtl" روی HTML اسلایدر تنظیم شده باشد. برای مدیریت بهتر این رویدادها، اسنیپت‌های کاربردی جاوا اسکریپت را بررسی کنید.
  • مشکل اولویت CSS (Specificity): استایل‌های قالب اصلی ممکن است به دلیل استفاده از شناسه (ID) یا !important بر فایل RTL شما غلبه کنند. همیشه برای کدهای RTL از کلاس‌های بدنه مانند body.rtl استفاده کنید تا اولویت اعمال کد بالا برود.

۷. عیب‌یابی سریع مشکلات رایج

مشکل ۱: اسکرول افقی غیرعادی (Horizontal Scrollbar) در موبایل

علت: منفی بودن margins در المان‌های راست‌چین شده یا خروج یک بخش با position: absolute از صفحه.
راه‌حل: کد body, html { overflow-x: hidden; } را اضافه کنید و المان‌های دارای right یا left منفی را بررسی کنید.

مشکل ۲: اعداد انگلیسی در متن‌های فارسی نمایش داده می‌شوند

علت: عدم پشتیبانی فایل فونت از کاراکترهای فارسی یا عدم تنظیم تابع تبدیل اعداد.
راه‌حل: از نسخه دارای اعداد فارسی (Farsi Digits) فونت‌های استاندارد استفاده کنید یا با استفاده از توابع جاوا اسکریپت اعداد را تبدیل کنید.

مشکل ۳: منوهای کشویی (Dropdown) خارج از تصویر باز می‌شوند

علت: مقداردهی left: 0 به جای right: 0 در زیرمنوها.
راه‌حل: در فایل RTL مقدار left: auto; right: 0; را به زیرمنوی مربوطه اختصاص دهید.

۸. پرسش‌های متداول

تفاوت dir=”rtl” با direction: rtl در CSS چیست؟

صفت HTML یعنی dir="rtl" ساختار معنایی مرورگر، ورودی‌های فرم، جدول‌ها و رفتار پیش‌فرض عناصر را تغییر می‌دهد. اما direction: rtl در CSS فقط ظاهر متون و باکس‌ها را معکوس می‌کند. استفاده از صفت HTML همیشه اولویت دارد.

چگونه تغییرات راست‌چین را در وردپرس انجام دهم که با آپدیت پاک نشود؟

کدهای استایل سفارشی خود را حتماً در فایل style.css مربوط به چایلدتم (Child Theme) یا فایل rtl.css در پوشه چایلدتم بنویسید.

آیا افزونه‌های ترجمه مثل Loco Translate قالب را راست‌چین می‌کنند؟

خیر، افزونه‌های ترجمه فقط متون و عبارات (Strings) را به زبان فارسی برمی‌گردانند. برای تغییر چیدمان ظاهری، نیاز به فایل استایل RTL و تنظیم جهت صفحه دارید.

چرا کادر ورودی فرم‌ها پس از RTL شدن به هم می‌ریزد؟

معمولاً به دلیل وجود padding-left ثابت برای آیکون‌های داخل فرم است. با ویژگی‌های منطقی یا معکوس کردن پدینگ به padding-right مشکل برطرف می‌شود.

Table of Contents

آخرین نوشته‌ها

دسته‌ها

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *