Yatay Çizgi Çekmek

Merhabalar,

Epub düzenlemede <hr> (yatay çizgi) elementini kullanmak

Bölüm aralarına düz çizgi çekmek için <hr> elementi kullanılabilir.

Kullanımı oldukça basittir: Bir satıra <hr /> kodunu yazdığınızda, o satıra boydan boya yatay bir çizgi atanır. Ancak böyle boydan boya bir çizgi pek şık durmaz. Satır uzunluğunun yüzde 10-20’si uzunluğunda, ortalanmış bir çizgi daha estetik olur.

Bunu yapmak için CSS dosyasının içine şöyle bir kod ekleyin:

hr {width: 10%;margin-left:45%;margin-bottom:1em;margin-top:1em}

Bu kadar. Bundan sonra kitabın içinde nerede <hr /> kodunu kullanırsak, orda yüzde 10 uzunluğunda, ortalanmış bir yatay çizgi konur.

Çizginin uzunluğuyla “margin-left” değeri arasındaki ilişkinin formülü şu: (100% – width%) / 2 = margin-left

Karışık görünüyor ama örnek verince çok basit. Diyelim uzunluğu yüzde 30 olsun istiyoruz. 100’den 30 çıkarıp 2’ye bölüyoruz, sonuç 35. İşte çıkan bu değer “margin-left” değeri. Böylece CSS kodumuz şu oluyor:

hr {width: 30%;margin-left:35%;}

Bununla birlikte, ben kendi düzenlemelerimde hemen hiçbir zaman düz çizgi kullanmadım (ayrıca mobi’de bu kodlar işe yaramaz, boydan boya ful çizgi eklenir). Bunun yerine size hem daha kolay hem de (bence) daha güzel sonuç veren bir yöntem önereyim.

CSS dosyasının içine aşağıdaki kodu ekleyin:

div {text-indent: 0; text-align: center;font-size:2em;margin-bottom:.5em;margin-top:.5em}

Şimdi, kitabın içinde her bölüm arasına aşağıdaki kodlardan birini ekleyin:

—∗—

veya

•—•—•

veya

Hepsi bu. Bölüm aralarınız hazır. İlişikteki test.epub dosyasında yukarda anlattığım tüm kodlar hazır olarak var. Üşenmeyin, değerlerle oynayarak istediğiniz görüntüyü elde etmeye çalışın.

hr

https://yadi.sk/d/30mPAdRfmdQeo

Son olarak, bütün bunların yerine, dilerseniz, ayırıcı olarak bir resim dosyası da kullanabilirsiniz. Google’da “divider png” yazarak “görseller” bölümüne geçin, işinize yarayacak sayısız “bölücü resim” bulacaksınız

 

Konu Anlatımı: Rhazman

3 thoughts on “Yatay Çizgi Çekmek

  1. Ayhan Hocha 18 Ocak 2016 / 22:53

    Yatay çizginize renk ve kalınlık vermek için kod satırına Color ve Size parametrelerini ekleyebilirsiniz.

    Liked by 1 kişi

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Connecting to %s