راست‌چین کردن سایت فارسی با هوش مصنوعی، بدون margin-left

ساعت یازده شب است و از دستیار خواسته‌اید صفحهٔ فرود فارسی بسازد. صفحه باز می‌شود و ظاهرش خوب است، اما فاصلهٔ کارت‌ها سمت اشتباه افتاده، فلش «بعدی» به عقب اشاره می‌کند و شماره تلفن وسط جمله ترتیب گروه‌هایش را عوض کرده است. دلیلش معمولاً ساده است: دستیار کدی نوشته که فکر می‌کند صفحه چپ‌به‌راست است. مهارت «رابط کاربری راست‌به‌چپ» فهرستی را به دستیار می‌دهد که راست‌چین کردن سایت فارسی را از همان خط اول درست انجام دهد.

راست‌چین کردن سایت فارسی: margin-left یا margin-inline-start؟

دستیارها اغلب margin-left و padding-right می‌نویسند. این‌ها «چپ» و «راست» واقعی صفحه‌اند و جهت را نمی‌شناسند. معادل منطقی‌شان سمت «شروع» و «پایان» خط را می‌گیرد، پس در صفحهٔ فارسی خودکار جابه‌جا می‌شود. یک نمونهٔ قبل و بعد:

/* قبل: در صفحهٔ فارسی فاصله سمت اشتباه می‌افتد */
.item-icon { margin-right: 12px; }
.item      { padding-left: 16px; text-align: left; }
.badge     { position: absolute; left: 0; }

/* بعد: با هر جهتی درست کار می‌کند */
.item-icon { margin-inline-end: 12px; }
.item      { padding-inline-start: 16px; text-align: start; }
.badge     { position: absolute; inset-inline-start: 0; }

جدول کامل مهارت border-left را هم به border-inline-start و گوشهٔ گرد بالا-چپ را به border-start-start-radius می‌برد. یک نکتهٔ کوچک هم در همان فهرست هست که زیاد گیر می‌دهد: flex و grid خودشان از dir پیروی می‌کنند، پس row-reverse اضافه نکنید. این کار چیدمان را دوباره برمی‌گرداند.

کدام آیکون‌ها در حالت راست‌به‌چپ باید برعکس شوند؟

فرق «جهت» با «شکل» همین‌جا مهم می‌شود. مهارت دو فهرست دارد:

باید برعکس شوند	نباید برعکس شوند
فلش‌های عقب و جلو، شورون «بعدی» و «قبلی»	دکمه‌های پخش، مکث، جلو و عقب بردن رسانه
جداکنندهٔ مسیر (breadcrumb) و نشانهٔ باز شدن زیرمنو	تیک و ضربدر بستن
نوار پیشرفت، اسلایدر و مرحله‌شمار	ساعت و بقیهٔ اشیای دنیای واقعی
آیکون خطوط متن و آیکون‌های حرکت رو به جلو	لوگوها و آیکون کد (</>)

قاعدهٔ مهارت این است که فقط آیکون‌هایی را برعکس کنید که خودتان «جهت‌دار» علامت زده‌اید. هیچ‌وقت همهٔ آیکون‌ها را یک‌جا برعکس نکنید.

شماره تلفن وسط جمله فارسی چرا به‌هم می‌ریزد؟

جمله‌ای که هم فارسی دارد، هم انگلیسی و هم عدد، «دوجهته» است و مرورگر ترتیب تکه‌ها را خودش حدس می‌زند. نتیجه‌اش همان علامت تعجبی است که می‌پرد آن سر جمله، یا شماره‌ای که گروه‌هایش جابه‌جا می‌شوند. مهارت راه‌حل را قاعده‌مند می‌کند:

• شماره تلفن و کارت، شبا، کد رهگیری، ایمیل، آدرس اینترنتی و کد برنامه‌نویسی همیشه جزیرهٔ چپ‌به‌راست هستند (dir="ltr").
• متنی که موقع اجرا می‌آید و جهتش معلوم نیست، مثل نام کاربر یا عنوان محصول، در <bdi> می‌رود.
• فیلد شماره تلفن و ایمیل هم dir="ltr" می‌گیرند.

وزیرمتن، ارقام فارسی و Tailwind چه جایی دارند؟

مهارت وزیرمتن را اولین انتخاب می‌داند و پیشنهادش این است که فایل فونت را روی سرور خودتان بگذارید، نه روی CDN خارجی، چون Google Fonts از داخل ایران گاهی کند است و خطایش خاموش به فونت دیگری برمی‌گردد. برای متن فارسی ارتفاع خط حدود ۱٫۸ پیشنهاد می‌شود و letter-spacing و text-transform نباید روی آن بنشینند.

ارقام را هم باید از نمایش جدا دید: برای نمایش toLocaleString('fa-IR') رقم فارسی می‌دهد، اما در فرم‌ها کاربر ممکن است رقم فارسی یا عربی بزند و اعتبارسنجی با \d در جاوااسکریپت فقط رقم لاتین را می‌شناسد. مهارت می‌گوید ورودی را قبل از اعتبارسنجی به رقم لاتین ببرید.

برای Tailwind هم همان منطق است: به‌جای ml-* و pr-* از ms-* و pe-* استفاده کنید، به‌جای space-x-* از gap-*، و وردهای rtl: را برای چیزهایی نگه دارید که معادل منطقی ندارند.

چه چیزی از دستیار می‌گیرید؟

چند نمونهٔ درخواست که می‌توانید پس از فعال شدن مهارت بنویسید:

• «این صفحه را راست‌به‌چپ و فارسی کن و به جای margin-left از ویژگی‌های منطقی CSS استفاده کن.»
• «کدام آیکون‌های این رابط باید در حالت راست‌به‌چپ برعکس شوند؟»
• «این فرم را فارسی کن؛ شماره تلفن و ایمیل باید درست تایپ شوند و ارقام فارسی نمایش داده شوند.»
• «یک فهرست آزمون RTL برای این پروژهٔ Tailwind بده.»

شکل جواب را می‌شود از خود مهارت حدس زد. انتظار می‌رود کد با lang="fa" و dir="rtl" شروع شود، ویژگی‌های منطقی به‌جای چپ و راست بنشینند و فیلدهای تلفن و ایمیل dir="ltr" داشته باشند. فهرست آزمون آخر مهارت هم مواردی مثل باز شدن درست صفحه بدون Google Fonts را از شما می‌خواهد. نتیجهٔ هر پروژه فرق می‌کند و کد را باید خودتان در مرورگر ببینید.

rtl-ui یا rtl-design: کدام را بگذارم؟

بازارچه دو مهارت برای این کار دارد و کار هر دو یکی نیست. «رابط کاربری راست‌به‌چپ» (همین مهارت) فهرست ساختن است: دستیار از ابتدا طبق آن می‌نویسد. طراحی راست‌به‌چپ ساختهٔ یکی از اعضای جامعه است و طبق توضیح صفحه‌اش یک ابزار تشخیص خودکار (اسکریپت پایتون) هم دارد که کد را بررسی می‌کند.

قاعدهٔ انتخاب ساده است. پروژهٔ تازه می‌سازید یا یک رابط انگلیسی را فارسی می‌کنید؟ با rtl-ui شروع کنید. پروژهٔ بزرگ و قدیمی دارید که می‌خواهید از نظر خطا بگردید؟ rtl-design را امتحان کنید. اگر به‌جای قاعده، کامپوننت React آماده می‌خواهید، وایب‌فارسی راه دیگری است. تفاوت مهارت و سرور MCP هم در این نوشته آمده است. مهارت جامعه را هم در نوشتهٔ طراحی راست‌به‌چپ معرفی کرده‌ایم.

سه قدم تا فعال شدن

این یک مهارت (Skill) است، نه سرور؛ پس چیزی به حسابی وصل نمی‌شود و کلید هم نمی‌خواهد.

1. صفحهٔ مهارت را باز کنید.
2. در Claude Code دستورهای همان صفحه فایل‌ها را در پوشهٔ ~/.claude/skills/rtl-ui/ می‌گذارند. در Claude.ai و Claude Desktop فایل zip را در بخش Capabilities بارگذاری کنید.
3. به دستیار بگویید «این صفحه را راست‌به‌چپ کن». اگر مهارت را نشناخت، یک گفتگوی تازه باز کنید.

اگر هنوز دستیارتان را به بازارچه وصل نکرده‌اید، از اتصال دستیار شروع کنید. با مفهوم‌ها آشنا نیستید؟ راهنمای MCP نقطهٔ شروع خوبی است.

این مهارت چه کارهایی را برایتان انجام نمی‌دهد؟

• مهارت فقط دستورالعمل است. خودش کد را اسکن نمی‌کند و تضمین نمی‌دهد دستیار هر قاعده را رعایت کند.
• بعد از هر تغییر بزرگ صفحه را در موبایل و دسکتاپ و در تم روشن و تیره ببینید و فهرست آزمون آخر مهارت را بزنید.
• نام کلاس‌های Tailwind به نسخه بستگی دارد؛ مثلاً برای موقعیت‌دهی، نسخهٔ ۳ از start-* و end-* استفاده می‌کند و مستندات جدیدتر از inset-s-* و inset-e-*. نسخهٔ پروژه‌تان را به دستیار بگویید.
• مهارت ساختهٔ خود بازارچه است و مجوزش MIT است.

اگر امشب هم قرار است صفحهٔ فارسی بسازید، مهارت رابط کاربری راست‌به‌چپ را دریافت کنید و درخواست بعدی‌تان را با آن بدهید.