C# ile Duyarlı PDF'ler İçin HTML'de CSS Nasıl Kullanılır

Doğru CSS Medya Türünü Seçmek Neden Önemlidir?

IronPDF, C# içinde HTML'den PDF oluşturur ve varsayılan olarak ekran stil sayfasını PDF'ye dönüştürebilir. Ekran stillerine kıyasla yazdırma stil sayfalarının genellikle daha az belgelenmiş, kullanılmış veya geliştirilmiş olduğu için bu kullanışlıdır. Bununla birlikte, bu medya türleri arasındaki ayrımı anlamak, profesyonel kalitede PDF'ler üretmek için çok önemlidir.

IronPDF'de CSS (Ekran & Yazdırma) ile çalışırken, ekran ve yazdırma medya türleri arasındaki seçim, nihai PDF çıktınızı önemli ölçüde etkiler. Ekran medya türleri, etkileşimli unsurları ve zengin görsel tasarımları korurken, baskı medya türleri içeriği okunabilirlik ve kağıt bazlı tüketim için optimize eder.

CSS3, bazı CSS stillerinin yalnızca basılı belgelerde gösterilmesine izin verirken, diğerlerinin ise web tarayıcıları için tasarlandığını belirtir. IronPDF her ikisiyle de çalışabilir ve HTML içeriğinizin PDF'e nasıl dönüştürüleceği üzerinde size tam kontrol sağlar. Bu esneklik, dijital raporlar, yazdırılabilir faturalar veya hibrit belgeler oluştururken, PDF'lerinizin hedeflenen kullanım durumunun belirli gereksinimlerini karşıladığından emin olur.

Print ve Screen CSS Medya Türünü Ne Zaman Kullanmalıyım?

HTML'nize bir baskı stil sayfası oluşturun ve uygulayın: Mükemmel bir baskı stil sayfasını nasıl oluşturup uygulayacağınızı öğrenin..

Her CSS medya türü farklı kullanım senaryolarını hedefler. Her birini, gereksiniminize en uygun olanı görmek için deneyin. Bu kılavuzları göz önünde bulundurun:

Print CSS Medya Türünü şu durumlarda kullanın:

• Fiziksel baskı için belgeler oluşturma
• Faturalar, raporlar veya resmi belgeler oluşturma
• Sayfalar boyunca tekrarlayan tablo başlıklarına ihtiyacınız var
• Mürekkep tasarrufu önceliktir
• Özel Kağıt Boyutu gereksinimleriyle çalışmak

Şu durumlarda Ekran CSS Medya Türünü kullanın: Etkileşimli PDF'ler oluşturma için zengin görsel öğeler

• PDF'de web tasarım estetiğini korumak
• Arka plan görüntüleri ve renkleri dahil etme
• PDF öncelikle ekranlarda görüntülenecektir
• Duyarlı HTML'den PDF'ye dönüşümlerle çalışma

Ekran ve Yazdırma Modları Arasındaki Görsel Farklar Nelerdir?

Yukarıdaki örnekler, aynı HTML içeriğinin CSS medya tipi seçimine göre nasıl farklı render edildiğini göstermektedir. Basılı versiyonun dekoratif resimleri ve simgeleri kaldırarak daha temiz, daha yazdırılabilir bir belge oluşturduğunu, ekran versiyonunun ise dijital görüntüleme için tüm görsel öğeleri koruduğunu fark edin.

Neden Tablo Başlıkları Ekran Modunda Yalnızca Bir Kez Görünür?

Birden fazla sayfaya yayılan HTML tablolarıyla çalışırken, CssMediaType özelliğini PdfCssMediaType.Print olarak ayarlayın. Bu, tablonun başlığının her uzatılmış sayfanın üstünde tekrarlanmasını sağlar. Buna karşılık, PdfCssMediaType.Screen, Chrome'a başlıkları yalnızca bir kez PRINT etmesini söyler. Bu davranış, uzun veri tablolarıyla PDF Raporları oluştururken özellikle önemlidir.

PRINT medya türü, tarayıcıların sayfalandırma için kullandığı belirli CSS kurallarını etkinleştirir; buna, başlık tekrarını sağlayan thead {display: table-header-group;} özelliği de dahildir. Bu özellik, okuyucular çok sayfalı belgelerde gezinirken bağlamı korumak için gereklidir.

Tekrarlayan Başlıklar İçin Hangi HTML Yapısı Gereklidir?

Chrome'un tablo başlığını algılamasını sağlamak için, başlığı <thead> etiketiyle çevreleyin. Let's render the 'tableHeader.html example of repeating table headers' HTML file to PDF to see the effect.

İşte önerilen HTML yapısı:

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

C#'te Tablo Başlığı Tekrarını Nasıl Uygularım?

:path=/static-assets/pdf/content-code-examples/how-to/html-to-pdf-responsive-css-table-header.cs

using IronPdf;
using IronPdf.Rendering;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Change the paper size to small
renderer.RenderingOptions.SetCustomPaperSizeinPixelsOrPoints(600, 400);

// Choose screen or print CSS media
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print;

// Render HTML to PDF
PdfDocument pdf = renderer.RenderHtmlFileAsPdf("tableHeader.html");

pdf.SaveAs("tableHeader.pdf");

Imports IronPdf
Imports IronPdf.Rendering

Private renderer As New ChromePdfRenderer()

' Change the paper size to small
renderer.RenderingOptions.SetCustomPaperSizeinPixelsOrPoints(600, 400)

' Choose screen or print CSS media
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print

' Render HTML to PDF
Dim pdf As PdfDocument = renderer.RenderHtmlFileAsPdf("tableHeader.html")

pdf.SaveAs("tableHeader.pdf")

Tablolar etrafındaki boşluğu kontrol etmek için Özel Kenar Boşlukları'nı keşfedin veya tabloların gerektiğinde yeni sayfalarda başlamasını sağlamak için Sayfa Sonları uygulayın.

Nihai PDF Çıktısı Nasıl Görünür?