Hiding internal course links when printing

[weckerlec]

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?

[Chris_Hofer]

Hello  @weckerlec ​...

Since people here in the Community don't have access to your instance of Canvas, it may be a bit hard to trouble-shoot this.  In taking a look at the screen shot you provided, it looks like the URLs are overlapping the hyperlinks on the page.  I've honestly never seen this before. but I just did a print-preview of our Dashboard screen in Canvas (because we have some announcements there with links to websites), and the URLs do display nicely after the linked text.  Nothing overlaps.  So, this lead me to believe that maybe, in the screenshot you've included, that maybe there is (or isn't) an invisible table where all of that linked text "lives"?  Do you know if there is a table under those three images that is organizing all the links?  If there isn't, maybe that is why you are seeing the overlapping of text?  In my own testing of this in my sandbox course, I created a 3x3 invisible table on a Canvas page (no set table width or height).  Then, I put some text in each cell: Link 1, Link 2, Link 3, etc.  I then linked each of the nine pieces of text to the same website, and then I saved the page.  When I print-previewed the page, the URLs I added to each piece of text were display right below the "Link 1", "Link 2", etc. text...nothing was overlapping.  My recommendation would probably be to check the code behind your page to see if something is causing the overlapping.  It could be something as simple as adding a table or modifying the properties of an existing table.  That's just a guess though.  Hope this is somewhat helpful.

EDIT: And I just realized I really didn't address your question all that well.  There was nothing in Google Chrome I could find to tell it not to print those URLs alongside my links.  I wonder if there might be a Google (or even Firefox) extension that might help here, though.

[weckerlec]

Thank you  @Chris_Hofer ​. You are correct that there is a table in the screenshot provided that caused the overlap. In general, it sounds like the linked text will print the URL unless there is a specific browser application that changes that setting.

[James · Accepted solution]

 @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;

[James]

I tested it in Chrome and it works. I also modified it to work on any Canvas page, not just those within wiki pages and I settled on a better naming scheme "hide_url" instead of "no_print_links". (note the post above reflects the original code, not the modified one)

The modified code is available on my Canvancement site with links that you can just click on and it will install for you once Greasemonkey or Tampermonkey is installed. You'll still need to change the @include line if you use a custom Canvas URL.

[weckerlec]

Thanks  @James ​ for the thorough script and explanation! After we get through these first couple days of startup, we will test it out and let you know how it works.

[britain_woodman]

James,

I notice "font-size: 90%" is specified in the excerpt you show. Could I just add another line or two to the user script and override that, too?

An instructor on my campus, who inspired me to search for the solution to printing URLs, which led me here, also notes that text prints out very small. If we just change the text size in the browser, the larger text doesn't flow to the page size, the text blocks just get larger and flow off the page. Hopefully ubiquity of e-ink and easier to read tablet screens will reduce printing to where this is irrelevant, but until then - am I on the right track here? Thanks in advance!

[James]

 @britain_woodman ​,

The font-size:90%; CSS is part of what Canvas adds to the URL, but you can override it as well using the techniques I mentioned. However, it's not that particular section of CSS code that you want to change as it's specific to the URL from the href attribute.

The code that controls the size of the main document when you print is part of the body. The snippet below is wrapped inside a @media print section. This is what Canvas uses:

html,body {
     font-family:Arial, Helvetica, sans-serif;
     color:black !important;
     font-size:10pt;
     background:transparent none !important
}

As you can see, it defaults to 10pt. Tiny for those of us with vision problems. Saves paper for those who don't.

If you're going the Greasemonkey route so it only affects people who desire it, you should be able to just add another GM_addStyle() command under the existing one.

GM_addStyle('@media print { body { font-size: 100% !important; }}');

You can use any font-size specification you like.

You could even merge it in with the existing one if you like. Just be careful if you try to split your CSS up across multiple lines. GreaseMonkey (GM) didn't like it until it was all on one line. I think the solution was to add a backslash \ at the end of each line within the quotes, but it was short enough I just used one line.

I'm not sure that the !important is necessary and it worked for me modifying the CSS directly within the browser without it. I didn't actually put this into a GM script to verify this.

By the way, I would definitely hide the URLs if you're going to print at 100%, otherwise there is very little space left for actual text.

[kstack]

Thanks! This is so helpful! It's interesting that when I called Canvas for support on this issue, the customer support person said that there is no CSS in canvas related to printing. This is obviously untrue.