Gereksinimler ve Ön Hazırlık

Bu modülü geliştirmek için herhangi bir kütüphaneye veya ağır bir framework'e ihtiyacınız yoktur. Temel seviyede HTML ve CSS bilginiz olması yeterlidir. Çalışmalarınızı test etmek için güncel bir web tarayıcısı (Chrome, Firefox veya Edge) yeterlidir.

• Modern bir kod editörü (VS Code gibi).
• Temel HTML5 yapısı.
• CSS medya sorguları (media queries) hakkında temel bilgi.
• Yazdırma önizleme ekranını kullanma becerisi (Ctrl+P veya Cmd+P).

Adım 1: Yazdırılabilir İçerik Yapısını Oluşturma

İlk adımda, yazdırılacak içeriği kapsayıcı bir HTML etiketi içine almalıyız. Bu, CSS ile hedefleme yaparken işimizi kolaylaştıracaktır. Aşağıdaki örnekte, yazdırma modülümüz için temel bir yapı oluşturuyoruz.

    
Rapor Başlığı
    
Bu içerik, yazdırma modülü tarafından özel olarak biçimlendirilmiştir.
    Sayfayı Yazdır

Burada kullandığımız window.print() fonksiyonu, tarayıcının yerel yazdırma iletişim kutusunu tetikleyen basit bir JavaScript komutudur. Bu komut, CSS'teki @media print kurallarını otomatik olarak devreye sokar.

Adım 2: Yazdırma İçin CSS Medya Sorgularını Tanımlama

CSS'te @media print bloğu, sadece yazıcıya gönderilen veriler için geçerli olan stilleri tanımlamamızı sağlar. Bu bölümde, ekran için yazdığımız stillerden farklı olarak, gereksiz öğeleri gizleyeceğiz.

@media print {
    /* Yazdırılmayacak öğeleri gizle */
    .nav-menu, .sidebar, .footer, button {
        display: none !important;
    }

    /* Yazdırılacak alanı tam sayfa yap */
    #yazdirilacak-alan {
        width: 100%;
        margin: 0;
        padding: 0;
    }
}

Bu kod bloğu, kullanıcının kağıt israfı yapmasını engeller ve sadece odaklanılması gereken içeriği öne çıkarır. !important kullanımı, ekran stillerinin yazdırma stillerini ezmesini engellemek için stratejik olarak tercih edilmiştir.

Adım 3: Sayfa Düzeni ve Tipografi Optimizasyonu

Ekranda kullanılan fontlar veya renkler kağıt üzerinde okunaksız olabilir. Yazdırma modülünde yüksek kontrastlı renkler ve baskıya uygun font boyutları kullanmalısınız. Aşağıdaki örnek, kağıt üzerinde daha profesyonel bir tipografi sağlar.

@media print {
    body {
        font-family: 'Times New Roman', serif;
        font-size: 12pt;
        color: #000;
        line-height: 1.5;
    }

    h1 {
        font-size: 18pt;
        border-bottom: 2px solid #000;
    }
}

Kağıt ortamında pt (point) birimi, px (pixel) birimine göre daha doğru sonuçlar verir. Bu nedenle, yazdırma stillerinde punto değerlerini kullanmak tipografik tutarlılığı artırır.

Adım 4: Sayfa Kesmelerini (Page Breaks) Yönetme

Uzun içeriklerde, metnin sayfa sonuna denk gelip bölünmesi okunabilirliği bozar. CSS'teki break-inside özelliği, bir bloğun sayfa sonunda bölünmesini engellemek için kullanılır.

@media print {
    .rapor-bolumu {
        break-inside: avoid;
    }
    
    .yeni-sayfa {
        page-break-before: always;
    }
}

break-inside: avoid komutu, özellikle tablo veya görsel içeren bölümlerin ortadan ikiye bölünmesini engeller. page-break-before: always ise belirli bir başlığın her zaman yeni bir sayfada başlamasını sağlar.

Adım 5: Yazdırma Yöntemlerinin Karşılaştırılması

Aşağıdaki tablo, yazdırma modülü oluştururken kullanabileceğiniz farklı yaklaşımların avantaj ve dezavantajlarını özetlemektedir.

Adım 6: Güvenlik ve Hata Ayıklama İpuçları

Yazdırma modülü geliştirirken kullanıcı verilerinin güvenliğini asla göz ardı etmemelisiniz. Özellikle dinamik içerik çeken modüllerde XSS (Cross-Site Scripting) riskine karşı dikkatli olunmalıdır.

Kritik Uyarı: Yazdırılacak içerik kullanıcıdan geliyorsa, mutlaka sunucu tarafında temizlenmelidir. HTML içeriğini doğrudan yazdırma modülüne basmak, kötü niyetli kodların çalıştırılmasına neden olabilir. Üretim ortamında her zaman veri sanitasyonu uygulayın.

Debug yaparken, tarayıcının geliştirici araçlarını (F12) kullanarak "Rendering" sekmesinden "Emulate CSS media type" seçeneğini "print" olarak değiştirin. Bu, sayfayı yazdırmadan yazdırma stilini anlık görmenizi sağlar.

Sıkça Sorulan Sorular

Yazdırma modülünde arka plan renkleri neden görünmüyor?

Modern tarayıcılar varsayılan olarak mürekkep tasarrufu için arka plan grafiklerini yazdırmaz. Bunu aşmak için CSS'te -webkit-print-color-adjust: exact; ve print-color-adjust: exact; özelliklerini kullanabilirsiniz.

Yazıcıda özel bir font kullanabilir miyim?

Evet, ancak fontun kullanıcının sisteminde yüklü olması veya web fontu olarak doğru bir şekilde yüklenmiş olması gerekir. Yazdırma sırasında font yükleme gecikmelerini önlemek için fontları yerel olarak barındırmanız önerilir.

Yazdırma alanına tarih ve saat nasıl eklenir?

CSS ile sadece içerik biçimlendirebilirsiniz. Tarih ve saat eklemek için JavaScript kullanarak yazdırma öncesi DOM'a (Document Object Model) bir tarih etiketi ekleyip, yazdırma sonrası kaldırabilirsiniz.

Mobil cihazlarda yazdırma modülü çalışır mı?

Mobil tarayıcıların yazdırma desteği kısıtlıdır. Mobil kullanıcılar için genellikle içeriği PDF olarak indirmelerini sağlayan bir çözüm (örneğin backend tabanlı bir PDF oluşturucu) daha sağlıklı bir deneyim sunar.

Sayfa numaralarını nasıl eklerim?

CSS'teki @page kuralı ile sayfa kenar boşluklarını yönetebilir ve @bottom-right gibi seçicilerle sayfa numarası içeriği ekleyebilirsiniz, ancak bu destek tarayıcılar arasında farklılık gösterebilir.

İleri Seviye Yazdırma Senaryoları: Dinamik Veri ve Tablo Yönetimi

Web projelerinde genellikle statik metinlerden ziyade dinamik verilerle çalışırız. Özellikle uzun tabloların yazdırılması, sayfa yapısının bozulmasına veya verilerin kesilmesine neden olabilir. Bu durumu yönetmek için table-header-group ve table-footer-group özelliklerini kullanarak her sayfada tekrarlanan başlıklar oluşturabilirsiniz.

Aşağıdaki örnek, uzun bir veri listesinin yazdırılırken her sayfada başlık bilgisini korumasını sağlar:

@media print {
  thead {
    display: table-header-group;
  }
  tfoot {
    display: table-footer-group;
  }
  tr {
    page-break-inside: avoid;
  }
}

Bu yapı, özellikle finansal raporlar veya envanter listeleri gibi çok sayfalı dokümanlarda, kullanıcının veriyi takip etmesini kolaylaştırır. page-break-inside: avoid kuralı ise bir satırın iki sayfa arasına bölünmesini engelleyerek verinin bütünlüğünü korur.

Yazdırma Modülü İçin Performans ve Test Süreçleri

Yazdırma modülünüzü canlıya almadan önce farklı tarayıcı motorlarında (Chromium tabanlı tarayıcılar, Firefox ve Safari) test etmek kritiktir. Yazdırma önizleme ekranı, CSS'in @media print bloklarını nasıl yorumladığını görmek için en iyi hata ayıklama aracıdır.

Test Stratejileri

• Tarayıcılar Arası Uyumluluk: Safari, yazdırma sırasında -webkit-print-color-adjust özelliğine ihtiyaç duyabilir.
• Görsel Optimizasyonu: Yazdırma sırasında yüksek çözünürlüklü görsellerin yüklenmesi yazdırma işlemini yavaşlatabilir. Bu yüzden display: none ile gereksiz görselleri gizlemek performansı artırır.
• Ölçeklendirme Sorunları: Kullanıcının tarayıcı ayarlarındaki "Ölçek" (Scale) ayarı, CSS'te belirlediğiniz @page kurallarını ezebilir. Bu nedenle, kritik tasarımlarda width: 100% değerini kullanmak yerine sabit birimler (cm, mm) tercih edilmelidir.

Aşağıdaki kod bloğu, yazdırma sırasında görselleri optimize etmek ve gereksiz öğeleri temizlemek için kullanılan standart bir yaklaşımdır:

@media print {
  /* Yazdırma için gereksiz öğeleri gizle */
  .no-print, .sidebar, .navigation, .footer-links {
    display: none !important;
  }

  /* Yazdırma alanını tam genişliğe yay */
  .main-content {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Görsellerin yazıcıda düzgün çıkması için */
  img {
    max-width: 100% !important;
    height: auto !important;
  }
}

Bu optimizasyonlar, kullanıcının yazdırma deneyimini iyileştirirken, kağıt israfını önler ve profesyonel bir çıktı kalitesi sağlar. Özellikle geniş ekranlar için tasarlanmış navigasyon menülerinin yazdırılan kağıtta yer kaplamasını engellemek, kullanıcı memnuniyeti açısından en önemli adımdır.

Sonuç

Html & Css kullanarak özelleştirilebilir bir yazdırma modülü yapmak, profesyonel web projelerinin temel bir parçasıdır. Bu rehberde öğrendiğiniz @media print kullanımı, sayfa kesme kuralları ve tipografi optimizasyonları sayesinde kullanıcılarınıza temiz ve profesyonel çıktılar sunabilirsiniz. Bir sonraki adım olarak, karmaşık verileri yazdırmak için JavaScript tabanlı PDF oluşturma kütüphanelerini (örneğin jsPDF) inceleyerek, yazdırma modülünüzü daha ileri bir seviyeye taşıyabilirsiniz.