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

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

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

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

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

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

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

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

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

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

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

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

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

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

کدام روش؟

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

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

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