Hiding internal course links when printing

Jump to solution
weckerlec
Community Novice

When a page is printed (either to PDF or paper), any internal course links display the source of that link. I can see this as being great for accessibility purposes and knowing the source of those links, but can cause formatting issues when trying to print or save a PDF version of a page. Creating a screen capture of a page is an option for shorter content, but more difficult for longer content.

Is there a way to turn off printing of those links?

1 Solution
James
Community Champion

 @weckerlec ​,  @Chris_Hofer ​

It's not going to be a browser specific application, but you can remove it using CSS using the @media print {} directive.

In fact, that's how Canvas puts them in there. In the common.css file, there is a block that has (currently around line 11281 for the important stuff),

@media print {

     a:link:after,a:visited:after {

          content:" (" attr(href) ") ";

          font-size:90%

     }

}

If you remove that, then it won't show up. Easier than removing it is to override it.

The problem is that on some pages you want the links to show up and not on others and you probably don't have that level of granularity unless you start putting certain classes inside the pages when you create them.

For example, you could add a class to the table like <table class="no_print_links">

Then, in your CSS, you could add something like this:

@media print {

  .no_print_links a:link:after, .no_print_links a:visited:after {

    content: none;

  }

}

Then they don't show up in a print. If you decide that you don't want links to print at all, then you could just remove the .no_print_links part in front.

This would normally require that someone have access to the custom CSS for a site to add this.

If it is just one user that wants to do this, then you could inject the CSS through Greasemonkey or Tampermonkey and then it would affect just that one user on that one browser and perhaps on that one page. That might be nice for people making printed handouts to give to people, but they don't want to affect the overall user experience.

This script will strip printing links for all wiki pages in all courses (as long as your site doesn't have a custom URL).

// ==UserScript==

// @name        No Print Links

// @namespace   https://github.com/jamesjonesmath/canvancement

// @description Hide the links when printing

// @include     https://*.instructure.com/courses/*/pages/*

// @version     1

// @grant       GM_addStyle

// ==/UserScript==

GM_addStyle('@media print { a:link:after, a:visited:after { content: none; }}');

This one will limit it to just links contained inside a "no_print_links" class

// ==UserScript==

// @name        No Print Links

// @namespace   https://github.com/jamesjonesmath/canvancement

// @description Hide the links when printing

// @include     https://*.instructure.com/courses/*/pages/*

// @version     1

// @grant       GM_addStyle

// ==/UserScript==

GM_addStyle('@media print { .no_print_links a:link:after, .no_print_links a:visited:after { content: none; }}');

In either case, you can customize the @include line to match specific sites or pages.

Notes:

  • I tested this with Firefox, but it should be similar if not the same for Chrome.
  • There's a question of whether or not you need the !important to override existing definitions. I tested it inside the browser and from Greasemonkey (but not by changing the global CSS) without it and it worked for me, but if you have problems, you might change it to be content: none!important;

View solution in original post