در رابط‌های کاربری فارسی، جهت کلی صفحه RTL است. اما همه اطلاعاتی که در یک فرم نمایش داده می‌شوند لزوما راست‌به‌چپ نیستند. شماره موبایل، کد ملی، کد پستی، شماره کارت، شناسه سفارش و بسیاری از داده‌های عددی دارای ترتیب مشخصی هستند و در بسیاری از موارد بهتر است داخل یک فیلد با جهت LTR نمایش داده شوند.

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

چرا فیلدهای عددی را LTR می‌کنیم؟

فرض کنید یک فرم فارسی دارای فیلدی برای وارد کردن کد ملی است. کد ملی یک مقدار ترتیبی است و کاربر انتظار دارد ارقام آن با همان ترتیبی که وارد می‌کند نمایش داده شوند. برای چنین داده‌ای می‌توان جهت فیلد را مستقل از جهت صفحه روی LTR قرار داد:

<input type="text" class="ltr" name="national_code">
.ltr {
    direction: ltr;
}

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

مشکل Placeholder فارسی در فیلد LTR

یکی از جزئیات ظریف در این نوع فیلدها، متن راهنما یا placeholder است. فرض کنید فیلد کد ملی چنین باشد:

<input
    type="text"
    name="national_code"
    placeholder="کد ملی..."
    class="ltr"
>

از آنجا که خود فیلد LTR شده است، ممکن است Placeholder فارسی نیز در جهتی قرار بگیرد که با ظاهر سایر فیلدهای فرم هماهنگ نباشد. در چنین شرایطی می‌توان جهت مقدار فیلد و تراز متن راهنما را جداگانه کنترل کرد:

.ltr {
    direction: ltr;
}

.ltr::placeholder {
    text-align: right;
}

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

کدام فیلدها بهتر است LTR باشند؟

هر فیلد عددی نیاز به direction: ltr ندارد. معیار بهتر، ماهیت داده و نحوه استفاده از آن است. داده‌هایی که یک رشته با ترتیب مشخص تشکیل می‌دهند، گزینه‌های مناسبی برای LTR هستند.

نمونه‌های رایج

  • کد ملی
  • شماره موبایل و تلفن
  • کد پستی
  • شماره کارت و حساب
  • کد رهگیری
  • شناسه سفارش
  • شماره فاکتور
  • شماره قرارداد
  • مقادیر عددی دارای علامت مثبت یا منفی
  • داده‌های ترکیبی شامل عدد و حروف لاتین

برای مثال، شناسه‌ای مانند INV-2026-1258 ماهیتی ترتیبی دارد و نمایش LTR آن برای کاربر قابل پیش‌بینی‌تر است.

آیا وجود عدد در متن فارسی یعنی متن باید LTR باشد؟

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

مرورگرها برای نمایش متن‌هایی که ترکیبی از زبان‌های راست‌به‌چپ و چپ‌به‌راست هستند از الگوریتم دوطرفه Unicode یا Unicode Bidirectional Algorithm استفاده می‌کنند. بنابراین بهتر است جهت یک بخش از صفحه فقط زمانی به‌صورت صریح تغییر کند که حتما به کنترل دقیق ترتیب نمایش آن نیاز داشته باشیم.

تفاوت direction با text-align

این دو ویژگی CSS وظایف متفاوتی دارند و نباید جای یکدیگر استفاده شوند.

  • direction جهت نوشتار و نحوه پردازش متن‌های دوطرفه را مشخص می‌کند.
  • text-align محل قرارگیری ظاهری متن در فضای فیلد را تعیین می‌کند.

بنابراین اگر هدف این است که یک کد عددی به‌صورت LTR پردازش شود، استفاده از text-align: left به‌تنهایی جایگزین مناسبی برای direction: ltr نیست.

شکل نمایش اعداد فارسی و انگلیسی

ویژگی direction شکل اعداد را تغییر نمی‌دهد. برای مثال، اگر کاربر مقدار ۱۲۳۴۵۶ را وارد کند، قرار دادن فیلد روی LTR باعث تبدیل آن به 123456 نمی‌شود.

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

استفاده از RLM برای نمایش صحیح انتهای Placeholder فارسی

در فیلدهایی که جهت اصلی آن‌ها LTR است، اگر Placeholder به زبان فارسی باشد، ممکن است کاراکترهایی که جهت ذاتی ندارند، مانند سه‌نقطه، در جای نادرستی نمایش داده شوند. برای مثال، در عبارت «کد ملی...» انتظار داریم سه‌نقطه در انتهای متن فارسی قرار بگیرد، اما ترکیب متن RTL با فیلد LTR می‌تواند باعث شود مرورگر جای آن را به این شکل نشان بدهد: «...کد ملی».

یکی از راه‌های کنترل این رفتار، استفاده از کاراکتر نامرئی RLM یا Right-to-Left Mark است. این کاراکتر با کد Unicode برابر U+200F است و با اینکه چیزی روی صفحه نمایش نمی‌دهد، جهت RTL را به انتهای متن منتقل می‌کند.

در HTML می‌توان آن را با موجودیت &rlm; در انتهای Placeholder قرار داد:

<input
    type="text"
    name="national_code"
    placeholder="کد ملی...&rlm;"
    class="ltr"
>

وجود RLM باعث می‌شود مرورگر بداند انتهای این عبارت متعلق به یک متن راست‌به‌چپ است و کاراکترهایی مانند سه‌نقطه را متناسب با جهت متن قرار دهد. این موضوع زمانی اهمیت بیشتری پیدا می‌کند که Placeholder فارسی داخل یک فیلد LTR قرار گرفته باشد.

به این ترتیب می‌توان جهت فیلد را برای مقدار اصلی روی LTR نگه داشت، Placeholder را با text-align: right در سمت راست قرار داد و با استفاده از RLM، ترتیب صحیح کاراکترهای بدون جهت در انتهای متن فارسی را حفظ کرد.

بیشتر بخوانید:

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

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