Anasayfa » Webmaster » Css ile yazıyı sağa ve sola yaslama

Css ile yazıyı sağa ve sola yaslama

Yazıyı bulunduğu div içerisinde sağ ve sola yaslı bir şekilde görüntülemek için ufak bir css komutu kullanabilirsiniz. Güzel bir görüntü elde etmek için tercih edilse de, doğrusu ben pek sevmedim.

Css komutu, yazıyı sağ tarafa yaslamak için kelimeler arasındaki boşluğu açıyor. Bazı temalarda hoş durmayabilir.

Kitaplarda fark etmişsinizdir, genelde sayfaların sağ tarafında yazılar bir hizada duruyor. Resimde gözüktüğü gibi.

Yazıyı sağa sola yaslama
Yazıyı sağa sola yaslama

Gördüğünüz gibi kitaplarda yazıyı sağ tarafa yaslamak için kelimeler arasındaki boşlukların oranı değiştirilmiyor. Biz bunu kelimeler arasındaki boşlukları kullanarak sağlayacağız.

CSS ile yazıyı sağa hizalama komutu 

Kullandığınız temanın sitil dosyasına eklemeniz gereken kod. Stil dosyanızın uzantısı .css olmalıdır.

text-align:Justify;

Ben kendi siteme uyguladım ve resimdeki gibi oldu.

Sağa sola yaslanmış hali
Sağa sola yaslanmış hali

Resimde görüldüğü gibi Nasıl mı? Her yıl kelimelerinin aralarındaki boşluk genişletilmiş. Bu benim pek hoşuma gitmedi.

Aynı yazının normal hali resimdeki gibidir.

Normal yazı
Normal hali

Ufak bir kodla, yazıyı-metni sağa hizalayabilir, nasıl göründüğüne bakabilirsiniz.

text-align:Justify;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;

Yukarındaki css komutları, yazının sağ tarafa eşitlenme durumunda oluşan kelimeler arasındaki boşluları kapatmak için kullanabiliriz. Çünkü bazı satırlarda sağa yaslamalar gerçekten çok abartılı kelime arası boşluklara sebep oluyor.

Beki nasıl kapatıyor kelimeler arasındaki boşlulları?

Satır sonuna gelen kelimeyi tire ile ayırarak alt satıra atıyor. Bu okuduğumuz kitaplarda, gazetelerde sürekli gördüğümüz, uygulanması çok elzem olan bir kulanım çeklidir. Web tabanlı uygulamalarda kelimeyi uygun heceden sonra bölmesi konusunda biraz geç kalınan bir geliştirme olduğu için pek bilinmiyor ve bu yüzden rastlamamız biraz zor oluyor.

Eğer Genesis temada kullanmak isterseniz aşağıdaki komutları kopyalayıp stil dosyanıza yapıştırın. Başlıklar ve diğer alanlarda kullanılan yazılar bozulmaması için sadece içerikte uygulamış olursunuz.

.entry-content{
text-align:Justify;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}

Umarım güzel gözüküyordur.

“Css ile yazıyı sağa ve sola yaslama” üzerine 4 yorum

  1. Süper oldu bu. Eline sağlık. CSS olmasaydı ne yapardık bilmiyorum. Div’de yazıyı sağ tarafa hizalama daha zor.

    Cevapla

Yorum yapın

K & S Ajans

Sunucu optimizasyonu, WordPress kurulumu, Kullanıcı odaklı tasarımlar, SEO çalışması, E-Posta ağı gibi işlemlerin tamamı için eğitim paketlerimiz mevcuttur.

KVKK: birblog.com kapsamında kişisel verileriniz: içeriklerimize yorum yapmanız durumunda, IP ve E-posta adresiniz 3. kişilerin erişimine kapalı kalır, kullanıcı adı ve yorumunuz ilgili içeriğin sayfasında görüntülenir. Ödeme alanı: kullandığımız ödeme servisi hiçbir şekilde kişisel verilerinizi kullanamaz. İletişim formu: İletişim formuna girdiğiniz veriler işleme tabii değildir. Abonelik: abone olduğunuz E-Posta adresi sizin onayınız sonucunda yeni içeriklerin bildirimine açılır.

Kerem SARI

Fındıklı Mah. Serin Sok. No:155/15 MALTEPE / İSTANBUL Posta Kodu: 34854

Whatsapp

0850 308 93 34

0532 744 2058

info@ksajans.com

Küçükyalı Vergi Dairesi

Vergi No: 7460853530

K&S AJANS, Bilgi Teknolojileri ve İletişim Kurumu (BTK) lisansı ile ticari amaçla faaliyet gösteren yasal yer sağlayıcı ve hosting firmasıdır.