BenoService

آکادمی بنو/آموزش CSS

طراحی RTL با CSS

بهنام نوبخت · ۱۴۰۵/۶/۲۸

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

به همین دلیل، طراحی یک سایت فارسی باید از ابتدا با در نظر گرفتن RTL یا Right-to-Left انجام شود.

در این مقاله یاد می‌گیریم چگونه یک Layout استاندارد راست‌به‌چپ بسازیم، چه تفاوتی میان direction و text-align وجود دارد، چرا استفاده از ویژگی‌های Logical CSS اهمیت زیادی دارد و چگونه یک صفحه واقعی فارسی مانند سایت «بنو سرویس» را به شکل اصولی RTL کنیم.

RTL چیست؟

RTL مخفف:

Right To Left

به معنی «راست به چپ» است.

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

در مقابل، زبان‌هایی مانند انگلیسی از:

Left To Right

استفاده می‌کنند.

بنابراین:

English
Hello World →

اما در فارسی:

← سلام دنیا

RTL فقط مربوط به متن نیست.

در یک صفحه RTL، جهت کلی Layout نیز می‌تواند تحت تأثیر قرار بگیرد.

تفاوت direction و text-align

این دو ویژگی بسیار مهم هستند اما کاربرد یکسانی ندارند.

direction

ویژگی direction جهت نوشتار و جریان متن را مشخص می‌کند.

مثلاً:

body {
    direction: rtl;
}

در این حالت جهت نوشتار صفحه RTL می‌شود.

text-align

اما text-align محل قرارگیری متن داخل فضای خودش را مشخص می‌کند.

مثلاً:

.title {
    text-align: right;
}

این کد متن را به سمت راست تراز می‌کند.

بنابراین:

direction
↓
جهت نوشتار و جریان متن

text-align
↓
تراز شدن محتوا

این دو را نباید با یکدیگر اشتباه بگیریم.

بهترین روش برای RTL کردن صفحه

اگر کل سایت فارسی است، می‌توانیم جهت را در عنصر html مشخص کنیم:

<html lang="fa" dir="rtl">

این روش بسیار مناسب است، زیرا جهت صفحه را در خود HTML مشخص می‌کند.

مثلاً:

<!DOCTYPE html>
<html lang="fa" dir="rtl">

<head>
    <meta charset="UTF-8">

    <title>بنو سرویس</title>
</head>

<body>

    <h1>
        زیرساخت دیجیتال کسب‌وکار شما
    </h1>

</body>

</html>

در اینجا:

lang="fa"

زبان سند را فارسی مشخص می‌کند و:

dir="rtl"

جهت متن را راست‌به‌چپ مشخص می‌کند.

آیا باید direction: rtl هم بنویسیم؟

اگر در HTML از:

<html dir="rtl">

استفاده کرده‌ایم، معمولاً نیازی نیست برای body دوباره:

body {
    direction: rtl;
}

بنویسیم.

می‌توانیم جهت را در HTML مشخص کنیم:

<html lang="fa" dir="rtl">

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

RTL و متن فارسی

فرض کنید:

<p>
    بنو سرویس مجموعه‌ای از خدمات دیجیتال
    برای کسب‌وکارها ارائه می‌دهد.
</p>

با:

<html lang="fa" dir="rtl">

مرورگر متن را با جهت مناسب نمایش می‌دهد.

اما اگر لازم باشد تراز متن را نیز کنترل کنیم:

p {
    text-align: right;
}

یا برای متن وسط:

p {
    text-align: center;
}

یک اشتباه رایج

بعضی توسعه‌دهندگان برای تمام عناصر سایت می‌نویسند:

* {
    text-align: right;
}

این کار معمولاً مناسب نیست.

چون بعضی عناصر ممکن است نیاز به:

text-align: center;

یا حتی:

text-align: left;

داشته باشند.

بهتر است Alignment را بر اساس نقش هر عنصر تعیین کنیم.

RTL و Flexbox

Flexbox یکی از مهم‌ترین ابزارهای Layout در طراحی RTL است.

مثلاً:

<div class="header">
    <div class="logo">
        بنو سرویس
    </div>

    <nav>
        <a href="#">خانه</a>
        <a href="#">خدمات</a>
        <a href="#">محصولات</a>
    </nav>
</div>

CSS:

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

وقتی Container در یک محیط RTL قرار دارد، جهت نوشتار و جریان Flex می‌تواند روی ترتیب نمایش آیتم‌ها تأثیر بگذارد.

اما یک نکته مهم وجود دارد:

جهت Layout را نباید صرفاً با حدس کنترل کنیم.

اگر ترتیب دقیق برای یک Component اهمیت دارد، باید آن را به‌صورت واضح طراحی کنیم.

row-reverse چیست؟

Flexbox دارای ویژگی:

flex-direction: row-reverse;

است.

این ویژگی ترتیب محور اصلی Flex را معکوس می‌کند.

مثلاً:

.navigation {
    display: flex;
    flex-direction: row-reverse;
}

اما در سایت‌های RTL نباید صرفاً برای «RTL کردن» از row-reverse استفاده کنیم.

RTL و row-reverse یک مفهوم نیستند.

direction مربوط به جهت نوشتار و جریان Inline است، در حالی که flex-direction جهت محور Flex را کنترل می‌کند.

استفاده از ویژگی‌های Logical CSS

یکی از مهم‌ترین موضوعات در طراحی مدرن RTL، استفاده از Logical Properties است.

در CSS سنتی ممکن است بنویسیم:

margin-left: 20px;
margin-right: 20px;

اما این ویژگی‌ها به سمت فیزیکی صفحه اشاره می‌کنند.

در CSS مدرن می‌توانیم از:

margin-inline: 20px;

استفاده کنیم.

این روش برای Layoutهای LTR و RTL انعطاف‌پذیرتر است.

ویژگی‌های Physical و Logical

مثلاً:

margin-left

یک ویژگی Physical است.

در مقابل:

margin-inline-start

یک ویژگی Logical است.

برخی نمونه‌های مهم:

Physical

Logical

margin-left

margin-inline-start

margin-right

margin-inline-end

padding-left

padding-inline-start

padding-right

padding-inline-end

border-left

border-inline-start

border-right

border-inline-end

width

inline-size

height

block-size

ویژگی‌های Logical باعث می‌شوند CSS بهتر بتواند با جهت‌های مختلف نوشتار سازگار شود.

margin-inline

به جای:

.card {
    margin-left: 20px;
    margin-right: 20px;
}

می‌توانیم بنویسیم:

.card {
    margin-inline: 20px;
}

اگر فقط ابتدای Inline را بخواهیم:

.card {
    margin-inline-start: 20px;
}

و انتها:

.card {
    margin-inline-end: 20px;
}

padding-inline

مثلاً:

.button {
    padding-inline: 24px;
}

یعنی Padding در دو سمت Inline اعمال شود.

این روش برای Componentهایی که در RTL و LTR استفاده می‌شوند بسیار مناسب است.

padding-block

برای محور عمودی می‌توانیم از:

padding-block: 20px;

استفاده کنیم.

مثلاً:

.section {
    padding-block: 60px;
    padding-inline: 20px;
}

این CSS بسیار خواناتر از مجموعه‌ای از padding-top، padding-bottom، padding-left و padding-right است.

Inline و Block چیست؟

برای درک Logical Properties باید دو مفهوم را بشناسیم.

Inline Axis

محور Inline معمولاً همان جهت جریان متن است.

در یک صفحه LTR:

Left → Right

و در RTL:

Right → Left

Block Axis

محور Block معمولاً جهت قرارگیری خطوط و بلوک‌ها است:

Top
↓
Bottom

بنابراین:

Inline
=
جهت جریان متن

Block
=
جهت عمودی Layout

margin-inline: auto

یکی از کاربردی‌ترین مثال‌ها:

.container {
    max-width: 1200px;
    margin-inline: auto;
}

این روش Container را در مرکز قرار می‌دهد.

مزیت آن این است که نیازی نداریم بنویسیم:

margin-left: auto;
margin-right: auto;

text-align: start و end

در طراحی RTL بهتر است در بسیاری از موارد به جای:

text-align: left;

از:

text-align: start;

استفاده کنیم.

و به جای:

text-align: right;

می‌توانیم از:

text-align: end;

استفاده کنیم.

مثلاً:

.title {
    text-align: start;
}

در محیط RTL، start معمولاً به سمت شروع جریان متن اشاره می‌کند.

در محیط LTR، همان قانون می‌تواند رفتار متفاوتی داشته باشد.

این موضوع برای Componentهای چندزبانه بسیار مفید است.

مثال عملی

فرض کنید یک Card داریم:

<article class="card">

    <span class="card-category">
        خدمات
    </span>

    <h3>
        طراحی سایت
    </h3>

    <p>
        طراحی سایت‌های مدرن و Responsive
        برای کسب‌وکار شما.
    </p>

    <a href="#">
        مشاهده خدمات
    </a>

</article>

CSS:

.card {
    padding: 24px;

    border: 1px solid #ddd;
    border-radius: 16px;

    text-align: start;
}

.card-category {
    margin-block-end: 12px;
}

.card h3 {
    margin-block: 0 12px;
}

.card p {
    margin-block-end: 20px;
    line-height: 2;
}

.card a {
    display: inline-flex;

    padding-inline: 20px;
    min-block-size: 44px;

    align-items: center;
}

این CSS بدون استفاده زیاد از ویژگی‌های چپ و راست نوشته شده است.

RTL در Grid

CSS Grid نیز در صفحات RTL بسیار کاربردی است.

مثلاً:

.services {
    display: grid;
    grid-template-columns:
        repeat(3, 1fr);

    gap: 24px;
}

اگر صفحه RTL باشد، ترتیب Inline Layout نیز باید با طراحی موردنظر هماهنگ باشد.

اما بهتر است به جای وابستگی به موقعیت فیزیکی «چپ» و «راست»، ساختار Grid را بر اساس نقش محتوا طراحی کنیم.

RTL و gap

ویژگی:

gap

برای فاصله بین آیتم‌ها بسیار مناسب است:

.navigation {
    display: flex;
    gap: 24px;
}

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

margin-left: 24px;

یا:

margin-right: 24px;

در نتیجه CSS ساده‌تر و مستقل‌تر از جهت صفحه می‌شود.

RTL در Header

یک Header فارسی می‌تواند چنین ساختاری داشته باشد:

<header class="site-header">

    <div class="container header-inner">

        <a href="#" class="logo">
            بنو سرویس
        </a>

        <nav class="navigation">
            <a href="#">خانه</a>
            <a href="#">خدمات</a>
            <a href="#">محصولات</a>
            <a href="#">آموزش</a>
            <a href="#">تماس با ما</a>
        </nav>

        <a href="#" class="header-button">
            ورود
        </a>

    </div>

</header>

CSS:

.header-inner {
    min-block-size: 72px;

    display: flex;
    align-items: center;

    justify-content: space-between;

    gap: 24px;
}

.navigation {
    display: flex;
    align-items: center;
    gap: 24px;
}

.header-button {
    padding-inline: 20px;
    min-block-size: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
}

تقریباً هیچ وابستگی مستقیمی به left یا right نداریم.

RTL در فرم‌ها

فرم‌ها یکی از قسمت‌هایی هستند که در سایت فارسی باید با دقت طراحی شوند.

مثلاً:

<form class="form">

    <label for="name">
        نام
    </label>

    <input
        id="name"
        type="text"
        placeholder="نام خود را وارد کنید"
    >

    <label for="email">
        ایمیل
    </label>

    <input
        id="email"
        type="email"
        placeholder="ایمیل خود را وارد کنید"
    >

    <button type="submit">
        ارسال
    </button>

</form>

CSS:

.form {
    display: grid;
    gap: 16px;
}

.form label {
    text-align: start;
}

.form input {
    min-block-size: 48px;

    padding-inline: 16px;

    border: 1px solid #ccc;
    border-radius: 10px;
}

فارسی و ورودی‌های انگلیسی

یک نکته مهم این است که همه Inputها نباید الزاماً RTL باشند.

مثلاً:

نام کاربری

ممکن است فارسی یا انگلیسی باشد.

اما:

Email
URL
کد
شماره کارت

ممکن است نیاز به رفتار متفاوتی داشته باشند.

برای مثال:

input[type="email"] {
    direction: ltr;
}

البته باید این کار را بر اساس نوع داده و تجربه کاربری واقعی انجام داد، نه به‌صورت کورکورانه برای تمام Inputها.

اعداد در صفحات فارسی

در سایت‌های فارسی ممکن است اعداد به دو شکل نمایش داده شوند:

123456

یا:

۱۲۳۴۵۶

این موضوع یک بحث Typography و Localization نیز محسوب می‌شود و نباید صرفاً با direction حل شود.

برای اطلاعاتی مانند:

شماره تماس
کد سفارش
شماره پیگیری
کد تخفیف

گاهی نمایش LTR برای جلوگیری از ابهام مناسب‌تر است.

مثلاً:

.tracking-code {
    direction: ltr;
    unicode-bidi: isolate;
}

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

unicode-bidi چیست؟

CSS ویژگی‌هایی برای کنترل نحوه رفتار متن دوطرفه دارد.

یکی از آن‌ها:

unicode-bidi

است.

در صفحات فارسی و ترکیب متن فارسی با انگلیسی، اعداد، URLها و کدها، الگوریتم Bidirectional Text مرورگر ممکن است باعث شود ترتیب ظاهری برخی رشته‌ها با چیزی که انتظار داریم متفاوت شود.

برای نمونه:

.code {
    direction: ltr;
    unicode-bidi: isolate;
}

می‌تواند برای جدا نگه داشتن یک رشته از جریان متن اطراف آن مفید باشد.

RTL و آیکون‌ها

یکی از اشتباهات رایج در طراحی RTL این است که تمام آیکون‌ها را نیز برعکس کنیم.

اما همه آیکون‌ها جهت‌دار نیستند.

مثلاً:

Home
Search
Settings

معمولاً نیاز به چرخش ندارند.

اما آیکون‌هایی مانند:

Arrow Right
Arrow Left
Back
Forward

ممکن است بر اساس جهت صفحه نیاز به تغییر داشته باشند.

مثلاً یک فلش «ادامه» در RTL می‌تواند از نظر بصری به سمت چپ حرکت کند.

بنابراین باید مفهوم آیکون را در نظر بگیریم، نه فقط نام آن را.

استفاده از transform برای آیکون

فرض کنید یک آیکون فلش داریم:

<span class="arrow">
    →
</span>

می‌توانیم در RTL آن را تغییر دهیم:

[dir="rtl"] .arrow {
    transform: scaleX(-1);
}

اما این روش فقط زمانی مناسب است که واقعاً معنای آیکون با جهت صفحه تغییر کند.

استفاده از Selectors بر اساس جهت

می‌توانیم مستقیماً از Attribute Selector استفاده کنیم:

[dir="rtl"] .icon {
    ...
}

و برای LTR:

[dir="ltr"] .icon {
    ...
}

این روش برای Componentهای چندزبانه بسیار مفید است.

طراحی RTL با Logical Properties

یکی از بهترین روش‌ها این است که از ابتدا CSS را تا حد امکان Logical بنویسیم.

مثلاً به جای:

.card {
    margin-left: 24px;
    padding-right: 20px;
    border-left: 1px solid #ddd;
}

می‌توانیم از:

.card {
    margin-inline-start: 24px;
    padding-inline-end: 20px;
    border-inline-start: 1px solid #ddd;
}

استفاده کنیم.

در این صورت CSS به جای اینکه بگوید:

سمت چپ

می‌گوید:

ابتدای محور Inline

و این تفاوت بسیار مهم است.

طراحی چند زبانه

فرض کنید سایت شما هم فارسی و هم انگلیسی دارد.

می‌توانیم داشته باشیم:

<html lang="fa" dir="rtl">

برای فارسی:

<html lang="en" dir="ltr">

برای انگلیسی.

اگر CSS را با Logical Properties نوشته باشیم، مقدار زیادی از CSS بین این دو زبان مشترک باقی می‌ماند.

مثلاً:

.card {
    padding-inline: 24px;
    margin-inline: auto;
    text-align: start;
}

این یکی از دلایل مهم استفاده از Logical CSS است.

یک Container حرفه‌ای RTL

.container {
    width: min(
        calc(100% - 32px),
        1200px
    );

    margin-inline: auto;
}

و برای Section:

.section {
    padding-block: clamp(
        48px,
        8vw,
        120px
    );

    padding-inline: 16px;
}

این ساختار:

  • Responsive است.

  • RTL و LTR را بهتر پشتیبانی می‌کند.

  • به left و right وابستگی کمی دارد.

  • قابل استفاده در پروژه‌های مختلف است.

یک صفحه کامل RTL برای بنو سرویس

حالا یک نمونه کوچک اما واقعی ایجاد کنیم.

HTML

<!DOCTYPE html>

<html lang="fa" dir="rtl">

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >

    <title>
        بنو سرویس
    </title>

    <link
        rel="stylesheet"
        href="style.css"
    >

</head>

<body>

<header class="site-header">

    <div class="container header-inner">

        <a href="#" class="logo">
            بنو سرویس
        </a>

        <nav class="navigation">

            <a href="#">
                خانه
            </a>

            <a href="#">
                خدمات
            </a>

            <a href="#">
                محصولات
            </a>

            <a href="#">
                آموزش
            </a>

            <a href="#">
                تماس با ما
            </a>

        </nav>

        <a href="#" class="login-button">
            ورود
        </a>

    </div>

</header>


<main>

    <section class="hero">

        <div class="container hero-content">

            <div class="hero-text">

                <span>
                    بنو سرویس
                </span>

                <h1>
                    زیرساخت دیجیتال
                    کسب‌وکار شما
                </h1>

                <p>
                    مجموعه‌ای از محصولات و خدمات
                    دیجیتال برای رشد و توسعه کسب‌وکار شما.
                </p>

                <div class="hero-actions">

                    <a href="#">
                        مشاهده خدمات
                    </a>

                    <a href="#">
                        مشاهده محصولات
                    </a>

                </div>

            </div>

            <div class="hero-image">

                <img
                    src="images/hero.webp"
                    alt="خدمات دیجیتال بنو سرویس"
                >

            </div>

        </div>

    </section>


    <section class="services">

        <div class="container">

            <div class="section-heading">

                <span>
                    خدمات
                </span>

                <h2>
                    راهکارهای دیجیتال
                    برای کسب‌وکار شما
                </h2>

            </div>


            <div class="service-grid">

                <article class="service-card">

                    <h3>
                        طراحی سایت
                    </h3>

                    <p>
                        طراحی وب‌سایت‌های مدرن،
                        سریع و Responsive.
                    </p>

                    <a href="#">
                        بیشتر بدانید
                    </a>

                </article>


                <article class="service-card">

                    <h3>
                        بهینه‌سازی موتور جستجو
                    </h3>

                    <p>
                        بهبود ساختار و عملکرد سایت
                        برای حضور بهتر در موتورهای جستجو.
                    </p>

                    <a href="#">
                        بیشتر بدانید
                    </a>

                </article>


                <article class="service-card">

                    <h3>
                        طراحی ربات تلگرامی
                    </h3>

                    <p>
                        طراحی و توسعه ربات‌های
                        کاربردی برای کسب‌وکارها.
                    </p>

                    <a href="#">
                        بیشتر بدانید
                    </a>

                </article>

            </div>

        </div>

    </section>

</main>


<footer class="footer">

    <div class="container">

        <p>
            تمامی حقوق محفوظ است.
        </p>

    </div>

</footer>

</body>

</html>

CSS صفحه

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    font-family: sans-serif;

    line-height: 1.7;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

.container {
    width: min(
        calc(100% - 32px),
        1200px
    );

    margin-inline: auto;
}

.site-header {
    border-block-end: 1px solid #eee;
}

.header-inner {
    min-block-size: 72px;

    display: flex;
    align-items: center;

    justify-content: space-between;

    gap: 24px;
}

.navigation {
    display: flex;
    align-items: center;

    gap: 24px;
}

.login-button {
    min-block-size: 44px;

    padding-inline: 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;
}

.hero {
    padding-block:
        clamp(60px, 10vw, 140px);
}

.hero-content {
    display: grid;
    gap: 48px;
    align-items: center;
}

.hero-text h1 {
    margin-block: 16px;

    font-size:
        clamp(2.2rem, 6vw, 4.5rem);

    line-height: 1.25;
}

.hero-text p {
    max-inline-size: 65ch;

    line-height: 2;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-block-start: 28px;
}

.hero-actions a {
    min-block-size: 48px;

    padding-inline: 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;
}

.services {
    padding-block:
        clamp(60px, 8vw, 120px);
}

.section-heading {
    margin-block-end: 40px;
}

.section-heading h2 {
    font-size:
        clamp(2rem, 5vw, 3.5rem);
}

.service-grid {
    display: grid;

    grid-template-columns: 1fr;

    gap: 20px;
}

.service-card {
    padding: 28px;

    border: 1px solid #ddd;

    border-radius: 20px;
}

.service-card p {
    line-height: 2;
}

.service-card a {
    display: inline-flex;

    min-block-size: 44px;

    padding-inline: 18px;

    align-items: center;
}

.footer {
    padding-block: 40px;

    border-block-start: 1px solid #eee;
}

@media (width >= 768px) {

    .service-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }
}

@media (width >= 1000px) {

    .hero-content {
        grid-template-columns:
            1fr 1fr;
    }

    .service-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }
}

این نمونه تقریباً تمام مفاهیم اصلی این مقاله را در یک پروژه کوچک ترکیب می‌کند.

RTL و Responsive Design

یکی از مزیت‌های مهم Logical Properties این است که RTL و Responsive Design را می‌توانیم همزمان مدیریت کنیم.

مثلاً:

.container {
    width: min(
        calc(100% - 32px),
        1200px
    );

    margin-inline: auto;
}

یا:

.section {
    padding-block:
        clamp(48px, 8vw, 120px);

    padding-inline: 16px;
}

در اینجا نه به left نیاز داریم و نه به right.

RTL و Media Query

Media Query همچنان همان منطق را دارد:

@media (width >= 768px) {
    .layout {
        grid-template-columns:
            repeat(2, 1fr);
    }
}

RTL بودن صفحه باعث نمی‌شود Media Query متفاوت شود.

Media Query اندازه و ویژگی‌های محیط را کنترل می‌کند و direction جهت نوشتار را.

RTL و Position

در CSS قدیمی ممکن است بنویسیم:

.badge {
    position: absolute;
    right: 20px;
    top: 20px;
}

اگر هدف ما «ابتدای محور Inline» باشد، بهتر است در بسیاری از موارد از Logical Properties استفاده کنیم:

.badge {
    position: absolute;

    inset-block-start: 20px;
    inset-inline-start: 20px;
}

این روش در Layoutهای چندجهته بسیار انعطاف‌پذیرتر است.

inset و Logical Positioning

ویژگی‌های Logical برای Position نیز وجود دارند.

مثلاً:

.element {
    inset-inline-start: 20px;
    inset-block-start: 10px;
}

در یک محیط RTL، inline-start به سمت شروع جریان Inline اشاره می‌کند.

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

جدول‌ها در RTL

جدول‌ها نیز باید با دقت طراحی شوند.

مثلاً:

<table dir="rtl">

    <thead>
        <tr>
            <th>محصول</th>
            <th>قیمت</th>
            <th>وضعیت</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>فروشگاه ساز</td>
            <td>...</td>
            <td>فعال</td>
        </tr>
    </tbody>

</table>

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

نباید صرفاً برای جلوگیری از Scroll، اطلاعات جدول را حذف کنیم.

RTL در Footer

Footer نیز باید بر اساس ساختار محتوا طراحی شود.

مثلاً:

.footer-grid {
    display: grid;

    grid-template-columns: 1fr;

    gap: 32px;
}

@media (width >= 768px) {

    .footer-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }
}

بهتر است به جای استفاده زیاد از:

margin-left
margin-right

از:

gap
margin-inline
padding-inline

استفاده کنیم.

اشتباهات رایج در طراحی RTL

۱. فقط text-align: right

RTL کردن سایت فقط این نیست:

body {
    text-align: right;
}

این کار جهت صفحه را به‌درستی مدیریت نمی‌کند.

بهتر است جهت در HTML مشخص شود:

<html lang="fa" dir="rtl">

۲. استفاده بیش از حد از left و right

مثلاً:

margin-left: 20px;
padding-right: 30px;
right: 10px;

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

۳. استفاده اشتباه از row-reverse

این کد:

display: flex;
flex-direction: row-reverse;

راهکار عمومی برای RTL نیست.

باید ابتدا مشخص کنیم آیا واقعاً قصد تغییر ترتیب Flex را داریم یا فقط می‌خواهیم صفحه RTL باشد.

۴. برعکس کردن همه آیکون‌ها

همه آیکون‌ها Directional نیستند.

فقط آیکون‌هایی که مفهوم جهت دارند باید بر اساس معنای UI بررسی شوند.

۵. RTL کردن همه Inputها

مثلاً:

input {
    direction: rtl;
}

ممکن است برای Email، URL، کدها و برخی داده‌های انگلیسی تجربه کاربری مناسبی ایجاد نکند.

۶. نادیده گرفتن متن فارسی در Responsive

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

بنابراین Responsive Design باید با محتوای واقعی فارسی نیز تست شود.

تمرین‌های مقاله

تمرین ۱ — صفحه RTL

یک صفحه ساده فارسی ایجاد کنید و:

<html lang="fa" dir="rtl">

را به آن اضافه کنید.

تمرین ۲ — Container

یک Container ایجاد کنید که:

  • حداکثر عرض 1200px داشته باشد.

  • در مرکز قرار بگیرد.

  • در موبایل Padding مناسب داشته باشد.

راهنمایی:

.container {
    width: min(
        calc(100% - 32px),
        1200px
    );

    margin-inline: auto;
}

تمرین ۳ — تبدیل Physical به Logical

CSS زیر را:

.card {
    margin-left: 20px;
    margin-right: 30px;

    padding-left: 24px;
    padding-right: 16px;
}

به Logical Properties تبدیل کنید.

تمرین ۴ — Header

یک Header فارسی ایجاد کنید که:

  • Logo داشته باشد.

  • Navigation داشته باشد.

  • دکمه ورود داشته باشد.

  • در موبایل Responsive شود.

تمرین ۵ — فرم فارسی

یک فرم ثبت‌نام ایجاد کنید که شامل:

نام
نام خانوادگی
ایمیل
شماره موبایل
رمز عبور
دکمه ثبت‌نام

باشد.

سپس رفتار RTL هر Input را بررسی کنید.

جمع‌بندی

طراحی RTL چیزی بیشتر از قرار دادن متن در سمت راست صفحه است.

برای یک سایت فارسی حرفه‌ای باید همزمان به موارد زیر توجه کنیم:

HTML Direction
        ↓
Typography
        ↓
Layout
        ↓
Flexbox / Grid
        ↓
Logical Properties
        ↓
Responsive Design
        ↓
Forms
        ↓
Icons
        ↓
Accessibility

یکی از مهم‌ترین عادت‌هایی که باید از همین حالا در CSS ایجاد کنیم، استفاده از ویژگی‌های Logical است.

به جای اینکه همیشه فکر کنیم:

left
right
top
bottom

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

inline-start
inline-end
block-start
block-end

برای مثال:

.card {
    padding-inline: 24px;
    padding-block: 20px;

    margin-inline: auto;

    text-align: start;
}

این نوع CSS نه‌تنها برای فارسی مناسب است، بلکه در پروژه‌های چندزبانه و Layoutهای مدرن نیز انعطاف بسیار بیشتری دارد.

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

۱۰

نظرات

کد در دسترس نیست

هنوز نظری ثبت نشده است.