CSS ile kısa çizgileri yönetme

Joe Medley
Joe Medley

Birçok yazılı dilde, heceler arasındaki ve kelimeler arasındaki satırları ayırmak mümkündür. Bu çoğu zaman, metin alanında daha az satıra sahip olmak ve böylece yer tasarrufu sağlamak amacıyla bir metin satırına daha fazla karakter yerleştirilebilmesi için yapılır. Bu tür dillerde ara, görsel olarak bir kısa çizgi ("-") ile belirtilir.

CSS Metin Modülü Düzey 3, kullanıcılara kısa çizgilerin ne zaman gösterileceğini ve gösterilenlerin nasıl davranacağını kontrol etmek için bir tireler özelliği tanımlar. Sürüm 55'ten itibaren Chrome, kısa çizgi özelliğini uygulamaktadır. Spesifikasyona göre kısa çizgi özelliğinin üç değeri vardır: none, manual ve auto. Bunu göstermek için aşağıdaki örnekte olduğu gibi yumuşak kısa çizgi (­) kullanmamız gerekir.

Google ipsum dolor sit amet, consectetur adipiscing e­lit.

Yumuşak kısa çizgi, yalnızca sonda gerçekleştiğinde gösterilecek. Bu kısa çizginin Chrome 55 veya sonraki sürümlerde nasıl oluşturulacağı, CSS hypens özelliğinin değerine bağlıdır.

-webkit-hyphens: manual;
hyphens: manual;

Bu değerler birleştirildiğinde şöyle bir sonuç elde edilir:

Tek satır ekran görüntüsü

Yumuşak kısa çizginin görünmediğine dikkat edin. Her durumda, yumuşak kısa çizgiyi içeren bir kelime tek bir satıra sığdığında tire işareti görünmez olur. Şimdi, kısa çizgi değerinin üçünün de nasıl davrandığına bakalım.

Hiçbirini kullanma

İlk örnekte kısa çizgi özelliği none olarak ayarlanmıştır. Bu, yumuşak kısa çizginin görüntülenmesini önler. Pencere boyutunu "elit" kelimesinin görünen metin satırına sığmayacağı şekilde ayarlayarak bunu onaylayabilirsiniz.

Google ipsum dolor sit amet, consectetur adipiscing elit.

Manuel kullanılıyor

İkinci örnekte kısa çizgi özelliği manual olarak ayarlanmıştır. Bu sayede, yumuşak kısa çizgi yalnızca kenar boşluğu "elit" kelimesini kırdığında görünür. Yine pencere boyutunu ayarlayarak bunu onaylayabilirsiniz.

Google ipsum dolor sit amet, consectetur adipiscing elit.

Otomatik seçeneğini kullanma

Üçüncü örnekte kısa çizgi özelliği auto olarak ayarlanmıştır. Bu durumda, kullanıcı aracısı kısa çizgi konumlarını otomatik olarak belirleyeceği için yumuşak kısa çizgiye gerek yoktur. Pencereyi yeniden boyutlandırırsanız, tarayıcının bu örnekte olduğu gibi, ikincide olduğu yerde kısa çizgi oluşturduğunu görürsünüz ancak yumuşak kısa çizgi yoktur. Pencereyi daraltmaya devam ederseniz tarayıcınızın metindeki iki hece arasındaki satırları kesebildiğini göreceksiniz.

Google ipsum dolor sit amet, consectetur adipiscing elit.