متن دوسویه در وب ۲: شروع کار

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

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

روش اول: استفاده از خاصیت ‪dir="auto"‬

در این روش تنها به تقریبا همهٔ برچسب‌های HTML که حاوی متن هستند خاصیت ‪dir="auto"‬ را اضافه می‌کنیم. این یعنی برچسب‌های Hx و p و pre و blockquote و حتی input و text-area باید چنین خاصیتی را دریافت کنند تا متن داخل آن‌ها بر اساس اولین حرفی که واردشان می‌شود تعیین شود.

در مورد فهرست‌ها موضوع قدری متفاوت است. به نظرم می‌رسد معیارها و استانداردهای وب برای این موضوع فکر درستی نکرد است. اما در ۹۹ درصد موارد، افزودن ‪dir="auto"‬ به برچسب‌های ul/ol کفایت می‌کند. با این کار، جهت کل عناصری که داخل فهرست قرار می‌گیرند بر اساس جهت اولین نویسه قوی اولین عنصر تعیین می‌شود. افزودن ‪dir="auto"‬ به li باعث نمایش نامناسب فهرست می‌شود.

چنانچه عناصر دیگری مانند div نیز وجود دارند که حاوی متن هستند، همین روش می‌تواند برای‌شان استفاده شود. تا زمانی که ویژگی display این عناصر روی block تنظیم شده باشد، همه چیز درست نمایش خواهد یافت.

پس از انجام این کار، احتمالا نیاز به یک سری تغییرات در سبک‌های css وجود داشته باشد که در قسمت بدی این مجموعه مقالات به آن خواهم پرداخت. اما بد نیست اشاره کنم که اگر روی این عناصر و برچسب‌ها از سبک text-align: left|right استفاده کرده‌اید، آن را به text-align: start|end تغییر دهید. در این باره بعدا بیشتر خواهم نوشت.

روش دوم: افزودن برچسب <bdi>

با ارائه نسخه پنج HTML برچسب‌های زیادی به این زبان اضافه شدند که از میان آن‌ها می‌توان به برچسب‌های مربوط به متن دوسویه شامل <bdi> اشاره کرد.

استفاده از این بر چسب ها بسیار ساده است. تقریبا هر کجا که در روش قبل پیشنهاد شد که از خاصیت ‪dir="auto"‬ استفاده شود در اینجا لازم است آن برچسب بین برچسب‌های <bdi> قرار بگیرند. همین و بس!

بعنوان مثال باید پاراگراف یا فهرست به شکل زیر نوشته شوند:

<bdi><p>متن</p></bdi>

<bdi>
  <ul>
    <li>مورد اول<//li>
    <li>مورد دوم<//li>
    <li>مورد سوم<//li>
  </ul>
</bdi>

خروجی کار در این روش باید با خروجی کار در روش اول یکی باشد. و همانطور که در قسمت قبل هم اشاره شد نیاز است تا برخی از سبک‌های CSS نیز تغییر کنند.

روش سوم: استفاده صرف از CSS

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

برای اینکار لازم است که از سبک unicode-bidi: plaintext استفاده شود. با این کار به مرورگر می‌گویم که محتوای داخل این برچسب را از نظر دوسویگی، مانند متن ساده در نظر بگیر. در بسیاری از موارد این کار مشابه افزودن ‪dir="auto"‬ عمل می‌کند ولی توجه داشته باشید که این، آن نیست. شاید بهترین مثال، عدم خروجی مشابه بین این دو در زمان مواجهه با فهرست‌ها باشد. متاسفانه با این روش نمی‌تونید فهرست‌ها را در جهت درست نمایش دهید (یا لااقل من راهی برای انجام این کار پیدا نکرده‌ام). لذا پیشنهاد می‌کنم از این روش تا جایی که می‌توانید استفاده نکنید مگر آنکه دسترسی به ویرایش متن HTML نداشته باشید و صرفا بخواهید با کمک CSS تغییراتی در ظاهر اعمال بکنید.

کدام روش؟

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

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

در قسمت بعدی، نکاتی را درباره سبک‌هایی در CSS که مرتبط با این مساله است را تشریح خواهم کرد.