Skip to content

The library ignores position:absolute styling #203

@zn

Description

@zn

I have HTML code with many elements with style position: absolute. The HTML code looks good in the browser but when I try to convert it to pdf using HtmlRenderer.PdfSharp, I get all the elements in the top left corner. How can I fix this?

Here is my code:

using PdfSharp;
using PdfSharp.Pdf;
using TheArtOfDev.HtmlRenderer.PdfSharp;

var html = "...";
File.WriteAllBytes("draft.html", Encoding.UTF8.GetBytes(html));
using PdfDocument pdf = PdfGenerator.GeneratePdf(html, PageSize.A4, margin:0);
using var ms = new MemoryStream();
pdf.Save(ms);
File.WriteAllBytes("draft.pdf", ms.ToArray());
return ms.ToArray();

The html:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
    <p style="position: absolute; top: 50px; left: 200px;margin: 0;">Hello world!</p>
    <p style="position: absolute; top: 100px; left: 200px;margin: 0;">Hello world!1</p>
    <p style="position: absolute; top: 150px; left: 200px;margin: 0;">Hello world!2</p>
    <p style="position: absolute; top: 200px; left: 200px;margin: 0;">Hello world!3</p>
</body>
</html>

Below is how the generated pdf looks like:
MPt2s

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions