The Firefox built in PDF Viewer displays the document with a border of 9px around. Is there a way to remove this border?
I have a PDF document which has an A4 page dimension displayed in the Firefox build in PDFViewer. The text on it is exactly positioned and should stay that way when printed as well. Originally when printing, the page was shrinked and had a bigger border. Now I found out that it was partially related to the print_shrink_to_fit flag, that you can define specific for the printer in about:config. The print dialog did not allow me to change the flag, so I changed it in about:config to flase. But now I still have the problem that the document has a border which is not part of the document and shifts the text to the bottom and right. Using "inspect element" in the Firefox browser I found the border defined in the class pdfViewer in the viewer.css file which is part of the internal PDF viewer I believe. I have not found any option which allows me to remove that border. Can you tell me how to do this? I'm working on Windows 10 with the most current Firefox 55.0.3 32bit browser.
Chosen solution
You can remove the border with code in userContent.css.
Add code to the userContent.css file.
.pdfViewer .page { border: 0px !important; }
You can use the button on the "Help -> Troubleshooting Information" (about:support) page to go to the current Firefox profile folder or use the about:profiles page.
- Help -> Troubleshooting Information -> Profile Directory:
Windows: Show Folder; Linux: Open Directory; Mac: Show in Finder - http://kb.mozillazine.org/Profile_folder_-_Firefox
- create the chrome folder (lowercase) in the <xxxxxxxx>.default profile folder if this folder doesn't exist
- use a plain text editor like Notepad to create a (new) userContent.css file in the chrome folder (file name is case sensitive)
- paste the code in the userContent.css file in the editor window
- make sure that you select "All files" and not "Text files" when you save the file via "Save file as" in the text editor as userContent.css.
otherwise Windows may add a hidden .txt file extension and you end up with a not working userContent.css.txt file
All Replies (5)
I think that there is a script running on the page that automatically sets the width in such a way that you always get a border. You can see this in the Inspector in the width rules for div.page If you change the width of the Firefox window then the width gets adjusted.
- https://developer.mozilla.org/en/Tools/Page_Inspector
- div#viewerContainer div#viewer.pdfViewer div.page
Hi cor-el, Thanks for your reply. Unfortenately it does not help. I used the Inspector to actually see that in viewer.css the 9px border is set for ".pdfViewer .page". This is the container for a page. So I'm looking for a way to remove that border or overwrite that setting. With that setting, pages are not printed correctly because it does not really reflect the document. At least I assume that it's that setting which moves the text to the right and bottom slightly on my printout. In viewer.css is another definition for ".pdfViewer.removePageBorders .page". Here I have no borders and I see in the viewer.js script I can see that there is a way to use it. But I can't see how I can get Firefox to take the path to use that setting. Do you have any idea about that?
Chosen Solution
You can remove the border with code in userContent.css.
Add code to the userContent.css file.
.pdfViewer .page { border: 0px !important; }
You can use the button on the "Help -> Troubleshooting Information" (about:support) page to go to the current Firefox profile folder or use the about:profiles page.
- Help -> Troubleshooting Information -> Profile Directory:
Windows: Show Folder; Linux: Open Directory; Mac: Show in Finder - http://kb.mozillazine.org/Profile_folder_-_Firefox
- create the chrome folder (lowercase) in the <xxxxxxxx>.default profile folder if this folder doesn't exist
- use a plain text editor like Notepad to create a (new) userContent.css file in the chrome folder (file name is case sensitive)
- paste the code in the userContent.css file in the editor window
- make sure that you select "All files" and not "Text files" when you save the file via "Save file as" in the text editor as userContent.css.
otherwise Windows may add a hidden .txt file extension and you end up with a not working userContent.css.txt file
Hi cor-el, I tried it and it seems to apply the changes. Unfortunately it does not solve my original problem: The text is moved to the right and bottom just slightly. I thought that it has to be that border setting. But as it turns out, it's not that. Do you have any idea what else it could be? In the pdf I have a left border of 15mm, but in the print out (without userContent.css) it always ended up to be about 20mm. Similar with the top border. Printing it from Adobe Acrobat generates a correct printout. Any idea?
cor-el, I'm confused. I played around with the setting in userContent.css. I actually changed the setting to .pdfViewer .page { border: 4px solid red !important; } The change appears on the screen, nice red border. But it does not show up on the print out. Why?