تکنیک‌های پیشرفته قالب‌بندی متن با CSS

ویژگی‌های متن CSS کنترل کامل ظاهر متن را می‌دهد: رنگ، تراز، تزیین، تبدیل حروف، فاصله‌ها و...

مزایا:

• دقت بالا در فاصله کلمات/حروف/خطوط
• سازگاری RTL (فارسی/عربی)
• بهبود خوانایی متن

۱. color (رنگ متن)

تنظیم رنگ کاراکترها (نه پس‌زمینه).

روش‌ها: نام | Hex | RGB | HSL

h1 { color: #ff0000; }     /* قرمز */
p  { color: green; }       /* سبز */

نکته: مستقل از background-color → ترکیب کنید!

۲. text-align (تراز افقی)

چینش متن در خط.

مثال:

h1 { text-align: center; }
p  { text-align: justify; }

justify در عمل: کلمات کشیده می‌شوند تا لبه‌ها صاف بماند.

۳. text-decoration (تزیین متن)

خط‌کشی روی/زیر/وسط متن.

مثال:

h1 { text-decoration: overline; }
h2 { text-decoration: line-through; }

حذف خط زیر لینک‌ها (بهترین روش)

a {
  text-decoration: none;
  border-bottom: 1px dotted #369;  /* نقطه‌چین زیبا */
}

چرا؟ خط صاف → گیج‌کننده | نقطه‌چین → واضح + زیبا

هشدار: blink در بیشتر مرورگرها پشتیبانی نمی‌شود ❌

۴. text-transform (تبدیل حروف)

تغییر خودکار حروف.

مثال:

.up    { text-transform: uppercase; }
.cap   { text-transform: capitalize; }
.low   { text-transform: lowercase; }

۵. text-indent (تورفتگی خط اول)

فاصله خط اول پاراگراف (مثل کتاب).

مقادیر: px | % | em

p {
  text-indent: 2em;   /* 2 برابر اندازه فونت */
  /* یا: 50px | 5% */
}

نکته RTL: در فارسی از راست تورفتگی می‌گیرد.

۶. word-spacing (فاصله کلمات)

فاصله اضافی بین کلمات.

مقادیر: normal | px | em

p.wide { word-spacing: 8px; }

ترکیب با:

p.justify-wide {
  word-spacing: 6px;
  text-align: justify;  /* کشش + فاصله */
}

۷. letter-spacing (فاصله حروف)

**فاصله اضافی بین هر حرف.

مقادیر: normal | px (منفی=فشرده)

h1.tight { letter-spacing: -1px; }  /* فشرده */
p.wide   { letter-spacing: 4px;  }  /* باز */

۸. line-height (ارتفاع خط)

فاصله عمودی خطوط (خوانایی ↑).

مقادیر:

• عدد: 1.6 × font-size
• px | em | %

مثال:

p {
  font-size: 16px;
  line-height: 1.6;  /* 25.6px ارتفاع */
}

محاسبه:

اختلاف = line-height - font-size
نصف‌فاصله = اختلاف ÷ 2  (بالا + پایین)

مثال بصری:

p.demo {
  font-size: 14px;
  line-height: 24px;
  background: #f0e68c;  /* پس‌زمینه برای نمایش */
}
/* نصف‌فاصله: (24-14)/2 = 5px بالا + 5px پایین */

برچسب‌ها: CSS, text-align, text-decoration, line-height, word-spacing