EXPRESSJS - مجله تکنولوژی نرم افزار و سخت افزار

دسته‌بندی نشده

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

توسطexpressjs.ir

دسامبر 6, 2023

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

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

راست‌ چین در HTML

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

  1. استفاده از ویژگی dir

    : می‌توان ویژگی dir

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

  2. استفاده از ویژگی جهت CSS: این ویژگی به کاربر امکان می‌دهد جهت متن را برای عناصر با استفاده از شیوه‌نامه‌های CSS تنظیم کند. می‌توان ویژگی ltr

     را برای چپ به راست یا ویژگی rtl

    را برای راست به چپ در کدهای CSS تنظیم کرد.

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

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

<textarea dir="rtl"></textarea>

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

به شرح زیر است: 

<element dir="ltr|rtl|auto">

در اینجا مقادیر ممکن برای ویژگی dir

آمده است:

  • ltr

    : این مقدار پیش‌فرض است و جهت متن از چپ به راست را نشان می‌دهد.

  • rtl

    : این مقدار جهت متن از راست به چپ را نشان می‌دهد.

  • auto

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

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

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

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

روی ltr

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

۱. HTML

برای تغییر جهت زبان سند خود، باید ویژگی dir

را به عنصر ریشه فایل HTML خود اضافه کرد، معمولاً تگ html

 برای این کار استفاده خواهد شد. برای نشان دادن جهت راست به چپ می‌توان مقدار این ویژگی را روی rtl

تنظیم کرد. 

<html dir="rtl">...</html>

هنگامی‌که مقدار ویژگی dir

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

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<body>
<div class="wrapper">
  <p style="margin-bottom: 0.5rem;">Left to Right (LTR)</p>
  <article class="media">
    <h2>Welcome to Faradars Mag!</h2>
    <p>You'll learn how to prepare your website for RTL languages.</p>
  </article>
  
  <p style="margin-bottom: 0.5rem;">Right to Left (RTL)</p>
  <article class="media" dir="rtl">
    <h2>به مجله فرادرس خوش آمدید!</h2>
    <p>شما یاد خواهید گرفت که چگونه وب سایت خود را برای زبا‌نهای RTL آماده کنید.</p>
  </article>
</div>
</body>
</html>

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

.media {
  background: #fff;
  box-shadow: 0 5px 10px 0 rgba(#000, 0.05);
  padding: 1rem;
  margin-bottom: 2.5rem;
  
  h2 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 0.5rem;
  }
  
  img {
    max-width: 100%;
    border: 1px solid lightgrey;
  }
}

.link {
  display: inline-block;
  margin-top: 1rem;
  //background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%231d7bb3'%3E%3Cpath d='M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z'%3E%3C/path%3E%3C/svg%3E") right center/20px no-repeat;
  //padding-right: 24px;
  color: #1d7bb3;
}

/* Non Demo Related Styling */
body {
  background: #f6f6f6;
  font-family: 'Rubik', sans-serif;
  line-height: 1.35;
}

.wrapper {
  max-width: 800px;
  margin: 2rem auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

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

راست چین کردن یک نوشته دلخواه با استفاده از HTML

۲. CSS

علاوه بر تنظیم ویژگی dir

، همچنین می‌توان از CSS برای تعیین جهت به طور واضح استفاده کرد. می‌توان سبک « direction: rtl;

» به هر عنصر یا کلاس خاصی اضافه شود تا جهت LTR پیش‌فرض را لغو کرد. 

.element { direction: rtl; }

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

توجه به این نکته مهم است که ویژگی dir=”auto”

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

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

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

با کلاس media

تشکیل شده است. در داخل این عنصر، تصویر و div

با کلاس media__content

وجود دارد. بخش media__content

شامل عنوان، چند پاراگراف و پیوندی برای مشاهده صفحه مدنظر است. 

<article class="media">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNaP6R44P4kXnlRiC8OwHQBPZG7t5a-osaxpn-uvaiVHE8vltWAYl_3LzrLlC0E6rKFtI&usqp=CAU" alt="">
    <div class="media__content">
      <h2>Blueberry Cheesecake</h2>
      <p>...</p>
      <p><a href="#" class="link">View Recipe</a></p>
    </div>
</article>

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

نوعی طرح HTML که به صورت چپ چین تنظیم شده است

در ابتدا در طراحی LTR، تصویر با استفاده از ویژگی float

در سمت چپ تراز می‌شود. برای اطمینان از پاک‌سازی مناسب float

، یک clearfix

برای کلاس media

اعمال خواهد شد. کد CSS برای این کار به شرح زیر است: 

.media:after {
    content: "";
    display: block;
    clear: both;
}

.media__photo {
    float: left;
    width: 200px;
    margin-right: 16px;
}

حال، بیایید به طراحی مثال بالا برای پشتیبانی از RTL بپردازیم. برای رسیدن به این هدف، باید ویژگی dir=”rtl”

را به کلاس media

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

در سمت چپ و حاشیه راست ۱۶ پیکسل است. برای حل این مشکل، باید این استایل‌ها را به طور خاص برای طرح RTL لغو کرد. کد CSS به‌روز شده به صورت زیر است: 

.media[dir="rtl] img {
    float: right;
    margin-right: 0;
    margin-left: 16px;
}

با هدف قرار دادن تصویر در کلاس media

با انتخابگر ویژگی dir=”rtl”

، می‌توان ویژگی float

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

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<body>
<div class="wrapper">
  <p style="margin-bottom: 0.5rem;">Left to Right (LTR)</p>
  <article class="media">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNaP6R44P4kXnlRiC8OwHQBPZG7t5a-osaxpn-uvaiVHE8vltWAYl_3LzrLlC0E6rKFtI&usqp=CAU" alt="">
    <div class="media__content">
      <h2>Blueberry Cheesecake</h2>
      <p>A place for the recipe description.</p>
      <p><a href="#" class="link">View Recipe</a></p>
    </div>
  </article>
  
  <p style="margin-bottom: 0.5rem;">Right to Left (RTL)</p>
  <article class="media" dir="rtl">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNaP6R44P4kXnlRiC8OwHQBPZG7t5a-osaxpn-uvaiVHE8vltWAYl_3LzrLlC0E6rKFtI&usqp=CAU" alt="">
    <div class="media__content">
      <h2>چیزکیک بلوبری</h2>
      <p>جایی برای شرح دستور پخت غذا.</p>
      <p><a href="#" class="link">مشاهده دستور پخت</a></p>
    </div>
  </article>
</div>
</body>
</html>

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

.media {
  background: #fff;
  box-shadow: 0 3px 10px 0 rgba(#000, 0.1);
  padding: 1rem;
  margin-bottom: 2.5rem;
  
  h2 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 0.5rem;
  }
  
  img {
    float: left;
    width: 200px;
    margin-right: 16px;
    border: 1px solid lightgrey;
  }
  
  &:after {
    content: "";
    display: block;
    clear: both;
  }
}

.media[dir="rtl"] {
  img {
    float: right;
    margin-right: 0;
    margin-left: 16px;
  }
}

.link {
  display: inline-block;
  margin-top: 1rem;
  //background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%231d7bb3'%3E%3Cpath d='M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z'%3E%3C/path%3E%3C/svg%3E") right center/20px no-repeat;
  //padding-right: 24px;
  color: #1d7bb3;
}

/* Non Demo Related Styling */
body {
  background: #f6f6f6;
  font-family: 'Rubik', sans-serif;
  line-height: 1.35;
}

.wrapper {
  max-width: 800px;
  margin: 2rem auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<body>
<div class="wrapper">  
  <p style="margin-bottom: 0.5rem;"> (RTL) ،محتوای ترکیبی انگلیسی و فارسی</p>
  <article class="media" dir="rtl">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNaP6R44P4kXnlRiC8OwHQBPZG7t5a-osaxpn-uvaiVHE8vltWAYl_3LzrLlC0E6rKFtI&usqp=CAU" alt="">
    <div class="media__content">
      <h2>طرز تهیه Cheesecake بلوبری</h2>
      <p>جایی برای شرح دستور پخت غذا.</p>
      <p><a href="#" class="link">مشاهده دستور پخت</a></p>
    </div>
  </article>
  
  <p style="margin-bottom: 0.5rem;">(LTR) ،محتوای ترکیبی انگلیسی و فارسی

</p>
  <article class="media" dir="">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNaP6R44P4kXnlRiC8OwHQBPZG7t5a-osaxpn-uvaiVHE8vltWAYl_3LzrLlC0E6rKFtI&usqp=CAU" alt="">
    <div class="media__content">
      <h2>طرز تهیه Cheesecake بلوبری</h2>
      <p>جایی برای شرح دستور پخت غذا.</p>
      <p><a href="#" class="link">مشاهده دستور پخت</a></p>
    </div>
  </article>
</div>
</body>
</html>

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

.media {
  background: #fff;
  box-shadow: 0 3px 10px 0 rgba(#000, 0.1);
  padding: 1rem;
  margin-bottom: 2.5rem;
  
  h2 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 0.5rem;
  }
  
  img {
    float: left;
    width: 200px;
    margin-right: 16px;
    border: 1px solid lightgrey;
  }
  
  &:after {
    content: "";
    display: block;
    clear: both;
  }
}

.media[dir="rtl"] {
  img {
    float: right;
    margin-right: 0;
    margin-left: 16px;
  }
}

.link {
  display: inline-block;
  margin-top: 1rem;
  //background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%231d7bb3'%3E%3Cpath d='M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z'%3E%3C/path%3E%3C/svg%3E") right center/20px no-repeat;
  //padding-right: 24px;
  color: #1d7bb3;
}

/* Non Demo Related Styling */
body {
  background: #f6f6f6;
  font-family: 'Rubik', sans-serif;
  line-height: 1.35;
}

.wrapper {
  max-width: 800px;
  margin: 2rem auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

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

تصویری برای برای نمایش ترکیب محتوای انگلیسی و فارسی در HTML
برای مشاهده تصویر در ابعاد بزرگ روی آن کلیک کنید.

برای جلوگیری از مشکل بالا باید همیشه جهت زبان تنظیم شود. با افزودن dir=”rtl”

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

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

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

تصویری برای برای نمایش ترکیب محتوای انگلیسی و فارسی در زبان برنامه نویسی HTML
برای مشاهده تصویر در ابعاد بزرگتر روی آن کلیک کنید.

طبق مثال فوق، وقتی dir=”rtl”

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

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

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

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

در CSS، ویژگی font-family

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

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

body {
    font-family: 'Roboto','Amiri', sans-serif;
}

در این حالت، اگر فونت Roboto

حروف فارسی و عربی خاصی را تشخیص ندهد، به دومین اعلان فونت که Amiri

است بازمی‌گردد. به این ترتیب، مرورگر به جستجوی فونتی ادامه می‌دهد که بتواند کاراکترهای مورد نیاز را ارائه دهد. در زیر مثالی ارائه شده است که این مفهوم را نشان می‌دهد. CSS ارائه شده، ویژگی font-family

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

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="welcome">HTML CSS JS</h1>
<p>伊朗 is one of the largest countries in the Middle East and has a population of nearly 85 million.</p>
<p>ایران یکی از بزرگترین کشورهای خاورمیانه است و نزدیک به 85 میلیون جمعیت دارد </p>
<p>iran is one of the largest countries in the خاورمیانه and has a population of nearly 85 million.</p>
</body>
</html>

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

@import url('https://fonts.googleapis.com/css?family=Amiri|Roboto|Galada&display=swap');

body {
  font-family: 'Roboto','Amiri', 'Galada', sans-serif;
}

/* Not important */
p {
  line-height: 1.6;
  width: calc(100% - 40px);
  max-width: 500px;
  margin: 20px auto;
  padding: 0 20px;
}

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

تصویری برای نمایش تغییر فونت در زبان HTML

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

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

تنظیم شده است. در زمینه فلکس باکس horizontal-tb

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

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

تصویری برای نمایش نحوه عملکرد فلکس باکس به صورت چپ چین و راست چین

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

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

<div class="element">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

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

.element {
    display: flex;
    flex-direction: row; /* Default value, added for clarity */
}

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

استایل بندی شده و از ویژگی‌های Flexbox استفاده می‌کند. به طور خاص، کانتینر با استفاده از display: flex;

به عنوان نوعی فلکس باکس تنظیم شده است. علاوه بر این، مقدار پیش‌فرض ویژگی flex-direction

به عنوان تراز افقی مشخص می‌شود. در مثال بالا سه آیتم به عنوان عناصر div

با کلاس item

نمایش داده می‌شوند. این اقلام داخل فلکس باکس قرار می‌گیرند. اعداد ۱، ۲ و ۳ در هر مورد مربوطه قرار می‌گیرند تا شماره‌گذاری را ارائه دهند.

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

<div class="wrapper">  
  <p style="margin-bottom: 0.5rem;">Left to Right (LTR)</p>
  <div class="element">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  
  <p style="margin-bottom: 0.5rem;">Right to Left (RTL)</p>
  <div class="element" dir="rtl">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</div>

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

.element {
  display: flex;
  background: #fff;
  box-shadow: 0 3px 10px 0 rgba(#000, 0.1);
  padding: 1rem;
  margin-bottom: 2.5rem;
  
  .item {
    padding: 1rem 1.4rem;
    background: #673AB7;
    color: #fff;
    font-size: 24px;
    flex-grow: 1;
    
    &:not(:last-child) {
      margin-inline-end: 1rem;
    }
  }
}


/* Non Demo Related Styling */
body {
  background: #f6f6f6;
  font-family: 'Rubik', sans-serif;
  line-height: 1.35;
}

.wrapper {
  max-width: 800px;
  margin: 2rem auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

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

طرحی برای نمایش فلکس باکس در زبان HTML

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

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

<div class="element">
    <div class="side">Side</div>
    <div class="main">Main</div>
</div>
.element {
    display: grid;
    grid-template-columns: 220px 1fr;
    grid-gap: 1rem;
}

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

<div class="wrapper">  
  <p style="margin-bottom: 0.5rem;">Left to Right (LTR)</p>
  <div class="element">
    <div class="side">Side</div>
    <div class="main">Main</div>
  </div>
  
  <p style="margin-bottom: 0.5rem;">Right to Left (RTL)</p>
  <div class="element" dir="rtl">
    <div class="side">فرعی</div>
    <div class="main">اصلی</div>
  </div>
</div>
.element {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-gap: 1rem;
  background: #fff;
  box-shadow: 0 3px 10px 0 rgba(#000, 0.1);
  padding: 1rem;
  margin-bottom: 2.5rem;
  
  .side,
  .main {
    padding: 1rem 1.4rem;
    background: #673AB7;
    color: #fff;
    font-size: 20px;
    min-height: 70px;
  }
}


/* Non Demo Related Styling */
body {
  background: #f6f6f6;
  font-family: 'Rubik', sans-serif;
  line-height: 1.35;
}

.wrapper {
  max-width: 800px;
  margin: 2rem auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

در کد به‌روز شده، div

خارجی با کلاس element

برای وضوح به container

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

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

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

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

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

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

در زبان انگلیسی، افزودن «فاصله حروف» ( letter-spacing

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

تصویری برای نشان دادن موضوع فاصله بین حروف در چیدمان صفحات وب

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

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<body>
<div class="wrapper">
  <p style="margin-bottom: 0.5rem;">Right to Left (RTL), بدون استفاده از قابلیت فاصله حروف</p>
  <article class="media" dir="rtl">
    <h2>سلام به این آموزش از مجله فرادرس خوش آمدید</h2>
  </article>

  <p style="margin-bottom: 0.5rem;">Right to Left (RTL), با استفاده از قابلیت فاصله حروف</p>
  <article class="media media--ls" dir="rtl">
    <h2>سلام به این آموزش از مجله فرادرس خوش آمدید</h2>
  </article>
</div>
</body>
</html>

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

.media {
  background: #fff;
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1);
  padding: 1rem;
  margin-bottom: 2.5rem;
}
.media h2 {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.media--ls h2 {
  letter-spacing: 4px;
}

.link {
  display: inline-block;
  margin-top: 1rem;
  color: #1d7bb3;
}

/* Non Demo Related Styling */
body {
  background: #f6f6f6;
  font-family: "Rubik", sans-serif;
  line-height: 1.35;
}

.wrapper {
  max-width: 800px;
  margin: 2rem auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

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

تصویری از استفاده از فاصله بین حروف و عدم استفاده از فاصله بین حروف در HTML

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

۲. شفافیت متن

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

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<body>
<div class="wrapper">
<div class="wrapper">
  <p style="margin-bottom: 0.5rem;">Left to Right (LTR)</p>
  <article class="media">
    <h2>HI Welcome To faradars Mag</h2>
  </article>

  <p style="margin-bottom: 0.5rem;">Right to Left (RTL)</p>
  <article class="media media--ls" dir="rtl">
    <h2>سلام به مجله فرادرس خوش آمدید</h2>
  </article>
</div>
</div>
</body>
</html>

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

.media {
  background: #168fd5;
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1);
  padding: 1rem;
  margin-bottom: 2.5rem;
}
.media h2 {
  color: #fff;
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 0.5rem;
  opacity: 0.5;
}

/* Non Demo Related Styling */
body {
  background: #f6f6f6;
  font-family: "Rubik", sans-serif;
  line-height: 1.35;
}

.wrapper {
  max-width: 800px;
  margin: 2rem auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

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

مثالی از HTML برای نشان دادن شفافیت متن

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

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

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

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

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

تصویری برای بیان مفهوم تفاوت در اندازه کلمات بین زبان های مختلف در وب

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

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

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

تغییر اندازه دکمه های سایت لینکدین با استفاده از ابزارهای توسعه‌ دهنده مرورگر

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

تصویری از اپلیکیشن تویتر که در آن کلمات عربی و فارسی باهم از لحاظ اندازه تفاوت دارند.

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

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

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<body>
<div class="wrapper">
<div class="wrapper">
  <div class="wrapper">
  <div class="content" dir="rtl">
      <p dir="auto">به مقاله‌ای که در مورد نحوه طراحی وب برای صفحات RTL توضیح می دهد خوش آمدید</p>
      <p dir="auto">Welcome to the article that explains about how to design web for RTL pages</p>
  </div>
</div>
  </article>
</div>
</div>
</body>
</html>

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

.content {
  background: #fff;
  padding: 1rem;
  box-shadow: 0 5px 5px 0 rgba(#000, 0.1);
  border-radius: 5px;
}

p {
  font-size: 18px;
  margin-bottom: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  //direction: auto;
}

p:nth-child(1) {
  line-height: 1.5;
}

p:nth-child(2) {
  font-family: 'Arial';
  margin-bottom: 0;
}

/* Non Demo Related Styling */
body {
  background: #f6f6f6;
  font-family: "Almarai", sans-serif;
  line-height: 1.2;
}

.wrapper {
  max-width: 300px;
  margin: 2rem auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

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

مثالی برای بیان تفاوت برش متن در HTML در زبان های مختلف

برش متن انگلیسی دقیق نیست. این کار باید در انتهای عنصر اتفاق بیفتد نه در ابتدای آن. راه‌حل اول چالش این است که ویژگی dir=”auto”

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

هنگام طراحی برای طرح‌بندی‌های RTL (از راست به چپ)، مهم است که «ارتفاع خط» ( line-height

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

مثالی برای نشان دادن مشکلات رایج ارتفاع خط در RTL

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

تصویری برای نشان دادن مفهوم ارتفاع خط در HTML

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

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

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

مثالی برای نشان دادن پیوندهای حاوی آندرلاین در انجام کارهای راست چین در HTML

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

1.تزیین متن

ظاهر متون را می‌توان با استفاده از ویژگی‌های text-decoration-style

و text-decoration-color

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

با بررسی بیشتر این مشکل در «GitHub»، مشخص شد که استفاده از ویژگی text-decoration-skip-ink

می‌تواند مشکل همپوشانی نقاط با آندرلاین را حل کند. مقدار پیش‌فرض این ویژگی روی skip

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

<div class="wrapper" dir="rtl">
  <a href="#">تواصل معنا من خلال البريد الإلكتروني</a>
</div>

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

.wrapper {
  max-width: 400px;
  margin: 3rem auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

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

مثالی برای نشان دادن روش حل همپوشانی پیوندهای آندرلاین دار در HTML

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

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

برای بیان شیوه استفاده از box-shadow

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

.link-3 {
  color: #000;
  text-decoration-color: rgba(21, 132, 196, 0.2);
  text-decoration-style: normal;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  box-shadow: inset 0 -5px 0 0 rgba(#1584c4, 0.2);
}

@supports (text-decoration-color: red){
  .link-3 {
    box-shadow: none;
  }
}

کد بالا کلاسی به نام 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 در HTML

در زبان‌هایی مانند فارسی و عربی مفهومی از word-break

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

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

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

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

مثالی برای نشان دادن علامت های اختصاری در زبان انگلیسی

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

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

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

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

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

تصویری برای نشان دادن آیکون های دوطرفه در HTML

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

تصویری متشکل از آیکونی ثابت در طرح بندی های راست به چپ و چپ به راست

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

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

تصویری برای نشان دادن تفاوت نمایش ایکون پخش در زبان های راست چین و زبان های چپ چین

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

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

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

تصویری از آیکون های صفحه کلید پیام رسان واتس اپ در طراحی های چپ چین و راست چین

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

نمایی از آیکون های صفحه کلید پیام رسان واتس اپ در طراحی های چپ چین و راست چین

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

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

تصویری از طراحی دکمه های صفحه کلید د رطراحی های راست چین و چپ چین تویتر

چرخاندن اجزا

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

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

نمایشی برای اجرای عملیات چرخاندن اجرا در برنامه های طراحی معروف

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

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

نمادهای دکمه

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

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

ورودی های فرم

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

تصویری برای نمایش ورودی های فرم در طراحی RTL
برای مشاهده تصویر در ابعاد بزرگتر، روی آن کلیک کنید.

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

ورودی های فرم در حالت عادی و حالت کلیک شده در زبان های راست چین
برای مشاهده تصویر در ابعاد بزرگتر، روی آن کلیک کنید.

بردکرامپ

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

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

هدر صفحه

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

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

جداول

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

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

برگه‌ ها

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

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

کارت

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

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

Toasts

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

نمونه ای از طراحی Toasts در حالت راست چین و چپ چین
برای مشاهده تصویر در ابعاد بزرگتر، روی آن کلیک کنید.

بلوک نقل‌ قول

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

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

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

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

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

.page-header {
    text-align: right;
}

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

[dir="rtl"] .nav-item {
    text-align: left;
}

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

.page-header {
    text-align: end;
}

در کد بالا، جهت text-align

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

مثالی برای نشان دادن نحوه عملکرد ویژگی های CSS در امور راست چین

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

padding منطقی در CSS

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

در سمت چپ و راست ضروری است. در این زمینه، padding

سمت راست باید کمی بزرگ‌تر باشد. مانند مثال زیر: 

.input--search {  
  padding-inline-start: 1rem;
  padding-inline-end: 2.5rem;
}

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

مثالی از یک باکس جستجو و علامت آن برای نشان دادن مفهوم padding منطقی در CSS

این قطعه CSS استفاده از ویژگی‌های padding

منطقی را نشان می‌دهد که در آن padding-inline-start

را در سمت چپ اضافه می‌کند و padding-inline-end

نوعی padding

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

Margin منطقی در CSS

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

استفاده می‌شود. مانند مثال زیر: 

.page-header__avatar {  
  margin-inline-start: 1rem;
}
L

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

مثالی برای نشان دادن مفهوم Margin منطقی در CSS

در قطعه CSS فوق، margin-inline-start

برای تعریف حاشیه در سمت چپ عنصر .page-header__avatar

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

Border منطقی در CSS

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

nav__item {  
  border-inline-start: 3px solid transparent;
}

.nav__item.is-active {
  border-color: #1e9ada;
}

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

تصویری برای نشان دادن مفهوم Border منطقی در CSS

قطعه CSS بالا از border-inline-start

برای معرفی حاشیه شفاف ۳ پیکسلی در سمت چپ هر .nav__item

استفاده می‌کند. هنگامی که عنصری به حالت فعال ( .is-active

) می‌رسد، رنگ حاشیه به رنگ تعیین شده ( #1e9ada

) به‌روز می‌شود. این پیاده‌سازی، کاربرد منطقی مرزها را تضمین می‌کند که با اصول طراحی منطقی همسو است.

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

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

.nav__item {  
  border-start-end-radius: 30px;
  border-end-end-radius: 30px;
  background-color: transparent;
}

.nav__item.is-active {
  background-color: #ecf6fb;
}

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

مثالی برای نشان دادن مفهوم شعاع Border منطقی در CSS

در قطعه CSS فوق، border-start-end-radius

و border-end-end-radius

برای تعیین شعاع حاشیه برای گوشه سمت راست بالا و پایین سمت راست .nav__item

استفاده می‌شود. رنگ پس‌زمینه در ابتدا روی شفاف تنظیم می‌شود و وقتی مورد به حالت فعال .is-active

رسید، رنگ پس‌زمینه به #ecf6fb

به‌روزرسانی خواهد شد. این کاربرد منطقی کنترل دقیق شعاع مرزی را در عین حفظ طراحی ثابت تضمین می‌کند.

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

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

ویژگی منطقی ویژگی جهت‌دار
border-inline-end

 border-right
border-inline-start

 border-left
border-start-start-radius

 border-top-left-radius
border-start-end-radius

 border-top-right-radius
border-end-start-radius

 border-bottom-left-radius
border-end-end-radius

 border-bottom-right-radius
margin-inline-end

 margin-right
margin-inline-start

 margin-left
padding-inline-end

 padding-right
padding-inline-start

 padding-left
text-align: start

 text-align: left
text-align: end

 text-align: right

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

تصویری برای نمایش انواع ویژگی منطقی در CSS
برای نمایش تصویر در ابعاد بزرگ روی آن کلیک کنید.

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

تصویری برای نمایش ویژگی های جهت دار در CSS
برای نمایش تصویر در ابعاد بزرگ روی آن کلیک کنید.

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

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

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

<div class="c-section">
  <p><a href="#" class="see-link">See more</a></p>
</div>

<div class="c-section">
  <p><a href="#" class="see-link">Learn more</a></p>
</div>

در هر دو بخش، پیوندها یکسان اما برچسب آن‌ها متفاوت است. استفاده از کلاسی مانند « see-link

» در بخش دوم امکان دارد کاری گمراه‌کننده باشد. نامی مناسب‌تر می‌تواند « c-link

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

مثالی برای نشان دادن مفهوم قراردادهای نامگذاری CSS

به‌جای اختصاص نام‌های ارائه‌ای مانند « .c-page-header__left

» و « .c-page-header__right

»، از نام‌های مطمئن‌تری مانند « .c-page-header__start

» و « .c-page-header__end

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

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

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

تصویری برای نشان دادن مفهوم نوارهای پیمایش عمودی دو جهته‌ در طراحی LTR

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

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

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

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

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

ابزار Bi-App-Sass

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

.elem {
  display: flex;
  @include margin-left(10px);
  @include border-right(2px solid #000);
}

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

.elem {
  display: flex;
  margin-right: 10px;
  border-left: 2px solid #000;
}

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

.elem {
  display: flex;
  margin-left: 10px;
  border-right: 2px solid #000;
}

ابزار RTLCSS

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

سخن پایانی

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

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

source

توسط expressjs.ir

پست های مرتبط

دسته‌بندی نشده

پایان پشتیبانی شیائومی از ۷ گوشی محبوب ردمی و پوکو!

مه 16, 2025 expressjs.ir
دسته‌بندی نشده

ماجرای نامه وزارت‌خارجه به شعام برای برخورد با یک برنامه تلویزیونی | مورد قابل حل در جلسه خصوصی را به رسانه نکش!

مه 16, 2025 expressjs.ir
دسته‌بندی نشده

فیلم / سفر به ایام قدیم / رونمایی ثریا اسفندیاری از زندگی زناشویی محمدرضا پهلوی/ از روحیه انتقاد ناپذیر شاه تا دخالت پسر همجنس باز باغبان مدرسه سوییسی در دربار ایران !

مه 16, 2025 expressjs.ir

You missed

دسته‌بندی نشده

پایان پشتیبانی شیائومی از ۷ گوشی محبوب ردمی و پوکو!

مه 16, 2025 expressjs.ir
دسته‌بندی نشده

ماجرای نامه وزارت‌خارجه به شعام برای برخورد با یک برنامه تلویزیونی | مورد قابل حل در جلسه خصوصی را به رسانه نکش!

مه 16, 2025 expressjs.ir
دسته‌بندی نشده

فیلم / سفر به ایام قدیم / رونمایی ثریا اسفندیاری از زندگی زناشویی محمدرضا پهلوی/ از روحیه انتقاد ناپذیر شاه تا دخالت پسر همجنس باز باغبان مدرسه سوییسی در دربار ایران !

مه 16, 2025 expressjs.ir
دسته‌بندی نشده

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

مه 16, 2025 expressjs.ir