استایل‌های Text Layout

مقدمه

استایل‌های مربوط به متن را در یک طبقه‌بندی کلی می‌توان در دو گروه جای داد: یکی استایل‌های مربوط به فونت و دیگری استایل‌هایی که به طرح‌بندی متن (text layout) مربوط هستند. استایل‌های مربوط به فونت متن را در درس قبلی بررسی کردیم و در این درس هم استایل‌های Text Layout را مورد بررسی قرار می‌دهیم.

پراپرتی text-indent

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

CSS

p{
  border: 1px solid gray;
  text-indent: 50px;
}

پراپرتی‌های word-spacing و letter-spacing

از پراپرتی word-spacing برای تعیین فاصله‌ی بین کلمات (که در تایپوگرافی tracking گفته می‌شود) و از پراپرتی letter-spacing برای تعیین فاصله‌ی بین کاراکترها (که در تایپوگرافی kerning نامیده می‌شود) استفاده می‌شود. هر دوی این پراپرتی‌ها دارای مقدار پیش‌فرض 0 هستند و می‌توانند مقادیر منفی را نیز دریافت کنند.

مقادیر مثبت برای این پراپرتی به منزله‌ی افزایش و مقادیر منفی به معنای کاهش فاصله است. در مثال زیر، با استفاده از این پراپرتی‌ها یک فاصله‌ی 5px بین کلمات و یک فاصله‌ی 3px بین حروف ایجاد کرده‌ایم.

CSS

h2{
  word-spacing: 5px;
  letter-spacing: 3px;
}

البته اگر بخواهیم متن در مقابل تغییر ابعاد و روزلوشن نمایشگر خروجی مقیاس‌پذیر باشد، باید از واحدهایی مانند درصد یا em استفاده کنیم.

پراپرتی white-space

با استفاده از پراپرتی white-space می‌توانیم نحوه‌ی مدیریت کاراکترهای whitespace را در عناصرِ شامل متن تعیین کنیم. مقدار پیش‌فرض این پراپرتی normal است که باعث می‌شود یک دنباله از کاراکترهای whitespace اصطلاحاً collapse شوند. اگر محتوای متنی از عرض کانتینرش تجاوزکند، به خط بعدی می‌رود.

اما با تخصیص مقدار pre به پراپرتی white-space می‌توانیم این رفتار پیش‌فرض را تغییر دهیم و از مرورگر بخواهیم کاراکترهای whitespace را به همان شکل و تعدادی که هستند، نمایش دهد. مثال زیر را ببینید.

CSS

div{
  border: 1px solid red;
  width: 10rem;
  white-space: pre;
}

پراپرتی line-height

پراپرتی line-height برای تعیین فاصله‌ی بین خطوط که در تایپوگرافی leading نامیده می‌شود، کاربرد دارد. مقدار اولیه‌ی این پراپرتی برابر با normal است که معمولاً به اندازه‌ی 120% سایز فونت رندر می‌شود. برای تعیین مقدار دلخواه برای این پراپرتی می‌توانیم از یک مقدار بر حسب طول، درصد و یا یک مقدار بدون واحد که در سایز فونت فعلی ضرب می‌شود، استفاده کنیم.

با توجه به اینکه پراپرتی line-height به ارث می‌رسد، بهتر است که از یک عدد بدون واحد برای تعیین مقدار آن استفاده کنیم. استفاده از مقادیر طولی یا درصد برای این پراپرتی، می‌تواند در عناصر فرزندی که دارای سایز فونت متفاوتی هستند، نتایج غیرمنتظره‌ای به همراه داشته باشد.

CSS

p{
  line-height: 1.5;
}