Search code examples
itext7pdfhtml

iText7 - How do you prevent the font face from changing when using HtmlConverter?


In C# I'm trying to pass in a simple HTML string and have the string parsed and added to a PDF document. In the below examples, I'm adding the string to an iText7 Paragraph.

I read this article and managed to write the below code.

https://itextpdf.com/en/resources/books/itext-7-converting-html-pdf-pdfhtml/chapter-1-hello-html-pdf

The first paragraph (p1), Example 1, renders the correct font face, Helvetica. Of course, I'm using the SetAction method, which is completely a different approach than the article. This is for demo purposes only.

The second paragraph (p2), Example 2, converts the HTML just fine but the font for the word "link" is rendered differently than Helvetica. It seems that when HTML is rendered, it ignores the font face of the document.

Sample Screenshot

How can I get the font face of "link" to be Helvetica and use the approach in Example 2? I think I'm missing something minor here. Do I need to define a CSS class since we're in HTML land?

Thank you for any suggestions.

class Program
{
    static void Main(string[] args)
    {
        var pdfWriter = new PdfWriter(@"c:\temp\test.pdf");
        var pdfDocument = new PdfDocument(pdfWriter);
        var document = new Document(pdfDocument);

        // Example 1
        var p1 = new Paragraph("p1: this is a test url")
            .SetFont(PdfFontFactory.CreateFont(StandardFonts.HELVETICA))
            .SetFontSize(12f)
            .SetFontColor(new DeviceCmyk(1f, .31f, 0, 0))
            .SetFixedPosition(35, 600, UnitValue.CreatePercentValue(100f))
            .SetAction(PdfAction.CreateURI("www.google.com"));

        document.Add(p1);

        // Example 2
        var html = @"p2: this is a <a href=""www.google.com"">test</a> url";
        var elements = HtmlConverter.ConvertToElements(html);

        var p2 = new Paragraph()
            .SetFont(PdfFontFactory.CreateFont(StandardFonts.HELVETICA))
            .SetFontSize(12f)
            .SetFontColor(new DeviceCmyk(1f, .31f, 0, 0))
            .SetFixedPosition(35, 550, UnitValue.CreatePercentValue(100f));

        foreach (var element in elements)
        {
            p2.Add((IBlockElement)element);
        }

        document.Add(p2);

        document.Close();
        pdfDocument.Close();
        pdfWriter.Close();
    }
}

Solution

  • The default font-family in pdfHTML is Times, and you are overriding it only for the top-level elements while (almost) all the elements at all nesting levels have their font family explicitly specified after ConvertToElements invocation. To change the font family the easiest solution is indeed apply some CSS to your initial HTML. You can set font-family in style declaration directly:

    var html = @"<p style=""font-family: Helvetica"">p2: this is a <a href=""www.google.com"">test</a> url</p>";
    

    Then you don't even have to set font to your paragraph and the paragraph creation code simplifies to

    var p2 = new Paragraph()
        .SetFontSize(12f)
        .SetFontColor(new DeviceCmyk(1f, .31f, 0, 0))
        .SetFixedPosition(35, 550, UnitValue.CreatePercentValue(100f));
    
    foreach (var element in elements)
    {
        p2.Add((IBlockElement)element);
    }