تبدیل CSS چپ‌چین به راست‌چین

چرا CSS قالب انگلیسی در سایت فارسی به هم می‌ریزد؟

قالب‌های انگلیسی برای جهت چپ به راست نوشته شده‌اند. وقتی محتوا فارسی می‌شود و dir="rtl" روی صفحه قرار می‌گیرد، متن‌ها راست‌چین می‌شوند ولی هر جایی که در CSS صریحاً left یا right نوشته شده، سر جایش می‌ماند. نتیجه: فاصله‌ها برعکس، آیکن‌ها در سمت اشتباه، منوی کشویی بیرون از صفحه و حاشیه‌ی رنگی در طرف غلط کارت‌ها.

این ابزار همه‌ی این موارد را در CSS پیدا و برعکس می‌کند:

• ویژگی‌های جهت‌دار: margin-left، padding-right، border-left، left و right
• مقدارها: float، clear، text-align، background-position، direction
• مقدارهای چهارتایی margin، padding، inset، border-width و ترتیب گوشه‌های border-radius
• گوشه‌ها مثل border-top-left-radius
• جهت افقی box-shadow، text-shadow و translateX
• نشانگرهای e-resize و w-resize

دو روش راست‌چین کردن CSS

۱. جابه‌جایی چپ و راست (flip)

هر left به right تبدیل می‌شود و برعکس. خروجی یک فایل CSS جداگانه برای نسخه‌ی فارسی است. این روش برای سایت‌هایی که فقط فارسی‌اند یا قالب‌های آماده‌ای که باید سریع راست‌چین شوند ساده‌ترین راه است.

۲. Logical properties؛ یک CSS برای هر دو جهت

در CSS مدرن به‌جای چپ و راست از «شروع» و «پایان» استفاده می‌شود. margin-inline-start در صفحه‌ی انگلیسی یعنی چپ و در صفحه‌ی فارسی یعنی راست؛ مرورگر خودش با توجه به dir تصمیم می‌گیرد:

.card {
  margin-inline-start: 20px;
  padding-inline-end: 12px;
  border-inline-start: 3px solid;
  text-align: start;
}

این روش برای سایت‌های دوزبانه بهترین انتخاب است، چون دیگر لازم نیست دو فایل CSS نگه داری. همه‌ی مرورگرهای امروزی از logical properties پشتیبانی می‌کنند.

بعد از تبدیل چه چیزهایی را دستی چک کنم؟

• آیکن‌های جهت‌دار: فلش «بعدی» و «قبلی» باید آینه شوند؛ با [dir="rtl"] .icon-arrow { transform: scaleX(-1); }
• اسلایدر و کاروسل: کتابخانه‌هایی مثل Swiper گزینه‌ی RTL جدا دارند.
• کد جاوااسکریپت: محاسبه‌هایی مثل scrollLeft یا موقعیت منوهای کشویی در JS با CSS عوض نمی‌شوند.
• فونت: فونت انگلیسی قالب را با یک فونت فارسی مثل وزیرمتن جایگزین کن و line-height را کمی بیشتر کن.
• اعداد و کدها: شماره تلفن، کد تخفیف و ایمیل باید با dir="ltr" نمایش داده شوند.

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