I’m looking to hide sensitive information from a webpage when printing to PDF.
I use a media="print" stylesheet with quite a lot of display:none to do so because I can’t edit the webpage directly.
When using a PDF printer such as "Microsoft Print to PDF", is any of the data hidden by the stylesheet embedded somewhere inside the resulting PDF file?
Short answer: Elements that are set to display: none are neither visible or in any form inside a the resulting PDF.
Longer answer:
Usually I would say it is hidden completely - like form elements that are set to display: none are completely ignored. But since I wasn't sure I did the following to test it:
I created a testpage with the only HTML <div>Hello <span style="display: none">world</span></div> inside and printed it to PDF.
I opened the resulting PDF in Illustrator and inspected the layers. No such sign of the word world.
I tested this on a Mac (Chrome) and on Windows (Edge and IE11)
Related
I'm creating a simple Vue app that I will use to generate my CV in a PDF format. I have added google font Montserrat into this project, and when I print this page to file (CTRL + P in Firefox), the text cannot be selected, its like everything is an image.
I started debugging and it seems to happen when I use an imported font. Here is a codepen that can demonstrate what happens https://codepen.io/phlame-/pen/NWNYbyb
How to replicate: Open the pen in Firefox, and print the page to file (CTRL + P). Save and open the file. The second paragraph is selectable as its Arial, but the first one is not (which is Montserrat).
It seems like if you try to do this in Chrome nothing is selectable, but I would like it to work at least in 1 browser - since only I will use it to generate PDFs.
I've tried to import the font through a link tag instead of #import in CSS, tried this answer, tried different Google fonts (Roboto and Lato), this:
#media print {
* {
user-select: text !important;
}
}
All producing same results - unselectable text. Which becomes selectable with a default font...
To be clear: the font renders in the PDF, everything looks as it should, but the text is NOT selectable when clicking and dragging over the text
Has anyone had experience with this? Any help is appreciated
I ran into the same thing once using Overlock on a resume page. The problem is that the browser print utility doesn't recognize fonts that your page downloads on the fly using link tags, as it is customary to do with google fonts. It can only recognize system fonts, meaning the ones you have installed on the machine you're running the Print from.
If some text on your web page is using a font that isn't on your installed system font list, then you won't be able to save it as text in your PDF file. When the print utility encounters such, it treats it as an image.
Different OSes have different ways of examining what fonts you have on your machine ("Font Manager" in Windows, "Font Book" in Mac OS). You can google how to see what fonts you have installed on your machine, and you should find that Montserrat isn't one of them.
To fix this, all you need to do is install the Montserrat google font on your machine. Here is one set of directions on how to do that. Once you've done that, you'll need to restart your browser.
We are trying to use an #media print.css style sheet to enable a web page to print a set of Avery labels (6 up on a sheet - 4" x 3"). Generally a print media style sheet seemed like a perfect solution to having a page that looks like a list on screen, but when you print the list you get imprinting for Avery badges!
The challenge is in the details though. In addition to the fact that each browser seems to have unique interpretations of print styling and some of the rules just don't work. I've seen and studied most of the basic info readily available on using the print.css. It's fairly easy to override font colors with black and set details to print or not but what this assignment needs is precise element placement and styling within the #page details.
The site already features Bootstrap and other linked .css pages though I've unlinked them to test the pages and am trying to isolate out anything that could also be interfering with print styling.
It appears that float isn't working in IE. Our list page content to print lays out in floated divs in Chrome but font styling and other divs aren't rendering as intended. Firefox isn't displaying any of the required print content but indicating page numbering appears to agree with Chrome that there are 56 pages of labels, (sorry if you can't see them?) My hope is that this document can serve as a repository for the tips tricks and limitations of media #print.
I'm experiencing the same problem. I need to print onto specific Avery labels at exact dimensions and although I can get it to work with Chrome (despite it ignoring some Print CSS styles) - it doesn't work in Firefox. Safari seems to be in it's own world also.
I think the only way I'm going to solve this is to generate PDF's that the user has to download and print (or print the PDF's from their browser).
Sucks, but haven't found any solutions for a "CSS Print Browser Reset".
On my ASP.NET site, <input type="file"> renders like this in IE11 (an oldschool look):
However, I want it to look like this (more modern look):
When trying <input type="file"> in the same IE11 elsewhere, in e.g. JSFiddle, it looks like I want it to (the more modern look).
I tried tracing CSS styles using F12 dev tools, but I cannot see any styles resulting in the oldschool look.
I'm using <!DOCTYPE html>.
My question: What might be causing the oldschool look?
IE11 Renders that way.
If you want to change it you should use CSS, but it usually isn't easy.
What I usually do is to create my own fake component, with an input type text and a button styled the way I want.
I also have a input type file hidden, when I push my styled button I send via javascript a click to hidden input type file. When the file is selected I update my styled input type text with selected file name.
So, I know that this isn't something that is normally a good idea for a website, but I have a special purpose/intent for such a use:
I have a multilingual dictionary that I'm working with online, where I need one of the languages to be in a specific font, from a file that I specify locally. However, I want this language to be rendered ONLY in this font, as if it is rendered using any other font, it will render incorrectly. That's all fine and dandy, and I can load the file in CSS and whatnot.
But I want to make it so that if it can't load that file, either for one reason or another, or something goes wrong, it can't go to another font. Basically, render this text using this font, and if you can't do that, don't just try and render it with Arial or whatever is the default -- show me blocks, show me a stark something.
I've spent a bit looking around, but am not sure what in CSS I would be using for this. Suggestions/help? Thanks :)
As an update to this question, since April 2013 there exists the Adobe Blank Font, which can be used for that purpose.
You may build a cross-browser css with FontQuirrel WebfontGenerator and the Adobe Blank font files.
If you just need the font in OpenType format you can use this single css file with the already embedded font
You can't do this. Text is text and text has to have a font that it is to be rendered in. If you really want, there's probably some weird JavaScript function that can detect the actual font being used for the text and if it doesn't match the one you want, then you can hide it or something. But in the end, your only option is to have the text displayed in some obscure font, or completely hide the text. If the text is visible, it has to be rendered using some font.
You could also theoretically create your own font where all the characters are just blank, but that seems highly illogical and such a waste of resources to make people download a font just so it can display meaningless emptiness.
There is no "don't render fonts" option. It's a font, it needs to be rendered, or else it's hidden visually in the DOM.
You could use Javascript to find out the font being applied to a certain block, and if it's not the font you want, just hide it. Or display a message.
Another solution is somehow specify the content to be empty. For example, I'm trying to override the +/- character that a Webix tree displays using Font Awesome:
#lhn-tree-container .webix_tree_open:before {
content: '';
}
This only works with the :before and :after pseudo-elements though.
I'd like to print http://www.delicious.com/tags/engmark to PDF (Using Firefox on Linux, if possible), but the result looks rubbish. How can I print without taking into account the print-specific CSS (which I think is loaded by the enormous JS on the site)? I tried to disable print CSS in the Web Developer extension, but that didn't affect the print output.
I looked through the HTML file and found that there's a link tag with the attribute of media="screen"
If you just remove that attribute, the CSS would then load.