Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Omit link URLs from the output of browser's print() functionality

Some modern browsers convert links like

<a href="http://somesite.com">Site</a>

into

Site (http://somesite.com)

as part of the generated PDF.

Is there a way to omit the links from the generated PDF version by pure CSS?

Which CSS classes in the print.css must be defined in order to suppress the link URLs?

like image 836
Andreas Jung Avatar asked Aug 15 '12 10:08

Andreas Jung


People also ask

How do I remove URL from print?

Google Chrome: Go to the Menu icon in the top right corner of the browser and Click on Print button. Uncheck the “Headers and footers” option underneath the “Margins” option. Apple Safari: Go to the print option from the menu and the Print dialog appears. Uncheck the “Print headers and footers” option.

What is browser print function?

The print() method prints the contents of the current window. The print() method opens the Print Dialog Box, which lets the user to select preferred printing options.

How do I get the URL to show when printing a PDF?

Print out the PDF and put the page/s back in the printer. Viewing the PDF in the Adobe Reader in Chrome, go Hamburger menu > Print ... and it should show as a blank page. Select to add the URL header. Print as many copies as there were pages in the original PDF, and the URL will be overlaid.


1 Answers

Here is an example for the way to manipulate the styling of <a href=...> tags inside a CSS file to make it appear as you dislike it:

@media print {
  ##....
  a[href]:after {
     content:" ("attr(href)")";
     color:#868686;
     background-color:inherit;
     font-style:italic;
     size:90%;
  }
  ##....
}

To override this setting (and make it appear more to your liking), you may need to use a (user) print.css which contains the following (as part of its total content):

a[href]:after {
   content:"" !important;
}

Your question is not very clear about the scope of your requirement:

  • Should it be valid just for a website you control and for the users visiting it?
  • Should it apply to any web page you visit?

If you want the first, you put the reference to your print.css into the HTML header section the usual way and host the file on your web server

If you want the second, you should google for "user stylesheets" to find links like the following:

  • Accessibility Features of CSS: User override of styles
  • Tap the power of Mozilla's user style sheets
  • How to write a user stylesheet for Safari
like image 74
Kurt Pfeifle Avatar answered Oct 15 '22 02:10

Kurt Pfeifle