Eyl.26

Yazdırma İşleminde Gösterilecek Alanları Belirleme ve Yazdırma için Sade Stil Verme

Bu makalede profesyonel bir web sayfasında mutlaka olması gereken yazdırma işlemi ile ilgili bir takım işlemler yapacağız. Yapacağımız işlem basit olarak; ziyaretçinin sayfadaki bir içeriği yazdırması anında yazdırılacak içeriği belirleme ve yeniden stil verme üzerine olacaktır.

Web sayfanızda sunmuş olduğunuz içerikler makale, haber veya buna benzer önemli bilgiler olabilir. Ziyaretçileriniz sayfanızdaki içeriği yazdırmak istediğinde normal davranış olarak ya tarayıcının menüsünden yazdırma işlemi için gerekli butonu seçecek ya da doğrudan CTRL + P ile yazdırma arayüzünü açacaktır. Eğer web sayfanızda yazdırma işlemi için gerekli stil işlemleri yapılmamışsa, ziyaretçi ekranda ne görüyorsa sayfaya o yazdırılır. Yani menüler, logolar, reklamlar vs. ne varsa yazdırılır. Ancak bu tarz bir yazdırma işlemini sunmamız, profesyonel bir yaklaşım olmayacaktır. Bunun yerine metinlerdeki gereksiz stiller kaldırılmalı, yazı tipi standart bir hale getirilmeli, gereksiz reklamlar ve görseller kaldırılmalı, ve logo da uygun bir yere uygun bir ölçüde konumlandırılmalıdır.

Ekran için Boostrap ve Print için Özel CSS Tanımlamak

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" >
  <script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
  <script src="http://code.jquery.com/jquery-2.0.0.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <div class="container-fluid">
    <p class="text-primary">Merhaba Dünya</p>
    <div class="alert alert-danger">
      <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
      <strong>Uyarı!</strong>
      <p>Bootstrap 4 ile ilk uygulamamızı yaptık. Çarpı ikonuna tıklayarak bu kutuyu kapatabilirsiniz.</p>
    </div>
  </div>
</body>
</html>

link ile vermiş olduğumuz bootstrap.css dosyası bütün media modları için geçerlidir. Modlardan kastımız print ve screen olmaktadır. Çünkü aksi bir tanımlama yapmadık.
Varsayılan hali ile CTRL + P tuş kombinasyonunu kullanarak yazdırma işlemi yapacak olursak normal bir şekilde yazdırılır.

Eklemiş olduğumuz Bootstrap stillerinin sadece monitörde geçerli olması için şöyle bir düzenleme yapılması gereklidir.

<link rel="stylesheet" href=https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css media=”screen” >

Bu şekilde iken yazdırmaya kalkarsak, tüm stiller sıfırlanacak ve ham bir şekilde yazdırılacak:

Görüldüğü gibi ham bir şekilde yazılar gösterildi. Yazdırma işlemi için de yeni bir CSS stil dosyası tanımlamalı ve bunu sayfaya dahil etmeliyiz. CSS dosyamızın adı print.css olsun. Dikkat edin, media değerini print olarak tanımladık.

<link href="print.css" rel="stylesheet" media="print" />

Print (Yazdır) Butonu ve Yazdırılacak İçerik Hazırlamak

Şimdi yazdırma işlemi için sayfamıza bir Yazdır butonu yapalım. Yani CTRL + P ile değil de bu butona tıklandığında yazdırılsın. Butonu da yine Bootstrap ile oluşturalım. Yazdırmak için de sayfa içeriğini biraz daha artıralım.

İlk olarak Bootstrap’ta şöyle basit bir tasarım yapalım.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" media="screen" >
  <script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
  <link href="print.css" rel="stylesheet" media="print" />
  <link href="stil.css" rel="stylesheet" media="screen" />
  <script src="http://code.jquery.com/jquery-2.0.0.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      
      <div id="sayfa" class="col-sm-8 col-sm-offset-2">
      <ol class="breadcrumb">
            <li><a href="#">Karakterler</a></li>
            <li class="active">Corazon</li>
      </ol>
        <div id="yazdir">
          <button type="button" class="btn btn-secondary">Yazdır</button>
        </div>
        <br>
        <div class="row">
          <div id="foto" class="col-sm-3">
                <img src="corasan.jpg" class="img-fluid" alt="Cora San">
          </div>
          <div id="yazi" class="col-sm-6">
            <p>Rosinante was a tall man (standing just below his brother at 293 cm) as a 10-year old Trafalgar Law was not able to reach his waist; in adulthood, he was a comparable height to his older brother Doflamingo (who stands 305 cm). He was seen wearing a dark red hood from which two heart-like shapes hang from, a pair of beige jeans (white in the anime), a dark purple feather mantle much like his brother and a white shirt with pink hearts printed all over it. He also wears mismatched shoes. His golden blond hair was longer than his brother's as it came close to his eyes. Rosinante had tattoos (or makeup) over his eyes and mouth.[14] He was also seen wearing sunglasses, though he did away with these upon his six-months journey with Law.
            During his childhood, Rosinante had his hair in an unkempt fashion, covering his eyes. Prior to leaving Mariejois, he wore the typical garb of the Celestial Dragons, and had his hair in the same style as his older compatriots. After leaving, his hairstyle changed and he had wardrobe consisted of simple yet fine clothes with a frilled cravat that became very ragged due to the uneasy lifestyle he had to endure. Suffering from torture at the hands of the locals who hated the Celestial Dragons, as well as other battles, left scars and stitches all over his body. Upon joining the Marines, Rosinante wore the standard cadet uniform, minus the makeup/tattoos he has when working as a spy.[10]</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Dikkat edin, kodların arasında iki adet CSS dosyası eklenmiş. Birisi print.css, diğeri de stil.css’dir. print.css şu an boş, birazdan dolduracağız. stil.css de sayfaya arkaplan resmi ekleyip, Yazdır butonunu sağa yaslıyor ve sayfa arkaplan rengini de açık gri (Lavander) rengi ile boyuyor.

stil.css

#sayfa{
    background-color: lavender;
    height: auto;
}

#yazdir{
    text-align: right;
}

body{
    background-image: url(arkaplan.png);
    background-size: 100%;
    background-repeat: no-repeat;
}

[/code]

Yazdır Butonunu Aktif Etmek

Şimdi de Yazdır butonunu JavaScript ile aktif edelim. button etiketi içinde onclick olay yöneticisi ile window BOM elemanının print() metodunu çağırmamız yeterli olacaktır.

<button type="button" class="btn btn-secondary" onclick="window.print()">Yazdır</button>

Bu şekilde Yazdır butonuna bastığımızda, print.css boş olduğu için tüm stiller sıfırlanacak ve yazdırılacak.

Bu haliyle güzel gibi ama üst kısımda fazlalıklar var. Birincisi Breadcrumb dediğimiz Karakterler / Corasan yazısı, diğeri de Yazdır butonun kendisi. Bunları yazdıracağımız sayfadan kaldıralım. Hemen print.css dosyamızı açalım ve şu şekilde stil girelim.

Yazdırma İşleminde Sayfa Stilini Daha Sade Hale Getirmek ve Gereksiz Öğeleri Sayfadan Kaldırmak

• Yazdırma işleminde vereceğimiz stiller şöyledir:
• Sayfa arkaplanı beyaz yapılacak.
• Yazdırma butonu gizlenecek.
• Breadcrumb gizlenecek.
• Tüm p etiketli yazıların font büyüklüğü 2 rem olacak.

#sayfa{
    background-color: white;
}

#yazdir{
    display: none;
}

.breadcrumb{
    display: none;
}

p {
    font-size: 30px;
    color: black;
}

Tekrar Yazdır butonuna tıklayıp sonucu görelim.

Yaptığımız en önemli işlem, görüntülenmeyecek olan elementlerin görünürlüğünü display: none ile kaldırmak oldu. Diğerlerini de normal CSS stilleri ile yeniden düzenledik.

İçeriği paylaş:
  • facebook
  • twitter