خطاهای رایج RTL در CSS فارسی: مکان‌نما چرا می‌پرد؟

ساعت یازده شب است و فرم ثبت‌نام فارسی‌تان آماده شده. شماره موبایل را تایپ می‌کنید و وسط کار مکان‌نما می‌پرد، رقم‌ها جابه‌جا می‌نشینند و فیلد ایمیل هم همین بلا را سرتان می‌آورد. این یکی از خطاهای رایج RTL در CSS است، و بدتر اینکه دستیار برنامه‌نویسی‌تان هم همان را تولید کرده بود. مهارت (Skill) «طراحی راست‌به‌چپ» برای همین ساخته شده: جلوی این اشتباه‌ها را در کد جدید می‌گیرد و کد قدیمی را هم می‌گردد.

چرا مکان‌نما در فیلد شماره تلفن فارسی می‌پرد؟

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

طبق توضیح سازنده، مهارت دقیقاً روی همین نقطه حساس است: فیلد شماره تلفن یا ایمیل بدون dir="ltr". نتیجه‌اش در کد این است:

<!-- معمولاً همین را می‌نویسد -->
<input type="tel" name="phone">

<!-- با مهارت، جهت فیلد با محتوایش یکی می‌شود -->
<input type="tel" name="phone" dir="ltr">

کدام خطاهای رایج RTL را دستیار هوش مصنوعی تکرار می‌کند؟

مدل‌ها بیشتر نمونه‌های چپ‌به‌راست دیده‌اند و عادت‌هایشان را به صفحهٔ فارسی هم می‌برند. سازنده مهارت سه مورد را در صدر می‌گذارد: margin-left به جای ویژگی‌های منطقی CSS، فیلد بدون dir="ltr" که دیدیم، و letter-spacing روی متن فارسی.

مورد اول را با یک مثال ببینید. margin-left در صفحهٔ راست‌به‌چپ سمت اشتباه را باز می‌کند، در حالی که ویژگی منطقی خودش جهت را می‌فهمد:

/* بدون مهارت */
.card-icon { margin-left: 12px; }

/* با ویژگی منطقی */
.card-icon { margin-inline-start: 12px; }

مورد سوم ریشهٔ دیگری دارد. حرف‌های فارسی به هم می‌چسبند و letter-spacing این اتصال را پاره می‌کند، پس مهارت آن را روی فارسی ممنوع می‌داند.

فهرست مهارت بلندتر از این سه مورد است. طبق کاتالوگ، ۲۲ خطای رایج دارد و هر کدام با یک نمونهٔ غلط و یک نمونهٔ درست آمده. موضوع‌ها از این قرارند:

• متن و داده: «ی» و «ک» فارسی، ارقام فارسی، نیم‌فاصله، تاریخ شمسی و علائم نگارشی.
• چیدمان: ویژگی‌های منطقی CSS، آیکون‌هایی که باید برعکس شوند و آن‌هایی که نه، جهت کشو و فیلد ورودی.
• حروف‌نگاری: ارتفاع خط متن فارسی و بررسی اینکه فونت واقعاً حرف‌های فارسی را نشان می‌دهد.

هم برای وب و هم برای Flutter بخش جدا دارد.

اسکریپت تشخیص چه کاری را از دست من برمی‌دارد؟

فهرست خطا به درد کد جدید می‌خورد. ولی پروژه‌ای که ماه‌هاست در حال ساخت است چند صد فایل دارد و کسی حوصلهٔ دستی گشتن ندارد. برای همین مهارت یک اسکریپت پایتون هم دارد که به گفتهٔ سازنده هیچ وابستگی‌ای نمی‌خواهد و ۱۲ قاعده را خودکار بررسی می‌کند.

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

چطور مهارت را نصب کنم و اولین بررسی را بزنم؟

1. در ترمینال این دستور را بزنید: npx skills add Baghlani/rtl-design -g. گزینهٔ -g مهارت را برای همهٔ پروژه‌ها نصب می‌کند و بدون آن فقط برای پروژهٔ فعلی نصب می‌شود. جزئیات در صفحهٔ مهارت هست.
2. دستیارتان را ببندید و دوباره باز کنید. دستیارها مهارت‌ها را هنگام شروع نشست پیدا می‌کنند، پس بدون این کار چیزی عوض نمی‌شود.
3. یکی از این پرسش‌ها را در پروژه‌تان بنویسید:

• «کد رابط من را از نظر خطاهای راست‌به‌چپ و فارسی بررسی کن.»
• «این صفحهٔ فارسی را بساز و از ویژگی‌های منطقی CSS به جای margin-left استفاده کن.»
• «فیلد شماره تلفن و ایمیل این فرم را طوری درست کن که مکان‌نما نپرد.»
• «بررسی کن فونت این صفحه واقعاً حرف‌های فارسی را نمایش می‌دهد و letter-spacing ندارد.»

فرق را در همین دو چیز می‌بینید. بدون مهارت، دستیار همان margin-left و فیلد بدون dir="ltr" را می‌نویسد و اشتباه‌ها بعد از انتشار پیدا می‌شوند. با مهارت، از اول ویژگی منطقی و جهت درست را می‌نویسد، و در بررسی کد قدیمی هم همان موارد را نشان می‌دهد. اگر با مفهوم مهارت و فرقش با سرور MCP آشنا نیستید، این مقایسه کمک می‌کند.

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

در بازارچه مهارت دیگری با همین موضوع هست: رابط کاربری راست‌به‌چپ که فهرست کامل کارهای رابط فارسی است. فرق اصلی در اینجا ابزار تشخیص و آزمون خود مخزن است که فقط در rtl-design دارید.

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

چه چیزی را قبل از اعتماد باید خودتان بسنجید؟

سازنده می‌گوید در آزمونی با پنج صفحهٔ فارسی روی Claude Sonnet 5 و Claude Haiku 4.5، خطاهای هر صفحه با مهارت به صفر رسید. این عدد ادعای خود مخزن است و ما آن را جداگانه اندازه نگرفته‌ایم. پس آن را وعده ندانید.

مهارت را یک عضو جامعه به نام Baghlani ساخته، نه ما. مجوزش Apache-2.0 است و سازنده می‌گوید با بیش از ۷۰ دستیار برنامه‌نویسی، از جمله Claude Code، کار می‌کند. هر خروجی را قبل از انتشار روی مرورگر واقعی ببینید، مخصوصاً فرم‌ها را با گوشی تایپ کنید. اسکریپت تشخیص فقط ۱۲ قاعده را می‌گیرد و جای نگاه خودتان را نمی‌گیرد.

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