<fieldset> and <legend> tags with pdfHtml in itext7

Question

Using HTML file, I generated PDF file using iText pdfHTML. I want to present caption for the content, just like in HTML <fieldset> and <legend> are doing.

I used below HTML code. In HTML page it displayed as expected. But when generated the PDF file using pdfHTML, "Summary" is appear inside the box. Not in the border of box to display caption of the content.

<!DOCTYPE html>
<html>
<body>

 <fieldset>
  <legend>Summary</legend>
  <p>Some paragraph</p>  
 </fieldset>


</body>
</html>

How can I solve this?

Alexey Subach Alexey Subach · Accepted Answer · 2020-04-07T18:45:01

pdfHTML does not support fieldset tag yet and indeed your sample is converted into something like following:

You can plugin in your custom implementation into pdfHTML though to tweak the visual appearance to some degree (depending on your needs). Here is a basic example on how to tweak the visual appearance with a big number of assumptions:

private static class LegendTagWorker extends DivTagWorker {
    public LegendTagWorker(IElementNode element, ProcessorContext context) {
        super(element, context);
    }

    @Override
    public IPropertyContainer getElementResult() {
        IPropertyContainer result = super.getElementResult();
        // Shift the position of the legend a bit above
        result.setProperty(Property.POSITION, LayoutPosition.RELATIVE);
        result.setProperty(Property.TOP, -14);

        // Set the background of the text to white so that it does not overlap with the border of outer element
        if (result instanceof Div && ((Div) result).getChildren().get(0) instanceof Paragraph) {
            Paragraph p = (Paragraph) ((Div) result).getChildren().get(0);
            ((Text)p.getChildren().get(0)).setBackgroundColor(ColorConstants.WHITE);
        }
        return result;
    }
}

private static class CustomTagWorkerFactory extends DefaultTagWorkerFactory {
    @Override
    public ITagWorker getCustomTagWorker(IElementNode tag, ProcessorContext context) {
        if (tag.name().equals("legend")) {
            return new LegendTagWorker(tag, context);
        }
        return super.getCustomTagWorker(tag, context);
    }
}

Then you just need to pass your tag worker factory to converter properties:

ConverterProperties properties = new ConverterProperties();
properties.setTagWorkerFactory(new CustomTagWorkerFactory());
HtmlConverter.convertToPdf(inFile, outFile, properties);

Now we get the following result:

Please note that this is a very basic example and you will need to tweak it to your needs. Before this feature is implemented in pdfHTML you will have to use a workaround - either in code as I suggested, or you can do some tweaks with CSS, similar to the tweaks I am making in Java code

<fieldset> and <legend> tags with pdfHtml in itext7

1 Answers