text-align، text-decoration، text-transform، text-indent

چیدمان و ظاهر کلی متن: text-align، text-decoration، text-transform و text-indent

در درس‌های قبل با فاصله‌گذاری داخل و اطراف متن آشنا شدیم. حالا وقتشه چهار Property دیگه رو ببینیم که به چیدمان افقی، خط‌کشی، حروف‌بزرگ/کوچک و تورفتگی متن مربوط می‌شن؛ ابزارهایی که تقریباً در هر پروژه واقعی، به‌کرات ازشون استفاده می‌شه.

text-align: چیدمان افقی متن

.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.justify {
  text-align: justify;
}

Property به اسم text-align نحوه چیدمان افقی متن رو داخل عنصر والدش مشخص می‌کنه.

مقدار	رفتار
left	چیدمان از سمت چپ
right	چیدمان از سمت راست
center	وسط‌چین
justify	کشیده‌شدن متن تا هر دو لبه چپ و راست به‌طور کامل پر شوند

نکته‌ای درباره justify

p {
  text-align: justify;
}

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

مقادیر منطقی: start و end

p {
  text-align: start;
}

علاوه بر left و right، مقادیر start و end هم وجود دارن که به‌جای جهت فیزیکی ثابت، به جهت نوشتار سند وابسته‌ان؛ یعنی در یک سند راست‌به‌چپ مثل فارسی، start معادل راست، و در یک سند چپ‌به‌راست مثل انگلیسی، معادل چپ خواهد بود. این مفهوم رو با جزئیات کامل در فصل Logical Properties بررسی می‌کنیم.

text-decoration: خط‌کشی روی متن

a {
  text-decoration: underline;
}

.strike {
  text-decoration: line-through;
}

.no-decoration {
  text-decoration: none;
}

Property به اسم text-decoration نوع خط تزئینی روی متن رو مشخص می‌کنه.

مقدار	رفتار
none	بدون هیچ خطی
underline	خط زیر متن
overline	خط بالای متن
line-through	خط وسط متن (خط‌خورده)

کاربرد رایج: حذف زیرخط پیش‌فرض لینک‌ها

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

a:hover {
  text-decoration: underline;
}

یکی از رایج‌ترین الگوهای طراحی، حذف زیرخط پیش‌فرض لینک‌ها (که به‌طور خودکار توسط User Agent Stylesheet اعمال می‌شه) و نمایش اون فقط در حالت :hover؛ این تکنیک، ظاهر تمیزتری به لینک‌ها می‌ده و در عین حال هنگام تعامل، بازخورد بصری مناسبی به کاربر نشون می‌ده.

شورت‌هند کامل text-decoration

.custom-underline {
  text-decoration: underline wavy red;
}

Property به اسم text-decoration در واقع یک شورت‌هند برای چند Property جداگانه‌ست، از جمله خط (underline)، سبک خط (wavy یعنی موج‌دار) و رنگ خط (red). این امکان، کنترل بسیار دقیق‌تری روی ظاهر خط تزئینی فراهم می‌کنه؛ مثلاً برای نمایش یک زیرخط قرمز موج‌دار زیر کلمات دارای خطای املایی.

text-transform: تغییر حروف بزرگ و کوچک

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

Property به اسم text-transform نمایش بصری حروف رو، بدون تغییر واقعی متن اصلی در HTML، به‌صورت بزرگ یا کوچک تغییر می‌ده.

مقدار	رفتار	مثال
uppercase	تمام حروف بزرگ	HELLO WORLD
lowercase	تمام حروف کوچک	hello world
capitalize	حرف اول هر کلمه بزرگ	Hello World
none	بدون تغییر (حالت پیش‌فرض)	Hello world

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

کاربرد رایج: برچسب‌های کوچک با حروف بزرگ

.label {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.75rem;
}

این ترکیب، دقیقاً همون الگویی‌ست که در درس قبل هم بهش اشاره کردیم؛ استفاده از uppercase همراه با کمی letter-spacing اضافه، یکی از رایج‌ترین سبک‌ها برای برچسب‌ها و عناوین کوچک در طراحی رابط کاربریه.

text-indent: تورفتگی خط اول

p {
  text-indent: 2em;
}

Property به اسم text-indent فقط خط اول یک بلوک متنی (مثل یک پاراگراف) رو، نسبت به بقیه خط‌ها، تورفته‌تر نمایش می‌ده؛ دقیقاً مثل سبک سنتی چاپ کتاب که هر پاراگراف جدید با یک فاصله کوچک از لبه شروع می‌شه.

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

در این مثال، فقط اولین خط این پاراگراف، به‌اندازه 2em (که نسبت به فونت خود همون عنصر محاسبه می‌شه، همون‌طور که در فصل ۶ دیدیم) تورفتگی می‌گیره؛ بقیه خط‌های همون پاراگراف، بدون تغییر باقی می‌مونن.

مقدار منفی در text-indent

.hanging-indent {
  text-indent: -1.5em;
  padding-left: 1.5em;
}

یک مقدار منفی برای text-indent، همراه با padding مناسب، می‌تونه برای ساخت جلوه‌ای معروف به «تورفتگی معکوس» (Hanging Indent) استفاده بشه؛ جایی که خط اول به بیرون کشیده می‌شه و بقیه خط‌ها، تورفته‌تر از خط اول باقی می‌مونن. این تکنیک در طراحی فهرست منابع یا لیست‌های خاص کاربرد داره.

یک مثال ترکیبی از هر چهار Property

.article-title {
  text-align: center;
  text-transform: capitalize;
}

.first-paragraph {
  text-indent: 1.5em;
}

.external-link {
  text-decoration: underline;
  text-decoration-style: dotted;
}

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

نکات مهم

• text-align چیدمان افقی، text-decoration خط تزئینی، text-transform ظاهر بزرگی/کوچکی حروف، و text-indent تورفتگی خط اول را کنترل می‌کنند.
• text-transform فقط ظاهر بصری را تغییر می‌دهد؛ محتوای واقعی HTML بدون تغییر باقی می‌ماند.
• text-indent فقط روی خط اول یک بلوک متنی اثر می‌گذارد، نه کل پاراگراف.

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

• استفاده گسترده از text-align: justify در ستون‌های باریک، که می‌تواند باعث فاصله‌های نامنظم و ناخوانا بین کلمات شود.
• تصور اینکه text-transform محتوای واقعی متن را تغییر می‌دهد، در حالی که فقط ظاهر بصری آن را تغییر می‌دهد.
• فراموش کردن این‌که text-indent فقط خط اول را تحت تأثیر قرار می‌دهد، نه کل بلوک متن.

جمع‌بندی

text-align چیدمان افقی متن (چپ، راست، وسط یا کشیده) را کنترل می‌کند، text-decoration امکان افزودن یا حذف خطوط تزئینی مثل زیرخط را فراهم می‌کند، text-transform ظاهر بزرگی و کوچکی حروف را بدون تغییر محتوای واقعی تغییر می‌دهد، و text-indent تورفتگی خط اول یک بلوک متنی را مشخص می‌کند. این چهار Property، ابزارهای پایه‌ای برای شکل‌دهی ظاهر کلی و چیدمان متن در هر پروژه‌ای هستند.