فنون چاپ و تایپوگرافی
مقدار دهی تگهای استاندارد، کلاس های رابط و نمایش آنها و نحوه استفاده از آنها در این صفحه آمده است.
عناوین
تمامی عناوینی که در html تعیین شده اند مقدار دهی شده اند. همچنین میتوان از کلاس هم نام آن در انواع موضوعات دیگر نیز استفاده کرد.
| <h1></h1> | Heading 1 WidgetNas | عنوان 1 ویجت نس |
| <h2></h2> | Heading 2 WidgetNas | عنوان 2 ویجت نس |
| <h3></h3> | Heading 3 WidgetNas | عنوان 3 ویجت نس |
| <h4></h4> | Heading 4 WidgetNas | عنوان 4 ویجت نس |
| <h5></h5> | Heading 5 WidgetNas | عنوان 5 ویجت نس |
| <h6></h6> | Heading 6 WidgetNas | عنوان 6 ویجت نس |
.h? classes
| <p class='h1'></p> | Heading 1 WidgetNas | عنوان 1 ویجت نس |
| <p class='h2'></p> | Heading 2 WidgetNas | عنوان 2 ویجت نس |
| <p class='h3'></p> | Heading 3 WidgetNas | عنوان 3 ویجت نس |
| <p class='h4'></p> | Heading 4 WidgetNas | عنوان 4 ویجت نس |
| <p class='h5'></p> | Heading 5 WidgetNas | عنوان 5 ویجت نس |
| <p class='h6'></p> | Heading 6 WidgetNas | عنوان 6 ویجت نس |
عناوین سفارش سازی شده
شما میتوانید عناوین را بر اساس نیاز خود سفارشی کنید، مثال ها در زیر آورده شده است.
LTR
Heading with muted text
RTL
عنوان با متن کم رنگ شده
<h1>Heading <small class="text-muted">with muted text</small></h1>
چیدمان متن
برای آنکه متن خود را در صفحه به صورت راست و چپ و وسط چین داشته باشید، میتوانید از کلاسهای زیر استفاده کنید.
به دلیل آنکه استانداردهای جدید به جای استفاده از left و right از گزینه های start و end استفاده میکنند. ما نیز در این فریم ورک عبارت چپ و راست را حذف و آنرا به شروع و پایان تغییر دادیم.
LTR
text-start:
Text Start
text-center:
Text Center
text-end:
Text End
text-left:
Text Left
text-right:
Text Right
text-justify:
This is test message with long width for looking justification.
RTL
text-start:
متن ابتدا
text-center:
متن وسط
text-end:
متن انتها
text-left:
چپ چین
text-right:
راست چین
text-justify:
این یک متن طولانی هست برای آنکه ببینید چطور چیدمان تنظیم میشود.
<p class="text-start">Text Message</p>
چیدمان افقی
به صورت پیش فرض متن ها از بالا به پایین پر میشوند، در صورتیکه تمایل به تغییر وضعیت چینش دارید از کلاسهای va-? استفاده کنید.
LTR
| va-top | va-middle | va-bottom | |
|---|---|---|---|
| This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. | This is test message | This is test message | This is test message |
RTL
| va-top | va-middle | va-bottom | |
|---|---|---|---|
| این در اینجا متن متغیرهایی است که قصد دارد فضای عمودی زیادی را اشغال کند ، تا نشان دهد چگونه ترازبندی عمودی در سلولهای قبلی کار می کند. | این یک متن آزمایشی است | این یک متن آزمایشی است | این یک متن آزمایشی است |
<p class="va-top">...</p>
<p class="va-middle">...</p>
<p class="va-bottom">...</p>
شکستن خط
برای آنکه متن درون یک کادر محدود چگونه نمایش داده شود میتوانید از گزینه های زیر استفاده کنید.
LTR
text-wrap:
This is test message for watching wrap mode
text-nowrap:
This is test message for watching wrap mode
RTL
text-wrap:
این یک متن آزمایشی برای نمایش شکست است
text-nowrap:
این یک متن آزمایشی برای نمایش شکست است
<p class="text-wrap">Text Message</p>
<p class="text-nowrap">Text Message</p>
اندازه ها
برای تغییر اندازه قلم میتوانید از گزینه های اندازه استفاده کنید.
LTR
| fs-xs | Test Message |
| fs-s | Test Message |
| fs-m | Test Message |
| fs-n | Test Message |
| fs-l | Test Message |
| fs-xl | Test Message |
| fs-xxl | Test Message |
| fs-xxxl | Test Message |
RTL
| fs-xs | متن آزمایشی |
| fs-s | متن آزمایشی |
| fs-m | متن آزمایشی |
| fs-n | متن آزمایشی |
| fs-l | متن آزمایشی |
| fs-xl | متن آزمایشی |
| fs-xxl | متن آزمایشی |
| fs-xxxl | متن آزمایشی |
<p class="fs-xl">Text Message</p>
درشتی Bold
LTR
| fw-lighter | Test Message |
| fw-normal | Test Message |
| fw-bold | Test Message |
| fw-bolder | Test Message |
| fw-100 | Test Message |
| fw-500 | Test Message |
| fw-900 | Test Message |
RTL
| fw-lighter | متن آزمایشی |
| fw-normal | متن آزمایشی |
| fw-bold | متن آزمایشی |
| fw-bolder | متن آزمایشی |
| fw-100 | متن آزمایشی |
| fw-500 | متن آزمایشی |
| fw-900 | متن آزمایشی |
<p class="fw-normal">Text Message</p>
شمایل
LTR
| fst-n | Test Message |
| fst-i | Test Message |
| fst-o | Test Message |
RTL
| fst-n | متن آزمایشی |
| fst-i | متن آزمایشی |
| fst-o | متن آزمایشی |
<p class="fst-i">Text Message</p>
LTR
| fd-n | Test Message |
| fd-u | Test Message |
| fd-l | Test Message |
| fd-o | Test Message |
RTL
| fd-n | متن آزمایشی |
| fd-u | متن آزمایشی |
| fd-l | متن آزمایشی |
| fd-o | متن آزمایشی |
<p class="fd-u">Text Message</p>
اگر میخواهید همه تنظیمات رو به حالت اول برگردانید از کلاس f-normal استفاده کنید.
فاصله خطوطی
برای تنظیم فاصله خطوط از کلاسlh- و یکی از واحدهای اندازه که قبلا تعریف شده استفاده کنید.
LTR
| lh-n | Some placeholder content to show off the line height utilities. Happy birthday. You could've been the greatest. |
| lh-50r | Some placeholder content to show off the line height utilities. Happy birthday. You could've been the greatest. |
| lh-100r | Some placeholder content to show off the line height utilities. Happy birthday. You could've been the greatest. |
| lh-150r | Some placeholder content to show off the line height utilities. Happy birthday. You could've been the greatest. |
| lh-200r | Some placeholder content to show off the line height utilities. Happy birthday. You could've been the greatest. |
RTL
| lh-n | لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون |
| lh-50r | لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون |
| lh-100r | لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون |
| lh-150r | لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون |
| lh-200r | لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون |
<p class="lh-150r">Text Message</p>
جهت درست نوشتن متون چپ به راست در متون راست به چپ
خیلی اوقات اتفاق می افتد که تمایل دارید یک متن انگلیسی را درون یک متن فارسی بنویسید، ولیکن ممکن است ترتیب نوشتن بهم بریزد، متون مانند شماره تلفن، شما میتوانید از کلاس bidi-override کمک بگیرید.
برای مثال وقتی برنامه های تماس میخواهند شماره شما را شناسایی کنند، به دلیل تغییر در ساختار شماره تلفن برای نمایش درست انسانی، شماره به صورت ناصحیح شناسایی شده و قابل تماس نیست.
RTL
شما با شماره تلفن +98 (21) 123456 تماس بگیرید. شماره درست نمایش داده نشده است.
شما با شماره تلفن +98 (21) 123456 تماس بگیرید. شماره درست نمایش داده شده است.
<span class="bidi-override">...</span>
<bidi>...</bidi>