bignose bignose - 1 month ago 14
CSS Question

Make text present in PDF document, but invisible

How can I have text in an HTML document so that it will be “there” in the PDF document (generated via

), but invisible when viewed or printed?


  • The text must appear at the right place, with the right size, because the purpose is to find the text with an automated tool and discover its co-ordinates and size on the page.

  • The solution must be to do with the text only, because I'm trying to keep this simply about CSS styles. Any “hide it under another element” doesn't address the problem, because there might not be any other element at those co-ordinates.

  • The solution can't be dependent on what's already on the page; I can't go inspecting the background elements on the page because I can't determine those dynamically. The text should be invisible in its own right.

  • The text must be findable with an automated tool (e.g.
    ), which means
    must place the text in the document file.

    So a “display: none” style or “opacity: 0” doesn't work, because that makes the text not exist at all in the PDF document.

So I want to have an HTML document, place a text element “FOO” within that document with an inline CSS style, and process it through
; then,
pdfgrep FOO
should find the text, the text location and size should be correct, but the text should not show up in HTML, not appear when the PDF is viewed, and not appear when it's printed.

Answer Source

With a style of color: transparent; the text will be fully transparent on the page, but show up normally for any tool looking in the document for that text.