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

29 Nisan 2010

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

<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

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

p.introduction:first-letter {
	font-size:4.2em;
	float: left;
	line-height: 1em;
	margin: 0.13em 0.13em 0.13em 0;
}

Ö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.

@font-face {
	font-family:'PaladinFLFRegular';
	src: url('PaladinFLF.eot');
	src: local('☺'), url('PaladinFLF.ttf') format('truetype'), url('PaladinFLF.svg#webfont') format('svg');
}

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

p.introduction:first-letter {
	font: 4.2em/1em 'PaladinFLFRegular', Arial, sans-serif;
	float: left;
	margin: 0.13em 0.13em 0.13em 0;
}

Ö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.

@font-face {
	font-family: 'PaladinFLFRegular';
	src: url('PaladinFLF.eot');
	src: local('☺'), url('PaladinFLF.ttf') format('truetype'), url('PaladinFLF.svg#webfont') format('svg');
}

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

p.introduction:first-letter {
	font: 4.2em/0.6em 'PaladinFLFRegular', Arial, sans-serif;
    float: left;
    margin: 0.13em 0.13em 0 0;
	border:3px solid #fff;
	padding:0.13em;
	background-color:#F30;
	line-height:1em;
}

HTML kodları

<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>

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

Ardalan Resmi ile

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

 @font-face {
	font-family: 'PaladinFLFRegular';
	src: url('PaladinFLF.eot');
	src: local('☺'), url('PaladinFLF.ttf') format('truetype'), url('PaladinFLF.svg#webfont') format('svg');
}

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

p.introduction:first-letter {
	font: 4em/1em 'PaladinFLFRegular', Arial, sans-serif;
    float: left;
    margin: 0.13em 0.13em 0 0;
	padding:0.4em 0.5em 0.4em 0.3em ;
	background-color:#F30;
	background:url(t.jpg) 0 0 no-repeat;
	text-shadow:2px 2px 2px #999
}

Ö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 

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

p.introduction img {
	float:left;
	margin-right:0.8em
}

HTML kodu

<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.

p:first-child:first-letter{
  font-size: 4.2em;  
  float: left;  
  line-height: 1em;  
  margin: 0.13em 0.13em 0.13em 0;
}

Kaynaklar

Daha fazla oku

CSS'de lightdark() fonksiyonuyla kolayca koyu / açık mod yazımı

CSS'de lightdark() fonksiyonuyla kolayca koyu / açık mod yazımı Devamını oku

field-sizing özelliği

05 August 2024 tarihinde yayınlandı.

Tarayıcı geliştirici araçlarında yakınlaştırma ve uzaklaştırma yapmak

10 June 2024 tarihinde yayınlandı.