How can I have text in an HTML document so that it will be “there” in the PDF document (generated via wkhtmltopdf), but invisible when viewed or printed?
Constraints:
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. pdfgrep), which means wkhtmltopdf 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 wkhtmltopdf; 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.
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.
I.
The PDF syntax supports different "text rendering modes". These lets a PDF creating software (or anybody who authors a PDF with a simple text editor) render any text, regardless the chosen font, as
outlined only,
filled only,
outlined and filled,
neither filled nor outlined (invisible),
plus some more, which deal with clipping.
Here is the illustration from the PDF specification:
However, this is not supported by HTML or CSS (at least AFAIK). So your only option to get it done in a similar way is to...
...either set the background color in HTML to the same as the text color,
...or set the text color to transparent.
Then hope that htmltopdf will translate that into a PDF which represents the same...
II.
The following HTML code (essentially using style="color:transparent") works for me. You'll have to decide whether it fullfills your requirements completely:
<html>
<head></head>
<body>
<div style="color:transparent; background:red; border: 1px dashed currentColor;">
The color of this text is transparent/invisible. <br />
The background of this text is red.
<div style="background:blue; height:9px;"></div>
Above this text is a blue box with a height of 9px. <br />
This block is surrounded by a transparent border.
</div>
</body>
</html>
Then, when opening the PDF I cannot read any text lines, but I can select/mark/highlight them.
When running
pdftotext -layout my.html -
I see the following text:
The color of this text is transparent/invisible.
The background of this text is red.
Above this text is a blue box with a height of 9px.
This block is surrounded by a transparent border.
Make text colored with background color of your PDF (ex. white).
Related
Is there a way to adjust the line height in SSRS? I have a requirement on a legal document to have a bigger line height.
From what I have read, the Textbox.LineHeight property only affects html. I have converted the text inside the textbox to html, set the LineHeight property, but nothing changed.
I also tried adding custom CSS to the report (using old school line-height: {x} pt; inside a style tag), but to no avail - that isn't supported in the SSRS environment.
Here is an example what I need - How can I achieve this?
Before:
After
Does SSRS even support this?
Edit
Converting the text to an expression and adding a double VbCrLf will not be feasible as I need to only add a partial line height
You could add an expression on the Padding.Bottom property.
=IIF(IncreaseHeight, "20pt", "2pt")
If the text is already multiple lines, format the textbox to accept HTML. Replace the line breaks with a white character in a larger font followed by a <br/> tag.
<span style=""font-size=12pt; color:white;"">|</span><br/>
If your text is all on the same line, do the above for each space in your text. Using a bar "|" should be enough to represent the space between words. If not, use a thicker character.
Any idea what would cause a fax's printed text to look like this.
I think it could be a dpi issue, the odd thing is all the text that is printed out with white dots in it is directly inside an html tag. I have some text elsewhere on the page not directly wrapped in a span/h1,h2,h3,h4/p tag and it is printing out correctly. Also a gif image on the page is printing out with a similar result. The color is set at #333 on all elements. Font size is in pixels as well. Would setting it to points help? Looking for ideas to fix this with print css.
The difference was the black that was being used. The text in the image is #333 and I switched the color of the text to #000000 for "true black" and that fixed it!
I know how to change the background color of a textarea, but what about changing the background color of the text that users type into a text area?
For example, in HTML you can change the background color of a span of text using span tags, ie:
<span style="background-color: blue">Words with blue background</span>
...But what about the text that users type into a text field?
I need to do this for a form that I'm creating, so that users can clearly see spaces and returns they're entering as well as the characters they enter.
Can it be done using CSS?
No.
But there is the other way around.
Did you ever used editor in github.com? It's cool.
It uses javascript and <div> to control the style of each line of code.
And translate.google.com uses the same way.
With CSS can I make a browser ignore the character but respect normal white space?
So this:
Some text More text
Is displayed like this:
Some text More text
Not:
Some text More text
UPDATE There is actually more white space in my code. I need the default behavior where extra white space doesn't get rendered on the page so I dont think I can use white-space: pre or pre-wrap
So this shouldn't be excessively indent before the initial word.
Some text More text
I don't think there's a pure CSS way of doing that, since is an actual character that is different from the whitespace created by the spacebar in a text editor (what gets ignored by HTML renderers). However, depending on how those are appearing, you may be able to use a script that searches for and removes that character wherever it sees it.
In the following example (from Mozilla's site):
<div style="color:darkred"> The color of this text is the same as the one of the line: <div style="background:currentcolor; height:1px"></div> Some more text. </div>
Please take a look at this corresponding jsfiddle link.
If I remove "background:currentColor" from the style, the line it draws disappears. How does a style like this result in the addition of a line?
Thanks.
Because the div has a height of one pixel (1px), which means it is presented as a line - namely because there is no content of x-pixels height within it, it sizes itself appropriately (if no height was specified then it would collapse to 0). Therefore, because the div has a background colour (which doesn't match the colour on which it is rendered (which, if the colours did match, would give the illusion of invisibility)) you see one pixel height line of that colour.
Think of crushing a box down, or folding paper: you couldn't make it entirely disappear (out of existence, or current form, at least not easily) and, upon bringing yourself horizontal to the plane on which it sat, would still see it (or its colour/shade of, etc.)
Of course, concentrating on only that one not a solution wouldn't be too helpful, although others have come to your aid: use a span element to 'group' text within text, these are inline by default and by rights should only be output if there is text to go in one - this forgets for a moment that you explicitly specify a height value at all, which is what makes me wonder about the whole scenario.
because Div is a block element.
<div style="color:darkred"> The color of this text is the same as the one of the line: <span style="background:currentcolor; height:1px"></span> Some more text. </div>