Bu site için çok gerekli değil ama uzun makaleler ihtiva eden bazı siteler var ki içeriğini yazdırmak işkenceye dönüşebiliyor. Kenarlardaki menüler, gereksiz renkler ve logolar gibi yazdırılmasını istemediğimiz şeylerden kurtulmak gerekiyor.

Direkt yazdır butonuna tıkladığımızda sitenin tüm görüntüsü yazdırılacağından, bu işe bir çözüm olarak Yazıcı Dostu Görünüm (Printer Friendly Version) adı altında çeşitli çözümler geliştirilmiş. Gerek web sitesi sahipleri, gerekse okuyucuları için.

Biraz bu çözümlerden bahsedelim.

Kendi web sitenizde Yazıcı Dostu Görünüm hizmeti verebilmenin en kolay ve bilgi gerektirmeyen yöntemi http://www.printfriendly.com/button adresi üzerinden elde edilebilecek olan kodu web sitenizde kullanmak. Biraz yavaş gibi geldi ama etkili bir yöntem.

Bu siteyi kullanabilmek için bir web sitenizin olmasına gerek yok. Yazdırmak istediğiniz web sitesinin adresini http://www.printfriendly.com adresindeki kutuya yazıp, Yazıcı Dostu Görünüm elde edebiliyorsunuz ya da tarayıcınıza bir bookmarklet ekleyerek kullanabiliyorsunuz. Kendi sitesi üzerinden Yazıcı Dostu Görünüm elde etmek Türkçe sitelerde karakter problemine neden olabiliyor. Ayrıca yazdırılacak alanı iyi analiz edemeyebiliyor. Bookmarklet ile kullanımda bu şekilde bir soruna rastlamadım. Oluşturulan görüntüde yazdırmak istemediğiniz yerleri de bir mouse darbesi ile silebiliyorsunuz. Bir başka güzel özelliği de sitenin pdf versiyonunu da elde edebiliyorsunuz.

Web sitenize Yazıcı Dostu Görünüm özelliği kazandırabilmenizin bir başka yolu da Css teknikleri kullanmak.

Ana mantık iki adet Css dosyası kullanmaktan geçiyor. Birincisi zaten kullanmakta olduğunuz style dosyanız. Diğeri de sadece print (çıktı) alınırken kullanılmak üzere yazılacak.

Basitce örneklendirirsek;

Soldaki görüntüye sahip bir web sitesinden çıktı almak bir hayli mürekkep ziyanlığına sebep olacağı kadar karmaşık bir görüntüyü de beraberinde getirecektir.

Bu sitenin kodları aşağıda.

Görüldüğü gibi iki adet Css dosyası bu kodlara eklenmiştir. Bunlardan web.css bu renkli görüntüyü oluşturmamızı sağlayan Css dosyasıdır. Diğer dosyamız print.css ise print (çıktı) alırken kullanılacak olan Css dosyası.

Web.css dosyasının kodları aşağıda.

/* CSS Document */
body
{
background-color:#99CCFF;
}
.ana
{
margin:0 auto;
width:800px;
}
.ust
{
background-color:#99FF00;
width:800px;
height:100px;
float:left;
}
.sol
{
background-color:#FFCC00;
float:left;
width:200px;
height:600px;
}
.orta
{
background-color:#66CCFF;
width:400px;
height:600px;
float:left;
font-family:"Courier New", Courier, mono;
font-size:9px;
}
.sag
{
background-color:#66CCCC;
width:200px;
height:600px;
float:left;
}
.alt
{
background-color:#FF99CC;
width:800px;
height:100px;
float:left;
}
h1
{
color:#FF0000;
font-size:36px;
}

Burada da görüleceği üzere her yeri renklendirmişiz.

Bir de print.css dosyasının kodlarını inceleyelim.

/* CSS Document */
.ust
{
display:none;
}
.sol
{
display:none;
}
.sag
{
display:none;
}
.alt
{
display:none;
}
.orta
{
font-family:Arial, Helvetica, sans-serif;
font-size:11pt;
}
h1
{
color:#000000;
font-size:12pt;
}

Bu css dosyalarını sitemize

<link rel="stylesheet" type="text/css" href="web.css" media="screen">
<link rel="stylesheet" type="text/css" href="print.css" media="print">

kodları ile tanıtıyoruz. Bir başka yöntem de @import yöntemi.

<style type="text/css">
  @import url("web.css") screen;
  @import url("print.css") print;
</style>

@import yöntemi ile cssleri tanımladığım zaman Internet Explorer'da geçerli sonucu elde edemedim. Sürüm 8.0.6001. Birşeyi gözden kaçırmış olabilirim.

Print.css'e dikkat edilirse, oldukça basitleştirilmiş. Normalde sitede izlenebilen üst, sol, sağ ve alt menüler

.ust
{
display:none;
}

mantığı ile kaldırılmış. Küçük punto ile yazılmış olan orta kısım düzenlenmiş ve h1 tagi de siyah renge çevrilip daha küçük bir karakterle yazılmış.

Bu uygulamayı yaptıktan sonra tarayıcınızın Yazdırma Önizleme ya da Baskı Önizleme'sine tıklarsanız sadece istediğiniz bölümün istediğiniz gibi gözüktüğünü görebilirsiniz.

Son olarak bir javascript uygulaması ile ziyaretçinin Yazdırma Önizleme ya da Baskı Önizleme'ye basmadan site üzerinden nasıl bir çıktı alacağını görmesini sağlıyoruz.

Kodumuz aşağıda. <head></head> tagleri arasına koyabiliriz. Ya da genel bir javascript dosyanız varsa içine entegre edebilirsiniz.

Yukarıdaki kodda aklımızda tutalım şeklinde belirttiğim "orta" tanımlamasını yazdırılmasını istediğimiz <div> lere id olarak tanımlıyoruz.

Örneğimizi hatırlarsanız sadece

<div class="orta"></div>

tagleri arasındakileri yazdırmak istiyorduk. O zaman bu kodu

olarak düzenlememiz gerekiyor.

Print (çıktı) linkini istediğimiz bir yere aşağıdaki kod yardımı ile yerleştiriyoruz. 

<a href="javascript:Clickheretoprint()">Yazıcı Dostu Görünüm</a>

Son halimiz yandaki şekilde oluyor.

Bütün bunların çalışır haldeki örneğine http://blog.aquarist.gen.tr/ornek/printerfriendly/ adresinden ulaşabilirsiniz.

Ayrıca bu sitede de bu yönteme benzer bir yöntemle Yazıcı Dostu Görünüm - Printer Friendly Version elde ediliyor. Aşağıda linkini görebilirsiniz.

Daha başka Yazıcı Dostu Görünüm elde etme yolları da var mutlaka. Php ile ve Asp ile olanlarını gördüm araştırırken. Tabii olarak Php ya da Asp destekli hostlarda çalışabilirler. Bu örnek ise bütün hostlarda çalışıyor.