CSS3’ün Hyphens Özelliği ile Mükemmel Paragraflar Hazırlayın

Merhaba arkadaşlar. CSS3’ün bize getirdiklerini konuşmaya devam ediyoruz. Sırada çok ama çok büyük bir ilerleme olarak gördüğüm CSS Hyphens kodu bulunmakta.

Hyphens, Türkçe karşılığı ile satırları ve satır sonlarını düzeltmekte. Satıra sığmayan metinlerin yanına bir çizgip koyup aşağı satıra kaydırabilen bu kod parçası justify ile birlikte inanılmaz etkili çalışabiliyor. Hyphens sitenizdeki yazıların okunulabilirliğini büyük ölçüde arttıracaktır. Özellikle bizler gibi uzun metinlerin bol olduğu bir web sayfasına sahipseniz CSS Hyphens tam sizlik!

Google Chrome temelinde satır sonu hatalarının önüne geçmiş olsa da Safari ve Firefox hala tam anlamıyla bu sorunu çözemedi. Internet Explorer’dan bahsetmiyorum bile. Dolayısıyla hyphens an itibariyle kaçınılmaz.

Oluşturduğu fark nedir?

Daha öncede bahsettiğim gibi yazıların okunulabilirliğini arttırır.

Nasıl kullanılır?

hyphens: none;

En basit haliyle kod yukarıdaki şekilde kullanılır. None alanına auto ve manuel değerleri de girilebiliyor.

1. None : Hyphens değerleri kapalı.
2. Auto : Satır atlama çizgileri otomatik olarak oluşturuluyor.
3. Manuel : Satır atlama çizgileri yazara bırakılıyor.

Örneklendirmeler

En temel anlamıyla hyphensi örneklendirelim.

-webkit-hyphens: auto;

-moz-hyphens: auto;

hyphens: auto;

Moz ve webkit kod satırlarını da ekleyerek tüm browserlarda düzgün çalışmasını sağlayabilirsiniz.

Makalemi paylaşacağım 3 adet genel örnekle bitireceğim. Bunları elinizin altındaki tüm browserlarda test edin ve farkı görün. Bir sonraki dersimizde görüşmek üzere, hoşça kalın.

Hyphens ve Justify olmadan

Sadece Justify ile

Hem Hyphens hem de Justify ile