SelectpPDF HtmlToPdf - Generate PDF Certificate as landscape is not centered

Question

I am trying to generate a PDF certificate from Html and I am not able to center or to make it 100% width... Everything looks ok in browser but when I generate PDF is right aligned with a margin on the left side... My html looks like this:

   <STYLE type="text/css">
     html, body {
         margin: 0;
         padding: 0;
     }

     h1 {
         text-align: center;
         font-size: xx-large;
         margin-bottom: 20px;
     }

     p {
         font-size: 18px;
         line-height: 1.5;
         text-align: center;
         margin-bottom: 10px;
     }

     .background {
         background-image: url(https://localhost:44448/static/diploma-background.jpg);
         width: 1024px;
         height: 768px;
         margin: 0;
         padding: 0;
         background-position: center center;
         background-size: 100%;
         background-repeat: no-repeat;
         position: relative;
     }

     .diploma {
         position: absolute;
         top: 50%;
         left: 50%;
         -ms-transform: translate(-50%, -50%);
         transform: translate(-50%, -50%);
         margin: 0 auto;
         padding: 30px;
     }
</STYLE>
<html>
<body>
    <div class="background">
        <div class="diploma">
            <h1>Lorem ipsum dolor sit amet</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>
</body>
</html>

My C# code looks lie this:

   SelectPdf.HtmlToPdf converter = new SelectPdf.HtmlToPdf();
                // set converter options
                converter.Options.PdfPageSize = PdfPageSize.A4;
                converter.Options.PdfPageOrientation = PdfPageOrientation.Landscape;

                converter.Options.MarginLeft = 0;
                converter.Options.MarginRight = 0;
                converter.Options.MarginTop = 0;
                converter.Options.MarginBottom = 0;
                converter.Options.DisplayHeader = false;
                converter.Options.DisplayFooter = false;

                converter.Options.WebPageWidth = 1024;
                converter.Options.WebPageHeight = 768;
                converter.Options.WebPageFixedSize = true;
                converter.Options.AutoFitHeight = HtmlToPdfPageFitMode.AutoFit;
                converter.Options.AutoFitWidth = HtmlToPdfPageFitMode.AutoFit;
                // set css @media print
                converter.Options.CssMediaType = HtmlToPdfCssMediaType.Print;
                converter.Options.ViewerPreferences.CenterWindow = true;
                SelectPdf.PdfDocument doc = converter.ConvertHtmlString(diplomahtml);

The generated PDF looks like this:

The HTML looks like this in chrome:

My background image is 3508x2480

Any ideas/suggestions?

score 0 · Answer 1 · answered Aug 31 '23 at 14:04

RTFM https://selectpdf.com/docs/ResizingContentDuringConversion.htm

Content Resizing

Because a web page has generally a different width compared with a standard pdf page, the content will not fit perfectly when the web page content is rendered into pdf. As an example, most web sites are optimized for browsers with page widths of at least 1024px or 1280px. A standard A4 page has 595 x 842 points. 1 point is 1/72 inch. 1 pixel is 1/96 inch. This means that an A4 page width is 793px. Because the web page width (1024px or more) is larger than this pdf page width, when the content is rendered into pdf, it will either get trucated or it needs to be resized (shrinked) to fit the pdf page width.

so in c# I changed to:

   converter.Options.MarginBottom = 0;
   converter.Options.DisplayHeader = false;
   converter.Options.DisplayFooter = false;

   converter.Options.WebPageWidth = 842;
   converter.Options.WebPageHeight = 595;
   converter.Options.WebPageFixedSize = true;
   converter.Options.AutoFitHeight = HtmlToPdfPageFitMode.AutoFit;
   converter.Options.AutoFitWidth = HtmlToPdfPageFitMode.AutoFit;

and in html:

 .background {
     background-image: url(imgurl);
     width: 842px;
     height: 595px;
     margin: 0;
     padding: 0;
     background-position: center center;
     background-size: 100%;
     background-repeat: no-repeat;
     position: relative;
 }

SelectpPDF HtmlToPdf - Generate PDF Certificate as landscape is not centered

1 Answers1