Metin

Aşağıdaki bölümlerde tanımlanan nitelikler karakterlerin, boşlukların, sözcüklerin ve paragrafların görsel sunumunu etkiler.

Girintileme: text-indent niteliği text-indent nitelikler text-indent text-indent uzunluk | yüzdelik | inherit 0 blok seviyesinden elemanlar evet taşıyıcı blok genişliği ölçüt alınır görsel

Bu nitelik bir bloktaki metnin ilk satırının girinti miktarını belirtir. Başka bir deyişle, blokun ilk satır çerçevesine akan ilk çerçevenin girinti miktarını belirler. Çerçeve satır çerçevesinin sol kenarına göre (yazım yönü sağdan sola ise sağ kenara göre) tasarlanır. Kullanıcı arayüzlerinin bu girintiyi boş alan olarak oluşturmaları gerekir.

Değerlerin anlamları:

Girinti sabit bir uzunluk olarak belirtilir.

Girinti taşıyıcı blokun genişliğine oranlanır.

text-indent değeri negatif olabilir, fakat gerçeklenime özgü sınırlamalar olabilir. Eğer text-indent değeri negatif ise metnin görünürlüğünü overflow değeri belirleyecektir.

Bu örnekte metin '3em' girintilenmektedir.

p { text-indent: 3em } Hizalama: text-align niteliği text-align nitelikler text-align text-align left | right | center | justify | dizge | inherit kullanıcı arayüzüne ve yazım yönüne bağlı blok seviyesinden elemanlar evet görsel

Bu nitelik bir bloğun satıriçi içeriğinin nasıl hizalanacağını belirler. Değerlerin anlamları şöyledir:

Metni sırayla sola, sağa yanaştırır, ortalar veya iki kenara yanaştırarak satıra yayar.

Bir tablo sütununda göze içeriklerini hizalamak için bir dizge belirtmekte kullanılır (ayrıntılar ve örnek için bölümüne bakınız). Bu değer sadece tablo gözelerine uygulanır. Başka elemanlarda belirtilirse yazım yönüne göre, yani direction niteliğinin ltr veya rtl oluşuna bağlı olarak sırayla left veya right belirtilmiş gibi işlem yapılır.

Bir metin bloku bir satır çerçevesi yığınıdır. left, right ve center durumunda, bu nitelik, her satır çerçevesi içindeki satıriçi çerçevelerin satır çerçevesinin sol ve/veya sağ kenarına göre nasıl hizalanacağını belirtir; hizalama görüntü alanına göre yapılmaz. justify durumunda ise kullanıcı arayüzü satıriçi çerçevelerin konumlarını belirlemekten başka genişliklerini arttırabilir. (Ayrıca, letter-spacing ve word-spacing niteliklerine de bakınız.)

Bu örnekte, text-align miras alındığından 'class="center"' öznitelikli tüm div elemanlarının içindeki blok seviyesinden elemanların hepsinin satıriçi içeriği ortalanacaktır.

div.center { text-align: center }

Asıl hizalama algoritması kullanıcı arayüzünün kullandığıdır ve dile bağlı olarak yazılmıştır.

uyumluluk Uyumlu kullanıcı arayüzleri justify değerini, elemanın öntanımlı yazma yönünün soldan sağa olması durumunda left olarak aksi takdirde right olarak uygulayabilirler.

 Süsleme Satırın altını, üstünü, ortasını çizme ve yanıp sönme: text-decoration niteliği text-decoration nitelikler text-decoration text-decoration none | [ underline || overline || line-through || blink ] | inherit none hayır (metne bakınız) görsel

Bu nitelik bir elemanın metnine eklenen süslemeleri tanımlar. Eğer nitelik bir block seviyesinden eleman için belirtilmeşse elemanın tüm satıriçi astsallarını etkiler. Bir satıriçi seviyeden eleman için belirtilmişse (veya üzerinde etkiliyse) eleman tarafından üretilen tüm çerçeveleri etkiler. Elemanın ne içeriği ne de metni varsa (HTML'deki img elemanı gibi) kullanıcı arayüzlerinin bu niteliği yoksaymaları gerekir.

Değerlerin anlamları:

Hiçbir metin süslemesi üretilmez.

Metnin her satırının altı çizilir.

Metnin her satırının üstü çizilir.

Metnin her satırının ortası çizilir.

Metin yanıp söner (bir görünür bir görünmez olur). Uyumlu kullanıcı arayüzlerinin bu değeri desteklemeleri gerekli değildir.

Metin süslemesi için gereken renkler color niteliğinin değerinden türetilmelidir.

Bu nitelik miras alınmaz, fakat bir blok çerçevesinin astsal çerçevelerinin renkleri (color niteliklerinin değerleri) farklı bile olsa aynı süsleme ile biçimlenmesi gerekir.

Aşağıdaki HTML örneğinde, hiper bağ olarak işlev yapan tüm a elemanlarının içeriklerinin altı çizilecektir:

a[href] { text-decoration: underline } Metin gölgelendirme: text-shadow niteliği text-shadow nitelikler text-shadow text-shadow none | [renk || uzunluk uzunluk uzunluk? ,]* [renk || uzunluk uzunluk uzunluk?] | inherit none hayır (metne bakınız) görsel

Bu nitelik elemanın metnine uygulanacak gölgeleme etmenlerini virgül ayraçlı bir liste olarak kabul eder. Gölgeleme etmenleri belirtildiği sırada uygulanır ve bu bakımdan biri diğerini örtebilir, fakat asla metni örtmezler. Gölgeleme etmenleri bir çerçevenin boyutlarını değiştirmez, fakat sınırlarına dayanabilir. Gölgeleme etmenlerinin yığıt seviyesi elemanın ki ile aynıdır.

Her gölgeleme etmeni için mutlaka bir gölge mesafesi belirtilmelidir, ayrıca isteğe bağlı olarak bir bulanıklık yarıçapı ve bir gölge rengi belirtilebilir.

uzunluk Bir gölgenin yeri metinden uzaklık belirten iki uzunluk değeri ile belirtilir. İlk uzunluk değerinde metnin sağına yatay uzaklık belirtilir. Negatif bir yatay uzunluk değeri gölgeyi metnin soluna yerleştirir. İkinci uzunluk değerinde metnin aşağısına doğru gölgenin yerine düşey uzaklık belirtir. Negatif bir düşey uzunluk değeri gölgeyi metnin yukarısına yerleştirir.

Bulanıklık yarıçapı isteğe bağlı olarak gölgenin yerinden sonra belirtilebilir. Bulanıklık yarıçapı, bulanıklık etmeninin sınırlarını belirleyen bir uzunluk değeridir. Bulanıklık etkisi veren etmenin hesabında kullanılan algoritma belirtilmemiştir.

Gölgeleme etmeninin uzunluk değerlerinden sonra ya da önce isteğe bağlı olarak bir renk belirtilebilir. Renk değeri gölgeleme etmeni için temel renk olarak kullanılacaktır. Renk için bir değer belirtilmezse color niteliğinde belirtilen değer kullanılır.

Metin gölgeleri :first-letter ve :first-line sözde elemanlarıyla birlikte kullanılabilir.

Bu örnekte elemanın metninin sağ altına doğru bir metin gölgesi belirtilmiştir. Bir renk değeri belirtilmediğinden gölge elemanın kendisi ile aynı renkte olacak ve bir bulanıklık yarıçapı da belirtilmediğinden metin gölgesi bulanıklaştırılmayacaktır:

h1 { text-shadow: 0.2em 0.2em }

Aşağıdaki örnekte yine elemanın metninin sağ altına doğru bir metin gölgesi belirtilmiştir. Gölgeye 5px yarıçaplı bulanıklık verilecek ve gölge temelde kırmızı renkte olacaktır:

h2 { text-shadow: 3px 3px 5px red }

Sonraki örnekte birden fazla gölge ekmeni belirtilmektedir. İlk gölge elemanın metninin sağ altına doğru, kırmızı renkte olacak ve bulanıklaştırılmayacaktır. İkinci gölge ilk gölgenin üzerine gelecek, metnin alt soluna yerleşecek, sarı renkte ve bulanık olacaktır. üçüncü gölge metnin sağ üstüne yerleşecektir. Üçüncü gölge için bir renk belirtilmediğinden gölge rengi elemanın color niteliğinen alınacaktır:

h2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px } span.glow { background: white; color: white; text-shadow: black 0px 0px 5px; }

Bu örnekte, background ve color nitelikleri aynı değere sahiptir ve text-shadow niteliği "güneş tutulması" etkisi oluşturmak için kullanılmıştır:

[Açıklama]

Bu nitelik BB1'de yoktur. Bazı gölge etmenleri (son örnekteki gibi) sadece BB1 biçembentlerini destekleyen kullanıcı arayüzleri tarafından görünmez bir metin olarak oluşturulabilir.

 Harfler ve sözcükler arası boşluklar: letter-spacing ve word-spacing nitelikleri letter-spacing nitelikler letter-spacing letter-spacing normal | uzunluk | inherit normal evet görsel

Bu nitelik metin karakterleri arasındaki boşlukların genişliklerini ayarlar. Değerlerin anlamları:

Geçerli yazıtipi için normal boşluk genişliği kullanılır. Bu değer kullanıcı arayüzlerinin metni iki kenara yayarak hizalarken karakterler arasındaki boşlukları değiştirebilme imkanı sağlar.

Bu değer, karakterler arasındaki öntanımlı boşluğa ek bir boşluk genişliği belirtmek için kullanılır. Negatif değer belirtilebilir, ancak gerçeklenime bağlı sınırlamalar olabilir. Bu değer kullanıcı arayüzlerinin metni iki kenara yayarak hizalarken karakterler arasındaki boşlukları değiştirebilme imkanı vermeyebilir.

Karakterler arası boşluk algoritması kullanıcı arayüzüne bağlıdır. Karakterler arası boşluklar ayrıca satır iki kenara yayılarak hizalama yapılırken değişebilir (text-align niteliğine bakınız).

Bu örnekte, blockquote içeriğindeki karakterler arası boşluklar '0.1em' arttırılmaktadır:

blockquote { letter-spacing: 0.1em }

Aşağıdaki örnekte ise kullanıcı arayüzüne karakterler arası boşluğu değiştirme izni verilmemiştir:

blockquote { letter-spacing: 0cm } /* Sadece '0' verilebilirdi */

çift harf İki karakter arasında elde edilen boşluk öntanımlı boşlukla aynı olmadığı takdirde kullanıcı arayüzlerinin çift harfleri [İng.: ligature] kullanmamaları gerekir.

uyumluluk Uyumlu kullanıcı arayüzleri, letter-spacing niteliğinin değerinin normal olduğunu varsayabilirler.

word-spacing nitelikler word-spacing word-spacing normal | uzunluk | inherit normal blok seviyesinden elemanlar evet görsel

Bu nitelik sözcükler arası boşluk genişliğini değiştirmekte kullanılır. Değerlerin anlamları:

Geçerli yazıtipi ve/veya kullanıcı arayüzü tarafından tanımlanmış olan sözcükler arası boşluk genişliği.

Bu değer, sözcükler arasındaki öntanımlı boşluğa ek bir boşluk genişliği belirtmek için kullanılır. Negatif değer belirtilebilir, ancak gerçeklenime bağlı sınırlamalar olabilir.

Sözcükler arası boşluk algoritmaları kullanıcı arayüzüne bağlıdır. Sözcükler arası boşluklar ayrıca satır iki kenara yayılarak hizalama yapılırken değişebilir (text-align niteliğine bakınız).

Bu örnekte, h1 içeriğindeki sözcükler arası boşluklar '1em' arttırılmaktadır:

h1 { word-spacing: 1em }

uyumluluk Uyumlu kullanıcı arayüzleri, word-spacing niteliğinin değerinin normal olduğunu varsayabilirler.

 Harf büyüklüğü: text-transform niteliği text-transform nitelikler text-transform text-transform capitalize | uppercase | lowercase | none | inherit none evet görsel

Bu nitelik elemanın metninin karakterlerinin harf büyüklükleri üzerinde etkilidir. Değerlerin anlamları:

Her sözcüğün ilk karakterini büyük harfe dönüştürür.

Sözcüğün tüm harflerini büyük harfe çevirir.

Sözcüğün tüm harflerini küçük harfe çevirir.

Harf büyüklüklerinde değişiklik yapılmaz.

Her harf için asıl dönüşüm karakteri metnin yazıldığı dile bağlıdır. Bir elemanın dilini bulma yolları için 'e bakınız.

uyumluluk Uyumlu kullanıcı arayüzleri, harf dönüşüm tablosu 'da belirtilenden farklı olan dillerin elemanları için ve Latin-1 ailesinden olmayan karakterler için text-transform niteliğinin değerinin none olduğunu varsayabilirler.

Aşağıdaki kural h1 elemanının tüm metnini büyük harfe çevirmektedir:

h1 { text-transform: uppercase } Boşlukların korunması: white-space niteliği white-space nitelikler white-space white-space normal | pre | nowrap | inherit normal evet görsel

Bu nitelik bir elemanın içeriğindeki boşluklar için nasıl bir işlem yapılacağını belirtir. Değerlerin anlamları:

Bu değer kullanıcı arayüzlerini boşlukları normalleştirmesi ve satır çerçeveleri doldukça satırları sonlandırması için yönlendirir. Ek satırsonları üretilen içerikte satırsonu istenen yerlere "\A" dizgesi yerleştirilerek elde edilebilir (HTML'deki br elemanı gibi).

Bu değer kullanıcı arayüzlerinin boşluk normalleştirmesi yapmasını önler. Satırlar sadece kaynak belgede satırsonu karakterlerinin bulunduğu yerlerde veya üretilen içerikte sadece "\A" dizgelerinin bulunduğu yerlerde sonlandırılır.

Bu değer normal gibi boşlukları normalleştirir fakat üretilen içerikteki "\A" dizgeleri hariç satırları sonlandırmaz.

Aşağıdaki örnekte, pre ve p elemanları ile 'nowrap' özniteliğinden eleman içeriğindeki boşluklar için nasıl bir işlem beklendiği belirtilmiştir:

pre { white-space: pre } P { white-space: normal } td[nowrap] { white-space: nowrap }

uyumluluk yoksaymak Uyumlu kullanıcı arayüzleri kullanıcı ve yazar biçembentlerindeki white-space niteliklerini yoksayabilir, fakat öntanımlı biçembentte bir değer belirtmelidirler.