ویژگی های چیدمان متن در CSS
ویژگی های چینش متن در CSS، می تواند نحوه چینش افقی یا عمودی و جهت متن ها یا به طور کلی، چیدمان متن را مشخص کند.
- text-align : چینش افقی متن را مشخص می کند.
- text-align-last: چینش افقی خط آخر متن را مشخص می کند.
- direction: جهت متن را مشخص می کند.
- unicode-bidi: جهت حروف را مشخص می کند.
- vertical-align: چینش عمودی متن را مشخص می کند.
ویژگی text-align در CSS
ویژگی text-align برای تنظیم چینش افقی متن المان استفاده می شود.
ویژگی text-align می تواند مقادیر زیر را دریافت کند:
- left (چپ چین)
- center (وسط چین)
- right (راست چین)
- justify (مرتب)
text-align: left;
text-align: center;
text-align: right;وقتی که از مقدار justify استفاده می کنید، فاصله بین کلمات و حروف طوری تنظیم می شود که متن مرتب نشان داده شود.
text-align: justify;ویژگی text-align-last در CSS
ویژگی text-align-last، چینش افقی خط آخر متن را مشخص می کند.
text-align-last: left;
text-align-last: center;
text-align-last: right;ویژگی direction در CSS
ویژگی direction برای تعیین جهت متن استفاده می شود. این ویژگی مقادیر زیر را دریافت می کند:
- ltr: مخفف left to right متن را چپ به راست می کند.
- rtl: مخفف right to left متن را راست به چپ می کند.
direction: rtl;نکته: برای سایت های فارسی معمولا در تگ body از ویژگی dir="rtl" استفاده می کنند. به نمونه کد زیر توجه کنید.
<html dir="rtl">تفاوت ویژگی text-align و direction در CSS
از ویژگی text-align تنها برای تعیین چینش متن در سمت راست، وسط یا چپ صفحه استفاده می شود.
از ویژگی direction برای تعیین جهت آغاز متن استفاده می شود.
با ویژگی direction، جهت متن تغییر کرده و کلمات در متن جابه جا خواهند شد؛ ولی در ویژگی text-align متن بدون تغییر به سمت مورد نظر ما خواهد رفت.
direction: rtl;
text-align: right;مرتب و راست چین کردن متن در CSS
برای متن سایت های فارسی نیاز به مرتب سازی (justify) و راست چین (right) کردن به صورت همزمان داریم.
نکته: به صورت عملی، در ویژگی text-align امکان وارد کردن همزمان مقدار justify با right و ... وجود ندارد. برای اعمال همزمان این ویژگی از ترفند زیر استفاده می کنیم.
برای این کار باید:
- ویژگی direction را برابر با rtl قرار دهیم.
- ویژگی text-align را برابر با justify قرار دهیم.
- خط آخر متن (text-align-last) را برابر با right قرار دهیم.
text-align: justify;
direction: rtl;
text-align-last: right;ویژگی unicode-bidi در CSS
ویژگی unicode-bidi برای برعکس کردن جهت حروف استفاده می شود. این ویژگی مقادیر زیر را دریافت می کند:
- normal: حروف به صورت عادی نمایش داده می شوند. (پیش فرض)
- bidi-override: حروف کلمات به صورت برعکس نمایش داده می شوند.
unicode-bidi: bidi-override;ویژگی vertical-align در CSS
ویژگی vertical-align برای تنظیم چینش عمودی متن در یک المان استفاده می شود و مقادیر زیر را دریافت می کند:
- baseline (مقدار پیشفرض)
- text-top
- text-bottom
- sub (زیرنویس)
- super (بالا نویس)
vertical-align: baseline;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: sub;
vertical-align: super;خلاصه ویژگی های چینش در CSS
در جدول زیر ویژگی های چینش را به طور خلاصه مشاهده می کنید.
| ویژگی | توضیحات |
| direction | این ویژگی جهت متن یا نوشته را مشخص می کند. |
| text-align | این ویژگی چینش متن را مشخص می کند. |
| text-align-last | این ویژگی چینش آخرین متن را مشخص می کند. |
| unicode-bidi | این ویژگی به همراه ویژگی direction برای اینکه آیا یک متن از چندین زبان در یک سند استفاده کند یا خیر، استفاده می شود. |
| vertical-align | این ویژگی چینش عمودی یک المان را تنظیم می کند. |
خلاصه درس
در این درس با ویژگی های چینش متن در CSS:
- ویژگی text-align
- ویژگی text-align-last
- ویژگی direction
- تفاوت ویژگی text-align و direction
- مرتب و راست چین کردن متن
- ویژگی unicode-bidi
- ویژگی vertical-align
آشنا شدیم.
احسان اسلامی
