İlk harfi büyük (drop caps) paragraflar oluşturmak

Geçen gün Kadir Günay bana sormuştu bu konuyu benim aklımda da css ile bir çözümü olduğu ancak ie6 ile sorunu olduğu kalmıştı. Biraz araştırdım ie6 ile sorunu yok, var ama ufak tefek. Araştırmışken birde makale yazayım herkes yararlansın dedim.

İlk harfi büyük paragraflar oluşturma işi aslında dergilerde sık uygulanan bir yöntemdir. Genelde dergilerin başlangıç paragrafının ilk harfi 2 veya daha fazla satır yüksekliğinde oluşturarak farklı ve güzel bir görünüm kazandırırlar. Bu durumu biz css ile yapabiliyoruz.

Biz bu görüntüyü first-letter seçicisi ile elde edebiliyoruz. Hatta bu seçicinin adı drop caps-ilk harfi büyük harf seçicisi diyede geçiyor. Bizim için en büyük avantajı ie6 dahil tüm tarayıcıların bu özelliği desteklemesi.

:first-letter seçicisini tanımlanabilen özellikler listesi;

font özellikleri
color özellikleri
background özellikleri
text-decoration
vertical-align (float değeri none ise)
text-transform
line-height
margin özellikleri
padding özellikleri
border özellikleri
float
text-shadow
clear

İlk Denememiz

HTML kodlarımız

1 <p class="introduction">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

CSS kodlarımız

01
p{

02
 width:350px;

03
 background-color:#272722;

04
 padding:10px;

05
 color:#fff;

06
}

07

08
p.introduction:first-letter {

09
 font-size: 4.2em;

10
 float: left;

11
 line-height: 1em;

12
 margin: 0.13em 0.13em 0.13em 0;

13
}

Örneği görmek için tıklayınız.

Firefox?da yukarıdaki görüntüyü elde ederken

İnternet Explorer?da yukarıdaki gibi bir görüntü elde ederiz. Dikkat ederseniz bir explorerda L harfi yukarıya daha yakın.

Sorunu gidermek için line-height değerini 1em olarak atıyoruz. Farklı line-height değerleri ile padding uygulamalarında ie 6 ve 7?de sorun çıkıyor, line-height değerini 1 em?de tutmak mantık en azından ie için 1em yapmak gerekiyor.

Fark stillerde uygulamalar yapabiliriz.

İlk harfi font-face ile özel bir yazı tipi ile oluşturarak güzel bir görüntü elde edebiliriz. Yazı tipini(PaladinFLF) http://www.fontsquirrel.com/fontface sitesinden aldım.

01
@font-face {

02
 font-family: 'PaladinFLFRegular';

03
 src: url('PaladinFLF.eot');

04
 src: local('?'), url('PaladinFLF.ttf') format('truetype'), url('PaladinFLF.svg#webfont') format('svg');

05
}

06

07
p{width:350px; background-color:#272722; padding:10px; color:#fff;}

08
p.introduction:first-letter {

09
 font: 4.2em/1em 'PaladinFLFRegular', Arial, sans-serif;

10
 float: left;

11
 margin: 0.13em 0.13em 0.13em 0;

12
}

Örneği görmek için tıklayınız.

İşe Biraz daha renk katalım

İlk harfin etrafına kenar çizgisi atayıp ardalan rengini değiştirelim.

01
@font-face {

02
 font-family: 'PaladinFLFRegular';

03
 src: url('PaladinFLF.eot');

04
 src: local('?'), url('PaladinFLF.ttf') format('truetype'), url('PaladinFLF.svg#webfont') format('svg');

05
}

06

07
p{

08
 width:350px;

09
 background-color:#272722;

10
 padding:10px;

11
 color:#fff;

12
}

13

14
p.introduction:first-letter {

15
 font: 4.2em/0.6em 'PaladinFLFRegular', Arial, sans-serif;

16
 float: left;

17
 margin: 0.13em 0.13em 0 0;

18
 border:3px solid #fff;

19
 padding:0.13em;

20
 background-color:#F30;

21
 line-height:1em;

22
}

HTML kodları

Örneği görmek için tıklayınız.

Ardalan Resmi ile

Harfin ardalanına bir resim koyup üzerine harfi koymayı deniyorum.

01
 @font-face {

02
 font-family: 'PaladinFLFRegular';

03
 src: url('PaladinFLF.eot');

04
 src: local('?'), url('PaladinFLF.ttf') format('truetype'), url('PaladinFLF.svg#webfont') format('svg');

05
}

06

07
p{

08
 width:350px;

09
 background-color:#272722;

10
 padding:10px;

11
 color:#fff;

12
}

13

14
p.introduction:first-letter {

15
 font: 4em/1em 'PaladinFLFRegular', Arial, sans-serif;

16
 float: left;

17
 margin: 0.13em 0.13em 0 0;

18
 padding:0.4em 0.5em 0.4em 0.3em ;

19
 background-color:#F30;

20
 background:url(t.jpg) 0 0 no-repeat;

21
 text-shadow:2px 2px 2px #999

22
}

Örneği görmek için tıklayınız.

Firefox ile yukarıdaki gibi güzel bir sonuç elde ediyoruz. Ancak İnternet Explorer?da sorun yaşıyoruz.

Bu duruma çözüm üretmek için bir kaç yol var. İlki resmi direk içeriğe ekleyip float:left ile sola yaslayarak çözmek

01
p{

02
 width:350px;

03
 background-color:#272722;

04
 padding:10px;

05
 color:#fff;

06
}

07

08
p.introduction img {

09
 float:left;

10
 margin-right:0.8em

11
}

HTML kodu

1 <p class="introduction"><img src="t1.jpg" width="93" height="100" />empor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Velit esse cillum dolore eu fugiat nulla pariatur</p>

Örneği görmek için tıklayınız.

Diğer bir yöntem bu harfi span içine alıp background olarak tanımlamaktır.

CSS3 ile ekstra kod kullanmadan

Sayfamızın ilk paragrafının ilk harfine uygulama yapıyoruz. first-child seçicisi bu imkanı bize sağlar. ancak bu özelliği ie < 9 desteklemiyor.

`1`	`p:first-child:first-letter{`

`2`	`font-size:` `4.2em;` `float:` `left;` `line-height:` `1em;` `margin:` `0.13em` `0.13em` `0.13em` `0;`

3 }

Kaynaklar

Kaynak : CSS Dersleri, Fatih HAYRİOĞLU