Metin Düzeni

Bu dersin sonunda metni hizalayabilecek, süsleyebilecek, harf aralıklarını değiştirebilecek ve uzun metinlerin nasıl kırılacağını belirleyebileceksiniz.

text-align: Hizalama

text-align bir kutunun içindeki yazıyı hizalar. Değerleri left, right, center ve justify olabilir. justify satırları iki kenara yaslar.

<p style="text-align: left;">Sola hizalı</p>
<p style="text-align: center;">Ortalanmış</p>
<p style="text-align: right;">Sağa hizalı</p>
<p style="text-align: justify;">İki yana yaslanmış bu paragrafta satırlar kutunun iki kenarına kadar uzar. Bunun için sözcüklerin arasındaki boşluklar otomatik olarak genişletilir, bu yüzden dar kutularda düzensiz görünebilir.</p>

text-align kutunun içindekileri hizalar, kutunun kendisini taşımaz. Bu yüzden span gibi satır içi bir elemana yazıldığında işe yaramaz. Dıştaki bloğa yazın.

text-decoration: Çizgiler

Yazının altına, üstüne veya ortasına çizgi ekler:

• underline Altı çizili.
• overline Üstü çizili.
• line-through Ortası çizili.
• none Çizgi yok.

Çizginin rengini, stilini ve kalınlığını ayrı ayrı da değiştirebilirsiniz:

• text-decoration-color Çizginin rengi.
• text-decoration-style solid, double, dotted, dashed veya wavy (dalgalı).
• text-decoration-thickness Çizginin kalınlığı.
• text-underline-offset Alt çizginin yazıdan uzaklığı.

<p style="text-decoration: underline;">Altı çizili</p>
<p style="text-decoration: overline;">Üstü çizili</p>
<p style="text-decoration: line-through;">Ortası çizili</p>
<p style="text-decoration: underline overline;">İkisi birden</p>
<p style="text-decoration: underline wavy crimson;">Dalgalı ve kırmızı</p>
<p style="text-decoration: underline; text-decoration-style: dashed; text-decoration-color: teal; text-decoration-thickness: 3px; text-underline-offset: 6px;">Ayrı ayrı ayarlanmış</p>
<p><a href="#" style="text-decoration: none;">Çizgisi kaldırılmış bağlantı</a></p>

text-transform: Büyük ve küçük harf

Yazıyı kaynak kodda değiştirmeden büyük veya küçük harfle gösterir:

• uppercase Hepsi büyük harf.
• lowercase Hepsi küçük harf.
• capitalize Her sözcüğün ilk harfi büyük.
• none Yazıldığı gibi.

Burada Türkçe için önemli bir ayrıntı var. Tarayıcı i harfinin neye dönüşeceğini sayfanın diline göre seçer:

<p lang="tr" style="text-transform: uppercase;">istanbul (lang="tr")</p>
<p lang="en" style="text-transform: uppercase;">istanbul (lang="en")</p>
<p lang="tr" style="text-transform: capitalize;">ilk sözcük ikinci sözcük</p>
<p lang="tr" style="text-transform: lowercase;">IŞIK VE İLAÇ</p>

İlk satırda İSTANBUL, ikincisinde ISTANBUL yazar. Sayfa İskeleti dersinde html etiketine lang="tr" yazmamızın nedenlerinden biri de budur.

letter-spacing ve word-spacing

letter-spacing harflerin, word-spacing sözcüklerin arasındaki mesafeyi değiştirir. Değer eklenecek ek boşluktur, negatif de olabilir. normal varsayılan değerdir.

<p style="letter-spacing: 3px;">Harfler arası 3px</p>
<p style="letter-spacing: 0.2em;">Harfler arası 0.2em</p>
<p style="letter-spacing: -1px;">Harfler arası -1px</p>
<p style="word-spacing: 20px;">Sözcükler arası 20 piksel boşluk</p>
<p lang="tr" style="text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.8rem; color: gray;">Küçük başlık etiketi</p>

Son satırdaki gibi küçük ve büyük harfli yazılarda biraz harf aralığı eklemek okumayı kolaylaştırır. Uzun metinlerde ise harf aralığıyla oynamayın.

text-indent ve text-shadow

text-indent paragrafın yalnızca ilk satırını içeri alır. text-shadow yazıya gölge ekler ve sırasıyla yatay kayma, dikey kayma, bulanıklık ve renk değerlerini alır. Virgülle birden çok gölge yazabilirsiniz.

<p style="text-indent: 2em;">Bu paragrafın ilk satırı içeriden başlar. Kitaplarda sık görülen bu düzen, paragraflar arasında boşluk bırakmadan yeni paragrafın başladığını belli eder.</p>
<h2 style="text-shadow: 2px 2px 4px gray;">Yumuşak gölge</h2>
<h2 style="color: white; text-shadow: 0 0 6px crimson, 0 0 12px gold;">İki gölge</h2>

Uzun metinler: white-space ve kırılma

HTML, Boşluklar ve Satırlar dersinde gördüğünüz gibi fazla boşlukları ve satır sonlarını yok sayar. white-space bu davranışı değiştirir:

• normal Varsayılan. Boşluklar birleşir, satırlar gerektiğinde kırılır.
• nowrap Satır hiç kırılmaz.
• pre Boşluklar ve satır sonları aynen korunur, satır kırılmaz.
• pre-wrap Aynen korunur ama gerekirse satır kırılır.
• pre-line Satır sonları korunur, fazla boşluklar birleşir.

Çok uzun tek bir sözcük veya adres kutudan taşabilir. overflow-wrap: anywhere gerektiğinde sözcüğün ortasından kırılmasına izin verir.

Taşan yazının sonuna üç nokta koymak için üç özellik birlikte gerekir: white-space: nowrap, overflow: hidden ve text-overflow: ellipsis.

<p style="white-space: pre-line;">Bu satır
alt satıra geçiyor,   fazla boşluklar ise birleşiyor.</p>

<div style="width: 180px; border: 1px solid gray; margin-bottom: 12px;">
  cokuzunbirsozcukcokuzunbirsozcukcokuzunbirsozcuk
</div>
<div style="width: 180px; border: 1px solid gray; margin-bottom: 12px; overflow-wrap: anywhere;">
  cokuzunbirsozcukcokuzunbirsozcukcokuzunbirsozcuk
</div>
<div style="width: 180px; border: 1px solid gray; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
  Bu cümle kutuya sığmayacak kadar uzun olduğu için sonu üç noktayla bitiyor.
</div>

vertical-align

Satır içi elemanların satıra göre dikey konumunu ayarlar. En çok metnin içindeki küçük resimleri hizalamak ve tablo hücrelerinde kullanılır. Değerleri arasında baseline, middle, top, bottom, super ve sub vardır.

<p>Metin <span style="vertical-align: super; font-size: 0.7em;">üstte</span> ve <span style="vertical-align: sub; font-size: 0.7em;">altta</span></p>
<table style="border: 1px solid gray;">
  <tr>
    <td style="height: 80px; vertical-align: top;">Üstte</td>
    <td style="height: 80px; vertical-align: middle;">Ortada</td>
    <td style="height: 80px; vertical-align: bottom;">Altta</td>
  </tr>
</table>

Liste işaretleri

Liste maddelerinin başındaki işaretler de CSS ile değiştirilir. list-style-type değerleri arasında disc, circle, square, decimal, lower-alpha, upper-roman ve none vardır. Bu özellik ul veya ol etiketine yazılır ve maddelere kalıtılır.

<ul style="list-style-type: square;">
  <li>Kare işaret</li>
</ul>
<ol style="list-style-type: upper-roman;">
  <li>Roma rakamı</li>
  <li>Roma rakamı</li>
</ol>
<ul style="list-style-type: none; padding-left: 0;">
  <li>İşaret yok, girinti de yok</li>
</ul>

<p lang="tr" style="text-transform: uppercase; letter-spacing: 0.15em; text-align: center;">yeni duyuru</p>

<p><span style="text-decoration: line-through; color: gray;">200 TL</span> 150 TL</p>

Bu derste öğrendikleriniz

• text-align bir kutunun içindeki yazıyı hizalar.
• text-decoration çizgi ekler, rengi ve stili ayrıca ayarlanabilir.
• text-transform harfleri dönüştürür ve Türkçe için lang="tr" gerekir.
• letter-spacing, word-spacing, text-indent ve text-shadow yazının ince ayarlarıdır.
• white-space, overflow-wrap ve text-overflow uzun metinlerin davranışını belirler.