بازگشت به بلاگ
۲۵ خرداد ۱۴۰۵7 دقیقه مطالعهرضا اسماعیل گل

طراحی راست‌به‌چپ حرفه‌ای با Tailwind CSS

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

  • RTL
  • Tailwind
  • طراحی وب
  • فارسی
تصویر مقاله طراحی راست‌به‌چپ حرفه‌ای با Tailwind CSS

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

جهت را منطقی بچینید، نه دستی

به‌جای مقادیر ثابتِ چپ و راست، از ویژگی‌های منطقیِ CSS مثل margin-inline و padding-inline استفاده کنید تا چیدمان به‌صورت خودکار با جهت راست‌به‌چپ هماهنگ شود و نگه‌داری کد ساده بماند.

فونت فارسیِ درست، نیمی از طراحی است

یک فونت خوانا مثل وزیرمتن با وزن‌های مناسب، بیشترین تأثیر را بر حسِ حرفه‌ای بودن سایت دارد. فونت را از طریق next/font بارگذاری کنید تا سرعت و پایداری چیدمان حفظ شود.

جزئیاتی که فرق ایجاد می‌کنند

اعداد فارسی، فاصله‌ی مجازی (نیم‌فاصله)، تراز درست آیکون‌ها با متن، و آزمودن فرم‌ها در حالت راست‌به‌چپ؛ همین جزئیات کوچک، تفاوت میان یک سایت آماتور و حرفه‌ای‌اند.

در پروژه‌های فارسی‌ام همیشه از همان ابتدا RTL و وزیرمتن را پایه می‌گذارم تا بعداً مجبور به بازکاری نشوم.

رضا اسماعیل گل، نویسنده و طراح سایت

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

رضا اسماعیل گل

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

این موضوع را برای پروژه خودتان می‌خواهید؟

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

درخواست بررسی پروژه
تماس نیازسنجی پروژه