نحوه راست چین در HTML – توضیح کامل با کد و مثال

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

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

راست‌ چین در HTML

به طور پیش‌فرض، HTML جهت متن را از چپ به راست تنظیم می‌کند. با این حال، هنگام طراحی محتوای وب یا برنامه‌های کاربردی که با زبان‌های مانند عربی، عبری، پشتو، فارسی، اردو و غیره هستند، به عمل راست‌چین کردن نیاز داریم. دو روش برای تنظیم جهت متن در HTML وجود دارد:

1. استفاده از ویژگیdir: می‌توان ویژگی dirرا به عناصر خاص HTML اعمال کرد که نشان می‌دهد محتوای داخل باید از چپ به راست یا راست به چپ نمایش داده شود.
2. استفاده از ویژگی جهت CSS: این ویژگی به کاربر امکان می‌دهد جهت متن را برای عناصر با استفاده از شیوه‌نامه‌های CSS تنظیم کند. می‌توان ویژگی ltr را برای چپ به راست یا ویژگی rtlرا برای راست به چپ در کدهای CSS تنظیم کرد.

ویژگی dir در HTML چیست؟

ویژگی «dir» در زبان برنامه نویسی HTML به منظور تعیین جهت متن استفاده می‌شود. می‌توان آن را برای عناصر مختلف اعمال کرد و در کل از این ویژگی برای راست‌چین کردن در HTML استفاده می‌شود. برای مثال در کد زیر می‌توان جهت متن عنصر textarea را با استفاده از مقدار rtl در ویژگی dir، از راست به چپ تنظیم کرد که سینتکس آن به صورت زیر است:

به طور پیش‌فرض، جهت متن از عناصر والد به ارث می‌رسد. بنابراین، اگر جهت متن روی عنصر HTML تنظیم شود، برای کل سند HTML اعمال خواهد شد. سینتکس ویژگیdirبه شرح زیر است:

در اینجا مقادیر ممکن برای ویژگیdirآمده است:

• ltr: این مقدار پیش‌فرض است و جهت متن از چپ به راست را نشان می‌دهد.
• rtl: این مقدار جهت متن از راست به چپ را نشان می‌دهد.
• auto: این مقدار به مرورگر اجازه می‌دهد تا جهت متن را بر اساس محتوا تعیین کند. استفاده از این مقدار فقط زمانی توصیه می‌شود که جهت متن نامشخص باشد.

مقدمه‌ ای بر RTL در HTML

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

به‌طور پیش‌فرض، اگر استایل‌های پیش‌فرض را برای عنصر HTML در مرورگر بررسی شود، احتمالاً خواهیم دید که ویژگی dirروی ltr(از چپ به راست) تنظیم شده است. این ویژگی جهت متن و عناصر صفحه را تعیین می‌کند. برای ایجاد طرح RTL، باید تنظیماتی را در HTML و CSS خود انجام داد. بیایید نگاهی به نحوه انجام این کار  با دو روش گفته‌شده بیندازیم.

۱. HTML

برای تغییر جهت زبان سند خود، باید ویژگی dirرا به عنصر ریشه فایل HTML خود اضافه کرد، معمولاً تگ html برای این کار استفاده خواهد شد. برای نشان دادن جهت راست به چپ می‌توان مقدار این ویژگی را روی rtlتنظیم کرد.

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

همچنین قطعه کد CSS آن به صورت زیر است:

خروجی مثال فوق به صورت زیر است:

۲. CSS

علاوه بر تنظیم ویژگی dir، همچنین می‌توان از CSS برای تعیین جهت به طور واضح استفاده کرد. می‌توان سبک «direction: rtl;» به هر عنصر یا کلاس خاصی اضافه شود تا جهت LTR پیش‌فرض را لغو کرد.

با این حال، گروه کاری «CSS (CSSWG)» توصیه می‌کند که جهت عنصر HTML ریشه را برای اطمینان از طرح‌بندی دوطرفه صحیح، حتی در غیاب CSS تعریف کنیم. این بهترین روش برای اطمینان از ظاهر طراحی ثابت RTL در کل سند است.

توجه به این نکته مهم است که ویژگیdir="auto" نیز موجود است که به طور خودکار جهت متن را بر اساس محتوای تجزیه شده تعیین می‌کند. با این حال، زمانی که جهت متن واقعاً ناشناخته باشد، باید از آن به عنوان آخرین راه‌حل استفاده شود. با درک و به کارگیری تکنیک‌های استایل‌سازی RTL، می‌توان صفحات وبی ایجاد شوند که با جهت‌گیری‌های زبانی مختلف پاسخگو باشند و تجربه کاربری بهتری را برای مخاطبان تضمین کنند.

مثالی برای راست‌ چین کردن طرحی فرضی با HTML

برای نشان دادن فرآیند تبدیل طرح از LTR به RTL، اجازه دهید مثالی کاملی را بررسی کنیم. ما نوعی ساختار طراحی داریم که از عنصر فرضی articleبا کلاس mediaتشکیل شده است. در داخل این عنصر، تصویر و divبا کلاس media__contentوجود دارد. بخش media__contentشامل عنوان، چند پاراگراف و پیوندی برای مشاهده صفحه مدنظر است.

خروجی اولیه کد بالا به صورت زیر است:

در ابتدا در طراحی LTR، تصویر با استفاده از ویژگی floatدر سمت چپ تراز می‌شود. برای اطمینان از پاک‌سازی مناسب float، یک clearfixبرای کلاس mediaاعمال خواهد شد. کد CSS برای این کار به شرح زیر است:

حال، بیایید به طراحی مثال بالا برای پشتیبانی از RTL بپردازیم. برای رسیدن به این هدف، باید ویژگی dir="rtl"را به کلاس mediaاضافه کرد. پس از اعمال جهت RTL، طرح به‌جز تصویر برعکس به نظر می‌رسد. این کار به این دلیل اتفاق می‌افتد که تصویر همچنان دارای ویژگی floatدر سمت چپ و حاشیه راست ۱۶ پیکسل است. برای حل این مشکل، باید این استایل‌ها را به طور خاص برای طرح RTL لغو کرد. کد CSS به‌روز شده به صورت زیر است:

با هدف قرار دادن تصویر در کلاس mediaبا انتخابگر ویژگی dir="rtl"، می‌توان ویژگی floatرا به سمت راست تنظیم و حاشیه‌ها را مطابق با آن تنظیم کرد. این امر تضمین می‌کند که تصویر به درستی در طرح RTL گنجانده شده است. قطعه کد کلی این مثال در زیر آورده شده و کد HTML آن برای هردو حالت راست‌چین و چپ چین به صورت زیر است.

همچنین قطعه کد CSS آن به صورت زیر است:

خروجی مقایسه‌ای دو طرح بالا به صورت زیر است:

ترکیب محتوای انگلیسی و فارسی در طرح LTR

یکی از قابلیت‌های مهم عمل راست‌ چین در HTML، امکان ترکیب محتوای انگلیسی و فارسی (و عربی) در طرح‌ها است؛ اما چه اتفاقی می‌افتد اگر برخی از متن‌ها ترکیبی از کلمات انگلیسی و فارسی داشته باشند؟ و اگر صفحه‌بندی آن LTR باشد آیا منجر به ارائه نمایش بصری عجیبی در صفحه وب می‌شود یا خیر؟ با این شرایط هنگامی که متن در مرورگر نمایش داده می‌شود، عنوان نامناسب ظاهر می‌شود و خواندن آن برای کسانی که از زبان‌های راست‌چین مانند فارسی استفاده می‌کنند گیج‌کننده خواهد بود. مثال زیر نحوه مقایسه راست‌چین و چپ چین ترکیب محتوای انگلیسی و فارسی را نشان داده که قطعه کد HTML آن به صورت زیر است:

همچنین قطعه کد CSS این مثال به صورت زیر است:

خروجی کدهای بالا به صورت زیر است:

برای جلوگیری از مشکل بالا باید همیشه جهت زبان تنظیم شود. با افزودن dir="rtl"به عنصر، متن مطابق انتظار ظاهر می‌شود. در رابطه با همین مثال بالا زمانی که عنوان طولانی‌تر شود، پیچیدگی افزایش می‌یابد. در مثال بعدی با همان کدهای بالا فقط عنوان را طولانی‌تر کرده‌ایم که نتیجه آن غیرمنتظره بود. فرض بر این است که عنوان را به جمله زیر تغییر داده باشیم:

• طرز تهیه Blueberry Cheesecake خوشمزه به سه روش مختلف

حال خروجی مقایسه‌ای این بار برای مثال بالا به صورت زیر خواهد بود:

طبق مثال فوق، وقتی dir="rtl"روی عنصر تنظیم می‌شود، عنوان بسیار واضح‌تر خواهد شد. جمله از نظر گرامری صحیح و به ترتیب درست به نظر می‌رسد.

مدیریت فونت ها در HTML

هنگام طراحی برای چیدمان‌های چپ به راست (LTR) و راست به چپ (RTL)، مهم است که فونت‌های مناسب برای هر جهت در نظر گرفته شوند. برخی از فونت‌ها می‌توانند برای چندین زبان به خوبی کار کنند اما برخی از مشاغل و وب‌سایت‌ها ترجیح می‌دهند از فونت متفاوتی به طور خاص برای طرح‌های RTL استفاده کنند. برای تطبیق با این موضوع، باید فونتی جداگانه در تنظیمات فونت پروژه خود تعریف کرد. این قابلیت به کاربر امکان می‌دهد فونت متفاوتی را به طور خاص برای طرح‌بندی RTL تعیین کند.

خانوده فونت در HTML

در CSS، ویژگی font-familyبه کاربر این امکان را می‌دهد که فهرستی از فونت‌ها را برای رندر کردن متن مدنظر در صفحات وب تنظیم کند. در صورتی که فونت اصلی بارگیری نشود، راهی برای بازگشت آسان به فونت‌های جایگزین فراهم خواهد شد. با این حال، توجه به این نکته مهم است که اگر فونت خاصی از حروف یا کاراکترهای خاص پشتیبانی نمی‌کند، مرورگر به جستجوی فونت‌های موجود ادامه می‌دهد.

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

در این حالت، اگر فونت Robotoحروف فارسی و عربی خاصی را تشخیص ندهد، به دومین اعلان فونت که Amiriاست بازمی‌گردد. به این ترتیب، مرورگر به جستجوی فونتی ادامه می‌دهد که بتواند کاراکترهای مورد نیاز را ارائه دهد. در زیر مثالی ارائه شده است که این مفهوم را نشان می‌دهد. CSS ارائه شده، ویژگیfont-familyرا تنظیم می‌کند و اگر فونت اول از حروف خاصی پشتیبانی نکند، مرورگر به طور خودکار به فونت دوم بازمی‌گردد. قطعه کد این مثال به صورت زیر است:

همچنین قطعه کد CSS آن به صورت زیر است:

خروجی مثال بالا به صورت زیر است:

ماژول طرح بندی Flexbox

«فلکس باکس» (Flexbox) نوعی ماژول طرح‌بندی است که عناصر را بر اساس حالت نوشتن سند سازمان‌دهی می‌کند. حالت نوشتن نحوه چیدمان بلوک‌ها در صفحه را تعیین خواهد کرد. برای مثال، وب‌سایت چینی معمولاً از طرح‌بندی بالا به پایین پیروی می‌کند. طرح Flexbox عناصر را مطابق با حالت نوشتن سند تنظیم خواهد کرد. به طور پیش‌فرض، ویژگی حالت نوشتن برای زبان‌های انگلیسی و فارسی روی horizontal-tbتنظیم شده است. در زمینه فلکس باکس horizontal-tbبه این معنی است که محتوا به‌صورت افقی از چپ به راست و به‌صورت عمودی از بالا به پایین جریان می‌یابد. هر خط بعدی در زیر خط قبلی قرار می‌گیرد.

مزیت قابل توجه Flexbox توانایی آن برای تطبیق با تغییر جهت صفحه به راست به چپ (RTL) است. در چنین مواردی، Flexbox به طور خودکار آیتم‌های خود را برمی‌گرداند تا جهت جدید را در خود جای دهد. این ویژگی روشی مناسب برای مدیریت حالت‌های مختلف نوشتن فراهم می‌کند. نمودار زیر نحوه چرخش محور Flexbox را بر اساس جهت صفحه نشان می‌دهد.

مثالی برای نشان دادن مفهوم Flexbox

مثال زیر برای نشان دادن مفهوم Flexbox آورده شده که کد HTML آن به صورت زیر است:

همچنین قطعه کد CSS این مثال به صورت زیر است:

در مثال داده شده، سه عنصر وجود دارد که به صورت افقی در کانتینری مرتب شده‌اند. هر عنصر برای نشان دادن تمایز هنگام تغییر جهت شماره‌گذاری استفاده می‌شود. برای دستیابی به این طرح، عنصر کانتینر با کلاس elementاستایل بندی شده و از ویژگی‌های Flexbox استفاده می‌کند. به طور خاص، کانتینر با استفاده از display: flex;به عنوان نوعی فلکس باکس تنظیم شده است. علاوه بر این، مقدار پیش‌فرض ویژگی flex-directionبه عنوان تراز افقی مشخص می‌شود. در مثال بالا سه آیتم به عنوان عناصر divبا کلاس itemنمایش داده می‌شوند. این اقلام داخل فلکس باکس قرار می‌گیرند. اعداد ۱، ۲ و ۳ در هر مورد مربوطه قرار می‌گیرند تا شماره‌گذاری را ارائه دهند.

همچنین توجه به مثال زیر هم در این رابطه مهم بوده که قطعه کد HTML آن به صورت زیر است:

قطعه کد CSS این مثال هم به صورت زیر است:

خروجی مثال بالا به صورت زیر است:

ماژول طرح بندی شبکه مانند در HTML

ماژول «طرح‌بندی شبکه‌ای» (Grid Layout) شبیه ماژول Flexbox است که حالت نوشتن سند را نیز در نظر می‌گیرد. این ماژول همان مزایای استفاده از Flexbox را فراهم می‌کند. به عنوان مثال، در قطعه کد ارائه شده زیر، هنگامی‌که جهت سند از چپ به راست (LTR) است، نوار کناری در سمت چپ و محتوای اصلی در سمت راست قرار می‌گیرد. برعکس، زمانی که جهت از راست به چپ (RTL) باشد، نوار کناری در سمت راست و محتوای اصلی در سمت چپ خواهد بود. با کمک CSS، این تغییر موقعیت‌ها به طور خودکار بر اساس جهت صفحه به دست می‌آید.

کد اصلاح شده بالا به صورت زیر است:

در کد به‌روز شده، divخارجی با کلاس elementبرای وضوح به containerتغییر یافته است. علاوه بر این، نام‌های کلاس‌های توصیفی بیشتری به بخش‌های جداگانه درون کانتینر داده شده است و در آن CSS ثابت می‌ماند. خروجی کدهای بالا به صورت زیر است:

کد اصلاح شده منجر به طرح‌بندی شبکه‌ای می‌شود که در آن نوار کناری ۲۲۰ پیکسل در عرض و محتوای اصلی فضای باقی مانده را اشغال می‌کند. طرح شبکه‌ای به طور خودکار موقعیت نوار کناری و محتوای اصلی را بر اساس جهت نوشتن سند تنظیم خواهد کرد.

اشتباهات رایج راست‌ چین در HTML چیست؟

هنگام تغییر جهت محتوا از چپ به راست (LTR) به راست به چپ (RTL) برای زبان‌هایی مانند فارسی و عربی، اشتباهات رایجی وجود دارد. از اشتباهات رایج میتوان به مواردی مانند «فاصله بین حروف»، «شفافیت متن»، «تفاوت در اندازه کلمات در زبان‌های مختلف» و غیره اشاره کرد. این اشتباهات را می‌توان به راحتی شناسایی و آن‌ها را رفع کرد. در ادامه این بخش از مطلب آموزش راست‌ چین در HTML به این اشتباهات خواهیم پرداخت.

۱. فاصله بین حروف

در زبان انگلیسی، افزودن «فاصله حروف» (letter-spacing ) روشی معمول برای انجام کارهای تایپوگرافی است. با این حال، هنگام کار با محتوای عربی یا فارسی باید از این رویکرد اجتناب شود. حروف فارسی و عربی به هم متصل می‌شوند، استفاده از فاصله حروف در متن عربی می‌تواند آن را از هم گسسته جلوه دهد. به عنوان مثال، در محتوای انگلیسی زیر، فاصله حروف اعمال شده است، که منجر به ظاهری کاربرپسندتر می‌شود:

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

قطعه کد CSS مثال بالا به صورت زیر است:

خروجی مثال بالا به صورت زیر است:

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

۲. شفافیت متن

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

همچنین قطعه کد CSS مثال فوق به صورت زیر است:

خروجی مثال فوق به صورت زیر است:

به طور خاص، در متن عربی، ممکن است تغییرات رنگی ناهموار بین حروف وجود داشته باشد. توجه به این نکته ضروری است که این موضوع به دلیل تنظیم فاصله حروف ایجاد نمی‌شود. در نتیجه، راه‌حلی ساده برای غلبه بر این مشکل، اختصاص رنگ متن بدون استفاده از تنظیمات «RGBa» یا «opacity» است.

۳. تفاوت در اندازه کلمات بین زبان ها

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

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

همچنین توجه به مثالی واقعی دیگر از لینکدین با دو منوی عربی و انگلیسی هم خالی از لطف نیست.

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

مشکل مشابهی را می‌توان در توییتر نیز مشاهده کرد.

۴. برش متن، از مشکلات راست‌ چین در HTML

مشکل برش متن در پروژه‌های طراحی سایت چندزبانه و ترکیبی وجود دارد و این یکی دیگر از چالش‌های انجام امور راست‌ چین در HTML است. برای درک بهتر این موضوع بهتره به مثال زیر نگاهی بیندازیم که قطعه کد HTML آن به صورت زیر است:

همچنین قطعه کد CSS مثال فوق به صورت زیر است:

خروجی مثال بالا به صورت زیر است:

برش متن انگلیسی دقیق نیست. این کار باید در انتهای عنصر اتفاق بیفتد نه در ابتدای آن. راه‌حل اول چالش این است که ویژگی dir="auto"را مستقیماً به عنصر اضافه کرد. با انجام این کار، مرورگر به طور خودکار تجزیه‌وتحلیل و تعیین جهت محتوا را انجام می‌دهد.

۵. انتخاب فونت نامناسب RTL

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

از منظر فردی عرب زبان، خواندن کلمه «تغرید» به چند دلیل زیر چالش‌برانگیز است:

1.  فونت انتخاب شده برای اسکریپت‌های RTL مناسب نیست.
2.  وزن پررنگ فونت بر خوانایی تأثیر منفی می‌گذارد.
3.  نقاط در کلمه کوچک هستند و خیلی نزدیک به حروف قرار دارند و این مشکل تشخیص آن‌ها را دشوار می‌کند.

برای افزایش خوانایی، پیشنهاد می‌شود متن به صورت زیر طراحی مجدد شود:

در این طرح اصلاح شده، فونت RTL مناسب‌تری انتخاب شده است. وزن متن برای وضوح بیشتر تنظیم شده و نقطه‌های کلمه «تغرید» برای خوانایی بهتر بزرگ شده و با فاصله مناسب قرار گرفته است. با در نظر گرفتن این ملاحظات و انتخاب فونتی که به طور خاص برای اسکریپت‌های RTL طراحی شده است، می‌توان اطمینان حاصل کرد که طراحی از نظر بصری جذاب و به راحتی برای کاربران قابل‌درک است.

۶. ترکیب اعداد هندی و عربی

وقتی صحبت از نوشتن اعداد می‌شود، در فارسی و بیشتر زبان‌های راست‌چین دو سیستم متمایز وجود دارد:

• اعداد هندی: «٠ ١ ٢ ٣ ٤ ٥ ٦ ٧ ٨ ٩»
• اعداد عربی: «0123456789»

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

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

محدودیت های راست‌ چین در HTML

راست‌ چین در HTML دارای محدودیت‌های خاص خود است و نمی‌توان هرکاری را با آن به صورت دلخواه انجام داد. در این بخش از مطلب این محدودیت‌ها را مورد بررسی قرار خواهیم داد.

۱.  مشکلات رایج ارتفاع خط در RTL

هنگام طراحی برای طرح‌بندی‌های RTL (از راست به چپ)، مهم است که «ارتفاع خط» (line-height) برای متن به صورت بهینه تنظیم شود. اغلب، حروف مختلف برای طرح‌بندی‌های RTL استفاده می‌شود و آزمایش نحوه نمایش محتوا در خطوط تکی و چندخطی بسیار مهم است. برای مثال، بیایید متنی فارسی را مثال بزنیم. فاصله بین خطوط برای متون عربی و فارسی معمولاً در مقایسه با متن انگلیسی کمتر است، حتی اگر هر ارتفاع دو خط یکسان باشند. در نتیجه، تنظیم ارتفاع خط بر این اساس برای اطمینان از خوانایی محتوای راست‌چین مهم است.

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

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

٢. محدودیت پیوندهای زیر خط دار

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

در تصویر ارائه شده، مناطق خاصی مشاهده خواهند شد که غیرعادی یا نامناسب به نظر می‌رسند که با دایره قرمز رنگ مشخص شده‌اند. به نظر می‌رسد که آندرلاین اضافه شده نقاطی را که معمولاً روی حروف عربی یافت می‌شوند، می‌پوشاند. همچنین در تصویر زیر و در نمایی نزدیکتر، مشخص می‌شود که نقاط برجسته شده با رنگ آبی، با آندرلاین همپوشانی دارند. این می‌تواند بر خوانایی متن تأثیر منفی بگذارد و خواندن آن را چالش برانگیزتر کند. خوشبختانه، راه‌حلی برای این مشکل وجود دارد که آن هم استفاده از آندرلاین سفارشی با CSS است. در ادامه دو روش حل این مشکل آورده شده است.

1.تزیین متن

ظاهر متون را می‌توان با استفاده از ویژگی‌های text-decoration-styleو text-decoration-colorتغییر داد. این تغییرات ممکن است به وسیله تمام حروف و اندازه‌های فونت پشتیبانی نشوند. در حال حاضر، فایرفاکس مرورگری است که بهترین پشتیبانی را از این ویژگی‌ها ارائه می‌دهد.

با بررسی بیشتر این مشکل در «GitHub»، مشخص شد که استفاده از ویژگی text-decoration-skip-inkمی‌تواند مشکل همپوشانی نقاط با آندرلاین را حل کند. مقدار پیش‌فرض این ویژگی روی skipتنظیم شده است. با این حال، ذکر این نکته ضروری بوده که تا کنون، این ویژگی در «سافاری» و نسخه‌های قدیمی «مایکروسافت اج» پشتیبانی نمی‌شود. با این حال، نسخه جدیدتر مایکروسافت اج مبتنی بر کروم از آن پشتیبانی می‌کند. مثال زیر برای بیان این هدف است:

قطعه کد CSS مثال فوق به صورت زیر است:

خروجی مثال بالا به صورت زیر است:

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

۲. استفاده از Box Shadow

برای بیان شیوه استفاده از box-shadowبرای حل مشكل همپوشانی پیوندهای حاوی آندرلاین ابتدا بهتر است کد زیر را در نظر بگیریم:

کد بالا کلاسی به نام box-shadowرا تعریف کرده که ویژگی‌های colorو text decoration color ،tyle ،underline offset ،thickness را تعیین می‌کند. همچنین نوعی box-shadoبا افکت درونی تنظیم خواهد کرد. قانون @supports برای تشخیص اینکه آیا مرورگر از ویژگی text-decoration-colorپشتیبانی می‌کند یا خیر استفاده می‌شود. اگر اینطور باشد، box-shadowبرای عناصر با کلاس box-shadowروی مقدار noneتنظیم می‌شود. این کار تضمین می‌کند که اگر مرورگر از ویژگی‌های text decorationپشتیبانی کند، box-shadowاعمال نخواهد شد.

۳. شکست خطوط

یکی دیگر از محدودیت‌های رایجی که در انجام امور راست‌ چین در HTML توسعه‌دهندگان با آن دست و پنجه نرم می‌کنند، چالشی به نام شکست خطوط است. اگر ویژگی word-breakدر کدهای CSS موجود باشد، لازم است تأثیر آن را روی کلمات عربی و فارسی آزمایش شود زیرا این ویژگی این پتانسیل را دارد که نمایش متون را با چالش روبه‌رو کند. مثال زیر برای بیان این هدف است:

در زبان‌هایی مانند فارسی و عربی مفهومی از word-breakوجود ندارد. حروف در یک کلمه به یکدیگر متصل هستند و این ویژگی جدا کردن آن‌ها را غیرممکن می‌کند. بنابراین استفاده ازword-breakدر این زبان‌ها امکان‌پذیر نیست.

۴. علامت های اختصاری

یکی دیگر از محدودیت‌هایی که برای زبان‌های راست‌ چین در HTML وجود دارد، عدم پشتیبانی از اختصارات است. این محدودیت بیشتر به خود زبان بازمی‌گردد. برای مثال در انگلیسی، استفاده از اختصارات برای روزهای هفته رایج است. برای نمونه به جای کلمه «Saturday» به معنای شنبه از علامت اختصاری «Sat» استفاده می‌کنند. مثال زیر برای بیان این موضوع است:

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

استفاده از آیکون دوطرفه در HTML برای زبان های راست‌چین

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

با این حال، برخی از نمادها به تنظیمات جهت در طرح‌بندی‌های RTL نیاز دارند تا از درک واضح کاربران اطمینان حاصل کنند. بسیار مهم است که جهت آن‌ها را به درستی تغییر داد. تصویر زیر برای بیان این هدف است:

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

آیکون های پخش کننده رسانه

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

باید به این نکته توجه داشت که آیکون‌های پخش ثابت باقی می‌مانند و برعکس نمی‌شوند فقط امکان دارد جایگاهشان عوض شود.

برنامه های پیام رسانی

در طراحی‌های پیام‌رسان مانند تویتر این سؤال مطرح است که آیا نماد ارسال در این نوع برنامه‌های پیام‌رسان جهتش عوض شود یا خیر. در پاسخ، به دکمه‌های ارسال در طراحی پلتفرم‌های اصلی مانند فیس‌بوک (متای فعلی) مسنجر، واتس‌اپ و توییتر (اکس فعلی) پرداخته‌ایم. برای مثال طراحی دکمه یا آیکون ارسال در زبان‌های راست‌چین و چپ‌ چین به صورت زیر است:

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

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

همچنین طراحی تویتر (اکس فعلی) نیز به صورت زیر است:

چرخاندن اجزا

منظور از چرخاندن در اینجا تغییر جهت از چپ به راست یا از راست به چپ است. در فرآیند توسعه مؤلفه‌ها برای طراحی راست‌ چین در HTML، اتخاذ رویکردی راحت برای تغییرات سریع جهت‌گیری ضروری است. در برنامه‌هایی مانند «Sketch» ،«Adobe XD» و «Figma»، معمولاً مؤلفه‌ای را کپی می‌کنند و از دستور «FLIP» برای دستیابی به جلوه موردنظر استفاده خواهند کرد.

برای نشان دادن این موضوع، در زیر گیفی ایجاد شده است که این عملیات را برای کامپنوننتی خاص اجرا می‌کند و با این کار عملکردی یکپارچه در Sketch ،Adobe XD و Figma ارائه خواهند شد.

ملاحظات طراحی RTL

در این بخش از مطلب آموزش راست‌ چین در HTML، اجزای مختلف رایج، در طراحی‌های راست‌چین را بررسی کرده و ظاهر بهینه آن‌ها را در حالت راست به چپ (RTL) مورد ارزیابی قرار خواهیم داد.

نمادهای دکمه

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

ورودی های فرم

برخی از ورودی‌های فرم، مانند ورودی‌های ایمیل و شماره تلفن همراه، باید در طرح‌بندی‌های RTL ظاهری در راستای چپ داشته باشند، مانند مثال زیر:

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

بردکرامپ

در الگوی بردکرامپ، برای حفظ جهت بصری صحیح در طرح‌بندی‌های RTL، باید فلش‌ها جهتشان تغییر کند. مانند تصویر زیر:

هدر صفحه

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

جداول

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

برگه‌ ها

در برگه‌ها که مخصوص برای زبان‌های چپ به راست (LTR) طراحی شده‌اند، نمادها معمولاً در سمت چپ ظاهر می‌شوند. با این حال، در طرح‌بندی‌های RTL، برای حفظ ثبات بصری، این موقعیت باید معکوس شود.

کارت

در مورد کارت افقی، ضروری است که ترتیب و جهت تصویر و متن برای مطابقت با الزامات زبان RTL، عوض شود. مانند مثال زیر:

Toasts

برای اعلان‌های Toasts، نمادهایی مانند نماد «close» برای بستن و علامت‌های هشدار باید جهتشان برعکس شود تا به درستی در طرح‌بندی‌های RTL تراز شوند.

بلوک نقل‌ قول

در بلوک‌های نقل قول، نمادها باید تحت تغییر شکلی قرار بگیرند، همان‌طور که در نمونه زیر نشان داده شده است:

ویژگی های منطقی CSS

یکی دیگر از مباحث مهم در رابطه با راست‌ چین در HTML، بحث ویژگی‌های منطقی زبان شیوه نامه CSS است. ویژگی‌ها و مقادیر منطقی CSS، همان‌طور که به وسیله شبکه توسعه‌دهندگان موزیلا MDN تعریف شده، نوعی ماژول CSS محسوب می‌شود که ویژگی‌ها و مقادیر منطقی را معرفی می‌کند و کنترل طرح‌بندی را از طریق نگاشت‌های جهت و ابعاد منطقی به جای موارد فیزیکی امکان‌پذیر می‌سازد.

مثالی ساده را در نظر بگیرید که در آن می‌خواهیم رشته‌ای از متن را به سمت چپ تراز کنیم. در حالت عادی برای این کار امکان دارد کد زیر را به کار بگیریم:

و برای طرح‌بندی‌های راست به چپ به صورت زیر عمل خواهیم کرد:

با این حال، با معرفی ویژگی‌های منطقی CSS، می‌توان این فرآیند را به صورت زیر ساده‌تر کرد:

در کد بالا، جهت text-alignبه صورت پویا بر اساس جهت صفحه تنظیم می‌شود و رویکردی چندمنظوره و مختصر را ارائه می‌دهد. برای نشان دادن تفاوت بین «Start» و «End»، مدل زیر را در نظر بگیرید، جایی که «Start» با چپ در LTR و «End» با راست در RTL تراز می‌شود.

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

padding منطقی در CSS

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

خروجی نهایی کد بالا چیزی شبیه به تصویر زیر است:

این قطعه CSS استفاده از ویژگی‌های paddingمنطقی را نشان می‌دهد که در آن padding-inline-startرا در سمت چپ اضافه می‌کند و padding-inline-endنوعی paddingبزرگ‌تر در سمت راست ارائه کرده و در نهایت نوعی طرح‌بندی متعادل و از نظر بصری مناسب را ایجاد می‌کند.

Margin منطقی در CSS

برای اطمینان از اینکه «حاشیه» (Margin) سمت راست نمادی از ویژگی‌های منطقی پیروی می‌کند، از margin-inline-startاستفاده می‌شود. مانند مثال زیر:

خروجی مثال بالا نیز در عمل چیزی شبیه به تصویر زیر است:

در قطعه CSS فوق، margin-inline-startبرای تعریف حاشیه در سمت چپ عنصر .page-header__avatarاستفاده می‌شود که اصول طرح‌بندی منطقی را رعایت می‌کند.

Border منطقی در CSS

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

تصویر زیر برای تفهیم بهتر کد بالا است:

قطعه CSS بالا از border-inline-startبرای معرفی حاشیه شفاف ۳ پیکسلی در سمت چپ هر .nav__itemاستفاده می‌کند. هنگامی که عنصری به حالت فعال (.is-active) می‌رسد، رنگ حاشیه به رنگ تعیین شده (#1e9ada) به‌روز می‌شود. این پیاده‌سازی، کاربرد منطقی مرزها را تضمین می‌کند که با اصول طراحی منطقی همسو است.

شعاع Border منطقی در CSS

برای تنظیم شعاع مرزی برای گوشه‌های «بالا سمت راست» و «پایین سمت راست» پس‌زمینه عناصر ناوبری، از رویکرد منطقی زیر استفاده می‌شود.

تصویر زیر هم برای تفهیم بهتر کد بالا است:

در قطعه CSS فوق، border-start-end-radiusو border-end-end-radiusبرای تعیین شعاع حاشیه برای گوشه سمت راست بالا و پایین سمت راست .nav__itemاستفاده می‌شود. رنگ پس‌زمینه در ابتدا روی شفاف تنظیم می‌شود و وقتی مورد به حالت فعال .is-activeرسید، رنگ پس‌زمینه به #ecf6fbبه‌روزرسانی خواهد شد. این کاربرد منطقی کنترل دقیق شعاع مرزی را در عین حفظ طراحی ثابت تضمین می‌کند.

جدول ویژگی های منطقی CSS

برای یافتن معادل منطقی ویژگی CSS جهت‌دار می‌توان از جدول زیر استفاده کرد. توجه به این نکته مهم است که ویژگی‌های فهرست شده به طور خاص برای ارتباط آن‌ها با ملاحظات (LTR) و (RTL) انتخاب شده‌اند. این برگه تقلب از مطلبی که به وسیله آقای «آدریان روزلی» (Adrian Roselli) نوشته شده، انتخاب شده است:

همچنین در ٢ تصویر زیر هم می‌توان تفاوت ویژگی منطقی و جهت‌دار را یافت که تصویر مربوط به ویژگی های منطقی آن به صورت زیر است:

همچنین تصویر مربوط به ویژگی‌های جهت‌دار به صورت زیر است:

قراردادهای نامگذاری CSS

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

مثال زیر برای بیان این موضوع است:

در هر دو بخش، پیوندها یکسان اما برچسب آن‌ها متفاوت است. استفاده از کلاسی مانند «see-link» در بخش دوم امکان دارد کاری گمراه‌کننده باشد. نامی مناسب‌تر می‌تواند «c-link» باشد که در آن «c» مؤلفه‌ها را نشان می‌دهد که این نوع نام‌گذاری از قرارداد «ITCSS» پیروی می‌کند. با گسترش و پیروی از این مفهوم در کارهای مربوط به RTL، مدل طراحی زیر بخشی با دو فرزند را نشان می‌دهد:

به‌جای اختصاص نام‌های ارائه‌ای مانند «.c-page-header__left» و «.c-page-header__right»، از نام‌های مطمئن‌تری مانند «.c-page-header__start» و «.c-page-header__end» استفاده می‌شود. این رویکرد از فرض اینکه وب‌سایت منحصراً چپ به راست (LTR) یا راست به چپ (RTL) باشد، اجتناب می‌کند و انعطاف‌پذیری را برای تغییرات بالقوه طرح‌بندی تضمین می‌کند.

نوارهای پیمایش عمودی دو جهته‌

جهت عمودی پیمایش در کانتینرهای CSS به صورت پویا بر اساس جهت صفحه تنظیم می‌شود. در طرح‌بندی از راست به چپ (RTL)، نوار اسکرول یا همان نوار پیمایش در سمت چپ قرار دارد، در حالی که در طرح‌بندی چپ به راست (LTR)، در سمت راست ظاهر می‌شود که تصویر آن برای LTR به صورت زیر است:

همچنین تصویر آن برای طراحی RTL به صورت زیر است:

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

ابزارهای اتوماسیون

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

ابزار Bi-App-Sass

ابزار «Bi-App-Sass» که به وسیله «Anas Nakawa» توسعه داده شده است. این ابزار یک بار شیوه‌نامه کلی را برای طرح ارائه کرده و سپس به طور خودکار آن‌ها را در دو شیوه‌نامه جداگانه گسترش می‌دهد، یکی برای LTR و دیگری برای RTL. این ابزار به ویژه برای پروژه‌های بزرگتر مفید است. مثال زیر نحوه استفاده از این ابزار را نشان می‌دهد:

گسترش این کد برای طرح RTL به صورت زیر است:

گسترش این کد برای طرح LTR به صورت زیر است:

ابزار RTLCSS

«RTLCSS» به عنوان چارچوبی برای تبدیل شیت‌های سبک LTR به RTL عمل می‌کند. برخلاف برخی ابزارها، RTLCSS به طور خاص بر روی نسخه کامپایل شده فایل CSS عمل خواهد کرد. این ابزار به ویژه در پروژه‌هایی با اجزای متعدد «Sass» مفید است. RTLCSS فایل CSS کامپایل شده را تجزیه کرده و نسخه RTL از آن تولید می‌کند.

سخن پایانی

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

در مطلب فوق از مجله فرادرس، ابعاد مختلف از انجام امور راست‌ چین در HTML مورد بررسی قرار گرفت. در این مطلب مطالبی مانند انجام طراحی راست‌چین، مدیریت فونت‌ها در HTML، ماژول طرح‌بندی Flexbox، ماژول طرح‌بندی شبکه مانند در HTML، اشتباهات رایج راست‌چین، محدودیت‌های راست‌ چین در HTML، استفاده از آیکون دوطرفه در HTML برای زبان‌های راست‌چین، ویژگی‌های منطقی CSS، قراردادهای نامگذاری CSS، نوارهای پیمایش عمودی دو جهته‌ و ابزارهای اتوماسیون به همراه ارائه مثال‌های عملی و کاربردی مورد بررسی قرار گرفتند. به امید اینکه مطلب فوق برای کاربران عزیز مجله مفید واقع شده باشد.