CSS3 Metin Özellikleri

word-wrap özelliği

CSS3 word-wrap özelliği diğer CSS3 özelliklerinden farklı olarak tüm tarayıcılar(IE dahil) tarafından desteklenmektedir.

word-wrap özelliği belirtilen alandaki metnin kapsayıcı eleman sınırlarını zorlayan uzunlukta arada boşluk olmadan uzadığında kelimeyi satır başına atmak için kullanılır.

Bir örnek verecek olursak 150px genişliğindeki bir alan içinde bir metnimiz olsun.

<div id="link">
Loremipsumdolorsitametconsecteturadipiscingelit. Nam semper venenatis lobortis. Donec odio nisl, vehicula vitae molestie ac, euismod ac nibh.
</div>

CSS kodu

#link{
  width:150px;
  border:1px solid #999;
}

word-wrap ile bu uzun kelimeyi aşağı atarak sayfadaki patlaklığı düzeltebiliriz.

Önceki yazımda bu işi white-space ile halletmiştim, ama mantıklı olan word-wrap ile çözmek.

text-wrap

text-wrap özelliği word-wrap’e benzer bir özelliktir. word-wrap’in kelimeye yaptığı etkiyi text-wrap metinlere yapar.

text-wrap 4 adet değer alır.

• normal: Satır sadece belirlenen yerlerden sonra satır başı yapar.
• none: Satır herhangi bir yerden satırbaşı yapmaz. Metin kapsayıcı üzerinden aşar.
• unrestricted: Satır herhangi iki karakter arasından satırbaşı yapılabilir.
• suppress: Satır içinde eğer satırbaşı yapacak bir nokta yoksa elemanı satırbaşı yaptırır

Bu özelliği henüz hiç bir tarayıcı desteklemiyor.

text-stroke

CSS3 ile birlikte text-outline olarak standartlara giren bu özellik daha sonra standartlardan çıkarıldı, ancak webkit tabanlı tarayıcıların -webkit-text-stroke olarak desteklemektedir.

CSS3 ile birlikte metinlerin etrafına dış çizgisi çizmemize olanak sağlıyor. Şu an sadece webkit tabanlı tarayıcıların(Safari, Chrome) desteği mevcut.

Tanım yaparken ilk olarak yazı tipinin rengini yaparız, sonrada dış hat çizgisini tanımlarız.

font:bold 24px Arial, Helvetica, sans-serif;
color: #c00;
-webkit-text-stroke: 1px #000;

<iframe style="width: 100%; height: 300px" src="http://jsfiddle.net/fatihhayri/3dsPG/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

text-stroke tanımının ilk değeri dış çizgisinin kalınlığını ikinci tanım rengini belirler.

Dış Çizgili ve Saydam zeminli Yazı Tipleri Oluşturmak

Saydam zeminli yazı tipleri tanımlamak için text-fill-color  özelliği kullanılır.

ont:bold 24px Arial, Helvetica, sans-serif;
color: #c00;
-webkit-text-stroke: 1px #000;
-webkit-text-fill-color: transparent;

text-align (yeni değerler)

text-align özelliği CSS3’den öncede vardı ancak CSS3 ile bu özelliğe iki tane daha yeni değer atandı. Burada bunları inceleyeceğiz. start ve end değerleri. Türkçe ve İngilizce metinler solda-sağa doğru akar., ancak bazı dillerde akış sağdan-sola doğrudur, örneğin Arapça. Böyle sağdan-sola doğru akan dillerde için bu iki değer işe yarıyor.

• start: Eğer akış soldan sağa ise left etkisi yapacaktır. Akış sağdan-sola ise right etkisi yapacaktır.
• end: Eğer akış soldan sağa ise right etkisi yapacaktır. Akış sağdan-sola ise left etkisi yapacaktır.

text-align-last

CSS3 ile birlikte gelen bu özellik son satırın veya justify tanımlanmış elemanların satırlarının hizalanmasını sağlar. Bu özellik text-align ile aynı etkiyi yapar.

justify uygulanmış bir metnin son satırının sağa yaslı olmasını istiyorsak

p {
text-align: justify;
-ms-text-align-last: right;
}

text-overflow

Blok kapsayıcı elemanı içindeki satır içi elemanın içeriğini overflow uygulamak için kullanılır. Blok kapsayıcı elemana overflow:visible tanımı yapılmamış olmalıdır.

resim kaynağı: https://developer.mozilla.org/en/CSS/text-overflow

Başlangış değeri clip’dir. clip değeri alan satır içi eleman kapsayıcı eleman sınırlarından kırpılacaktır. Diğer aldığı değer ellipsis’dir. ellipsis değeri alan eleman clip gibi davranacaktır ancak farklı olarak sonuna üç nokta(…) koyacaktır.

CSS3 ile birlikte üç nokta yerine kendi istediğimiz özel karkateri cümle satır sonuna ekleyebiliyoruz.

p {
	text-overflow: 'herhangibirsey';
}

text-rendering

text-rendering özelliği okunabilirliği ayarlamamızı sağlana bir özelliktir. Bu özellik sayesinden tarayıcının metinlerimizi nasıl tarayacağını belirleyebiliyoruz. Tarayıcılar metinleri hız, okunabilirlik ve geometrik hassasiyet bakımından farklı şekilde yorumlarlar; text-rendering özelliği bu farklılıkları bizim kontrolümüze sunana bir özelliktir.

• auto değeri metin tarama işini tarayıcıya bıraktığımız anlamına geliyor.
• optimizeSpeed  değeri hızlı yüklemeyi okunabilirlik ve geometrik hassasiyetin önünde tutar. Karkater aralığı ve bitişik farf özelliklerinin pasifize eder.
• optimizeLegibility  değeri okunabilirliği hız ve geometrik hassasiyetin önünde tutar. Karakter aralığı ve bitişik harf özelliklerinin aktiftir.
• geometricPrecision değeri geometrik hassasiyeti hız ve okunabilirliğin önünde tutar. Geometrik hassasiyet ile yazı tipi oranlı olarak yorumlanmasını sağlar ve buda yazı tiplerinin daha güzel görünmesini sağlar.

resim kaynağı: https://developer.mozilla.org/en/CSS/text-rendering

Tanımlarda dikkatimiz çeken karakter aralığı olarak Y ve o arasındaki mesafe ve ffl görünümündeki farklar kendini gösteriyor.

Chrome auto değerini optimizeSpeed olarak yorumluyor, geometricPrecision  değerini tam olarak 13. sürümden itibaren yorumluyor.

Firefox auto değerini yazı boyutu 20px ve üzerinde optimizeLegibility gibi, diğerlerini ise optimizeSpeed gibi yorumluyor. geometricPrecision  ise optimizeLegibility gibi yorumluyor.

Safari auto değerini optimizeSpeed gibi yorumluyor.

hanging-punctuation

CSS3 metinleri yönetmek açısından bizim elimizi kuvvetlendirdiği kesin. hanging-punctuation özelliği bize ayrıntı bir özellik kazandırıyor. hanging-punctuation özelliği metin bloğunun dışına çıkarmamızı sağlıyor. Liste ikonları ve çift tırnakları metin bloğu dışına çıkararak daha güzel sonuçlar almamızı sağlıyor.

Yukarıdaki resimde görüldüğü gibi ilk resimde hanging-punctuation uygulanmamış halini görürken ikinci resimde uygulanmış halini görüyoruz. Çift tırnak ve keme işaretleri metin bloğu dışına çıkarak daha blok bir metini ortaya koyuyor.

Bu özelliği henüz herhangi bir tarayıcı desteklememektedir.

Sonuç

CSS3 birçok yönden elimiz güçlendirmektedir. CSS3 metinler üzerinde düzenleme yapmamıza olanak sağlıyor. Henüz tam olarak tamamlanmaya birçok yönü var CSS3 metin özellikleri zamanla daha iyi oturacaktır.

Önceden tarayıcılar ve işletim sistemlerinin inisiyatifinde olan özellikleri CSS3 ile birlikte kod yazarlarının eline vermeye çalışıyor.

Kalın sağlıcakla.

Kaynaklar

• http://www.w3.org/TR/css3-text/
• http://www.impressivewebs.com/word-wrap-css3/
• http://www.opera.com/docs/specs/presto27/css/text/
• http://caniuse.com/wordwrap (wordp-wrap destek listesi)
• https://developer.mozilla.org/En/CSS/Word-wrap
• http://www.w3.org/TR/css3-text/
• http://www.cardeo.ca/2010/adding-an-outline-to-your-text-using-the-css3-text-stroke-property (text-stroke)
• http://css-tricks.com/7405-adding-stroke-to-web-text/ (text-stroke)
• http://www.webkit.org/blog/85/introducing-text-stroke/
• http://code.stephenmorley.org/html-and-css/white-space-handling/
• http://www.impressivewebs.com/css-white-space/
• http://www.quirksmode.org/css/stroke.html
• http://www.impressivewebs.com/word-wrap-css3/
• http://www.fatihhayrioglu.com/satir-donusuword-wrap-firefox-sorunu-nasil-cozulur/#idc-cover
• http://webdesignerwall.com/tutorials/word-wrap-force-text-to-wrap
• https://developer.mozilla.org/en/CSS/text-align
• https://developer.mozilla.org/en/CSS/text-overflow
• http://www.456bereastreet.com/archive/201105/clipping_text_with_css3_text-overflow/
• http://www.cssplay.co.uk/menu/text-overflow.html (örnek)
• http://www.css3.info/preview/text-overflow/
• http://deepubalan.com/blog/2010/11/27/text-overflow-css3-property-explained-pure-css-solution-to-get-ellipsis/
• http://caniuse.com/text-overflow (destek listesi)
• https://developer.mozilla.org/en/CSS/text-rendering
• http://trentwalton.com/2010/06/29/css-text-rendering/
• http://htmlcss.wikia.com/wiki/Text-rendering
• http://coding.smashingmagazine.com/2010/03/01/css-and-the-future-of-text/
• http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-better-typography-part-2
• http://www.webreference.com/programming/corecss/2/4.html