How to cross out a table cell using pdfHtml and iText 7

I'm trying to display a crossed-out table cell.
I've tried dozens of different approaches.
My best solution was using four linear-gradients, one for each corner (because there is no support for transparent backgrounds).

The issue here is, that I have to specify the height of the table cell, thus when the text in any other cell in the same row has more lines than expected, the cross is no longer from corner to corner.

I've also tried using a background-image with background-size set to 100% 100%.
However, pdfHtml does not support background-size.
I've tried multiple workarounds that work in Chrome, but none work in pdfHtml.

Does anybody know a (possible) solution?

Thanks,
--Zuzu_Typ--

Have you tried doing it with svg? Should work without the background-size property as well.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.diag {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M1 0 L0 1 L99 100 L100 99' fill='black' /><path d='M0 99 L99 0 L100 1 L1 100' fill='black' /></svg>");
  background-repeat: no-repeat;
  background-position: center center;
  border: 1px solid red;
}

<!-- language: lang-html -->

<div style="background-color: blue;">
  <div class="diag" style="width: 300px; height: 100px;"></div>
</div>

<!-- end snippet -->

pdfHTML eventually utilizes iText's layout mechanism which is quite flexible. You can achieve your end goal by customizing the rendering logic for a cell and plug that implementation into pdfHTML.

First off, custom cell renderer:

private static class CustomCellRenderer extends CellRenderer {
    public CustomCellRenderer(Cell modelElement) {
        super(modelElement);
    }

    @Override
    public IRenderer getNextRenderer() {
        return new CustomCellRenderer((Cell) modelElement);
    }

    @Override
    public void drawBackground(DrawContext drawContext) {
        super.drawBackground(drawContext);
        PdfCanvas canvas = drawContext.getCanvas();
        Rectangle area = getOccupiedAreaBBox();
        canvas.moveTo(area.getLeft(), area.getTop()).lineTo(area.getRight(), area.getBottom());
        canvas.moveTo(area.getLeft(), area.getBottom()).lineTo(area.getRight(), area.getTop());
        canvas.stroke();
    }
}

Essentially, we have reused the default implementation and extended it with drawing a line from bottom left corner to the right top one and from the top left one to the bottom right corner.

Now, we need to use the custom renderer for layout objects that are created in pdfHTML. They are created in tag workers, so customizing a tag worker for a table cell:

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

    @Override
    public IPropertyContainer getElementResult() {
        IPropertyContainer cell = super.getElementResult();
        if (cell instanceof Cell) {
            ((Cell) cell).setNextRenderer(new CustomCellRenderer((Cell) cell));
        }
        return cell;
    }
}

The missing piece is that we need to configure pdfHTML to use our custom tag worker for <td> cells and the way to do so it to create a custom tag worker factory:

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

The only missing piece is to pass the custom tag worker factory to pdfHTML itself and this is done via converter properties:

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

With the code above for the following HTML:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<html>
<head>
	<style>
		td, th {
			border: solid 1px;
		}
    table {
      border-collapse: collapse;
    }
	</style>
</head>
<body>
<table>
  <tbody>
    <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
   </tr>
   <tr>
    <td>Another cell 1</td>
    <td>Another cell 2</td>
   </tr>
  </tbody>
  <tfoot>
    <td>
      Footer 1
    </td>
    <td>
      Footer 2
    </td>
  </tfoot>
</table>
</body>
</html>

<!-- end snippet -->

I got the following visual result after converting to PDF: