عادی سازی

عادی سازی، برای هماهنگ کردن کلیه تگها و موضوعات پایه است.

در اینجا دستور العمل ها و مواردی که انتخاب کردیم آورده شده است.

اکثر اعداد بر اساس مقادرهای پایه و نسبی به صورت rem و em انتخاب شده است.
سعی کنید از استفاده حاشیه ها خود داری کنید، وقتی اندازه صفحه تغییر میکند ممکن است با جابجایی موضوعات، شکل به درستی نمایش داده نشود.
برای مدیریت بهتر اندازه ها، بهتر است از مقادیر rem استفاده کنید.
سعی کنید، در صورت امکان، نوع قلم را تغییر ندهید و از مقادیر inherit استفاده کنید.

پیش فرض های صفحه

تنظیمات مربوط به <html> و <body> به روز شده و برای صفحات گسترده تر بهتر شده است. مخصوصا::

نظیمات box-sizing برای تمامی موضوعات صفحه به صورت *::before و *::after، برای border-box. این باعث میشود، تا حاشیه های کناری به درستی نمایش داده شوند و دستخوش تغییرات نگردند.
اندازه قلم پیش فرضی تعریف نشده است ولیکن از font-size تعریف شده در <html> به اندازه 16px که توسط مرورگر تنظیم شده است استفاده میشود. مقدار font-size: 1rem برای تثبیت اندازه ها در <body> استفاده شده تا در صفحات واکنش گرا به درستی تبادل اندازه شود.
تنظیمات بر اساس یکسان سازی تم های راست به چپ و چپ به راست تنظیم شده است، به دلیل آنکه کاربران معمولا از مرورگرهای خاص Firefox و Chrome استفاده میکنندو تقریبا این مرورگرها از تنظیمات مرتبط w3 بدرستی پشتیبانی میکنند، لذا طراحی بر اساس این دو مرورگر انجام شده است و مقادیر left به start و right به end تبدیل شده است. برای اطلاعات بیشتر میتوانید اینجا را بخوانید.

تیترها و پاراگراف ها

در تمامی <h1> و <p> مقدار margin-block-start حذف شده است. تیترها margin-block-end: var(--margin-block) اضافه شده و پاراگرافها margin-block-end: var(--margin-block) برای بهبود فاصله ها قرار داده شده است.

LTR

Heading	Example
`<h1></h1>`	h1. Bootstrap heading
`<h2></h2>`	h2. Bootstrap heading
`<h3></h3>`	h3. Bootstrap heading
`<h4></h4>`	h4. Bootstrap heading
`<h5></h5>`	h5. Bootstrap heading
`<h6></h6>`	h6. Bootstrap heading

RTL

تیتر	مثال
`<h1></h1>`	h1. سر تیتر
`<h2></h2>`	h2. سر تیتر
`<h3></h3>`	h3. سر تیتر
`<h4></h4>`	h4. سر تیتر
`<h5></h5>`	h5. سر تیتر
`<h6></h6>`	h6. سر تیتر

لیستها

در تمامی لیستهای <ul>، <ol> و <dl> مقدار margin-block-start حذف شده و margin-block-end: var(--margin-block) تنظیم شده است. لیستهای تو در تو دارای مقدار margin-block-end نمیباشند.

LTR

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

RTL

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

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

برای بهتر دیده شدن عنوان dt پر رنگ شده است.

LTR

Description lists: A description list is perfect for defining terms.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

RTL

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

متون فورمت شده

در موضوع <pre> مقدار خصوصیت margin-block-start حذف شده و اندازه آن به صورت rem تعیین گردیده است.

LTR

.example-element {
  margin-block-end: 1rem;
}

RTL

.example-element {
  margin-block-end: 1rem;
}

جداول

کلیه تنظیمات جداول تغییر کرده و کادرها، نحوه چینش متون و ... تعیین شده است. برای اطلاع بیشتر میتوانید به بخش جداول مراجعه کنید.

LTR

This is an example table, and this is its caption to describe the contents.
Table heading	Table heading	Table heading	Table heading
Table cell	Table cell	Table cell	Table cell
Table cell	Table cell	Table cell	Table cell
Table cell	Table cell	Table cell	Table cell

RTL

این یک جدول مثال است ، و عنوان آن برای توصیف مطالب است.
عنوان جدول	عنوان جدول	عنوان جدول	عنوان جدول
سلول جدول	سلول جدول	سلول جدول	سلول جدول
سلول جدول	سلول جدول	سلول جدول	سلول جدول
سلول جدول	سلول جدول	سلول جدول	سلول جدول

فرم

عناصر فرم مختلف هستند و تغییراتی ساده بر روی آنها اعمال شده است که برخی عبارتند از:

<fieldset> ها هیچ فضای خالی درون یا بیرون خود ندارند، پس به راحتی میتوانید از این تگ برای مدیریت ورودی ها استفاده کنید.
<legend> نیز مانند fieldsets دوباره تنظیم شده و تنظیمات مرتبط با قلم، فاصله ها بهبود پیدا کرده است.
<label> وضعیت نمایش آن به display: inline-block تغییر پیدا کرده است.
<input>، <select>، <textarea> و <button> بطور کلی تغییر کرده است.
<textarea> در صورتی که کاربر تمایل به بزرگ کردن آن را دارد، میتواند در جهت عمودی این عمل را انجام دهد، تا تداخلی با نقاط شکست در صفحه ایجاد نشود.
<button> و <input> از نوع دکمه شکل نمایش گر مویس زمانی که غیر فعال نیست به cursor: pointer تغییر پیدا کرده است.

در زیر تغییرات گفته شده در بالا و تغییرات بیشتری که اشاره نشده را مشاهده خواهید کرد.

LTR

Example legend

Example input

Example select

Check this checkbox

Option one is this and that Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls. Option three is disabled

Example textarea

Example date

Example time

Example output 100

RTL

مثال توصیفی

مثال ورودی

مثال انتخاب

این کادر انتخاب است

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

مثال متن طولانی

مثال تاریخ

مثال زمان

مثال خروجی 100

موضوعات مختلف

آدرس

موضوع <address> پیش فرضهای مرورگر را تغییر داده مانند نوع نمایش قلم و اندازه.

LTR

Nastouh, Inc.
21 no, 13 Aban
Tehran, Iran
P: (123) 456-7890

Full Name
first.last@example.com

RTL

شرکت نستوه
ایران، تهران
13 ابان، پلاک 21
ت: (123) 456-7890

نام کامل
first.last@example.com

نقل قول

در این موضوع حاشیه ها تنظیم شده است.

LTR

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

RTL

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

کسی مشهور وجود دارد در عنوان منبع

المانهای خطی

عنصر <abbr> طوری تغییر داده شده که در بین متن قابل مشاهده باشد..

LTR

Nulla attr vitae elit libero, a pharetra augue.

RTL

نولا ع.ص یک مثال بی معنی است.

جمع بندی Summery

شکل پیش فرض اشاره گر مویس cursor برای سامری text است. برای بهتر دیده شدن ما آنرا به pointer تغییر داده ایم.

LTR

Some details

More info about the details.

Even more details

Here are even more details about the details.

RTL

برخی از جزئیات

اطلاعات بیشتر در مورد جزئیات

حتی جزئیات بیشتر

در اینجا حتی جزئیات بیشتری در مورد جزئیات آورده شده است.