Great idea, great article. I just implemented the idea in my gaming fansite and printed pages look better than ever. I was using Eric’s idea previously but there were often too many links near each other, and the result was quit scary. But now it all looks great, thank you again :)
I went a very little step further and replaced:
document.createTextNode(‘Links’);
with document.createTextNode(‘Link index – ‘+self.location); and added a page-break-before: always; to the styles of the “Links” container.
The final result: the links now come in the last printed page (the user might not want to print it out) and the title says what page the links are from so that the page doesn’t get lost.
Interesting but there is one little flaw. Currently the script appends a class of noted to the html element (gasp !). Class is not a valid attribute for html in any of the official DTD (see the “html 401 rec”:http://www.w3.org/TR/html401/struct/global.html#edef-HTML for a starter). In practice, this is not so important, all current modern browsers actually support it (that is, recognize the html.noted selector). But still, it would be better to append said class to the body element.
Copy & paste the code below to embed this comment.
Justin Roby
If I apply this to a page that doesn’t have any links (and as I’m including the footnoteLinks.js file in my header, I can’t not include it), I get an empty section with the heading “Links” at the bottom. How can I prevent the “Links” section from appearing? Now, the page I’m creating does have links, but they’re all marked with “ignore” because they’re footnote superscripts that point to named anchors within the page.
Copy & paste the code below to embed this comment.
Brian LePore
I would like to say that this is a great idea. I have expanded on this script greatly. Essentially, my changes included the dropping of the jsUtilities package (it altered Object, which from my understanding is VERY unsafe). Part of this was achieved by simply making the modifications that Brian Hardy suggested in his post and part from my own version of addClass. I expanded upon the ability to ignore certain sections. Now you can label an element to be ignored and its descendants will also be ignored.
Also, I strip off “mailto:“‘s, and ignore any code that has an href of simply “#” (usually used as a handler for JavaScript) and links to JavaScript code (href=”[removed]…”).
Another change is that the h2 and the ol elements are only attached if there are any links found on the page.
Finally, the code also ignore links where the text of a link is the link itself.
You can see an example of my code by doing a print preview against: http://www.cps.brockport.edu/~cpsclub/ (note that the e-mail address isn’t printed). The code is in compact form similar to the code in the article. A more readable version can be seen at http://www.cps.brockport.edu/~cpsclub/template/footnoteLinksExpanded.js
Copy & paste the code below to embed this comment.
Ansel Halliburton
I was wondering if anyone else had run into this problem. In IE6, if you have a linked image (e.g. …), I get two superscripts and footnotes – one for the <a> tag and one for the <img> tag. The first footnote has the URL of the <a> tag, and the second has the URL in the src attribute of the <img> tag.
Why does this happen? Any ideas on how to fix it?
You can try this out for yourself by just adding a linked image to the final HTML from the article:
http://www.alistapart.com/d/improvingprint/files/final.html
Copy & paste the code below to embed this comment.
Brian LePore
Yes, this is a problem. Mozilla will also double the superscripts, but it won’t add a supercript for the image. I’ll look into it and see if I can fix this.
Copy & paste the code below to embed this comment.
Brian LePore
Ansel: I modified my version heavily from the authors code. Mine no longer has this problem. I solved it by walking the DOM with a recursive function, rather than just grabbing every single element.
If anyone knows anything about Memory leaks, can you please review the expanded version of the code. I’m not well versed in this (I have been reading all of the recent QuirksBlog entries on this subject) and not sure if I’ve worked around them. I think so….
Copy & paste the code below to embed this comment.
Ansel Halliburton
Brian, thanks for taking a look at it. However, the links in your previous comment (#37) don’t work (403 Forbidden). Is that page not accessible outside your university?
I was just checking through the comments again to see how the discussion has progressed and it looks like you all have been very busy kicking the tires and finding bugs. I love all of the energy around this script and am very happy this has made so many of you smile. In the coming weeks I will be looking over the enhancements you all have put together and will look to roll them into a revised version I have planned.
This is so great! I use it on my own website, if you want to check.
I only changed one thing: when there is no link at all, I find it disturbing to have a “links” title with no content, so I have just added a test for num > 1 before actually adding the content.
Copy & paste the code below to embed this comment.
Bertje van Zuylen
@Brian LePore: I’ve seen you’ve made a lot of alterations, but how do you implement them? Do you have some description?
What I was missing in the original script was not having the ability to skip elements (e.g. a menu). Even if it is set to display:none it will not print but the links are added to the list anyway. This could be solved bij adding ignore to an element (which is not possible right now) or by ignoring all elements that are not dispayed all together.
The class ignore did not seem to work bij the way but that is probably my bad implementation.
Another thing is that IE treats images as a link too.
But the technique is great and offers a great result for the end user.
Copy & paste the code below to embed this comment.
Kevin Field
Hi,
The author’s technique is pretty slick. However, it wasn’t quite was I was searching for—hopefully someone here knows the answer. Is there a way to have a larger document that has lots of anchor links print just the page number they’ll appear on? So if you’re printing something that looks like this:
49 Reader Comments
Back to the ArticleHercules Papatheodorou
Great idea, great article. I just implemented the idea in my gaming fansite and printed pages look better than ever. I was using Eric’s idea previously but there were often too many links near each other, and the result was quit scary. But now it all looks great, thank you again :)
I went a very little step further and replaced:
document.createTextNode(‘Links’);
with document.createTextNode(‘Link index – ‘+self.location); and added a page-break-before: always; to the styles of the “Links” container.
The final result: the links now come in the last printed page (the user might not want to print it out) and the title says what page the links are from so that the page doesn’t get lost.
Martin Petrov
Is there a way to ignore all links inside blocks such as wrapping paragraphs and divs? I don’t have any javascript skills…
Thank for your artice! I’m already using it.
Mikhail Bozgounov
Should be easily done with CSS ID and/or classes :-)
Philippe Wittenbergh
Interesting but there is one little flaw. Currently the script appends a class of
notedto thehtmlelement (gasp !). Class is not a valid attribute forhtmlin any of the official DTD (see the “html 401 rec”:http://www.w3.org/TR/html401/struct/global.html#edef-HTML for a starter). In practice, this is not so important, all current modern browsers actually support it (that is, recognize thehtml.notedselector). But still, it would be better to append said class to thebodyelement.Justin Roby
If I apply this to a page that doesn’t have any links (and as I’m including the footnoteLinks.js file in my header, I can’t not include it), I get an empty section with the heading “Links” at the bottom. How can I prevent the “Links” section from appearing? Now, the page I’m creating does have links, but they’re all marked with “ignore” because they’re footnote superscripts that point to named anchors within the page.
Scott Mackenzie
This is just awesome. I’m going to have to implement this myself. It’s so simple, but so damn effective.
Thanks heaps.
Brian LePore
I would like to say that this is a great idea. I have expanded on this script greatly. Essentially, my changes included the dropping of the jsUtilities package (it altered Object, which from my understanding is VERY unsafe). Part of this was achieved by simply making the modifications that Brian Hardy suggested in his post and part from my own version of addClass. I expanded upon the ability to ignore certain sections. Now you can label an element to be ignored and its descendants will also be ignored.
Also, I strip off “mailto:“‘s, and ignore any code that has an href of simply “#” (usually used as a handler for JavaScript) and links to JavaScript code (href=”[removed]…”).
Another change is that the h2 and the ol elements are only attached if there are any links found on the page.
Finally, the code also ignore links where the text of a link is the link itself.
You can see an example of my code by doing a print preview against: http://www.cps.brockport.edu/~cpsclub/ (note that the e-mail address isn’t printed). The code is in compact form similar to the code in the article. A more readable version can be seen at http://www.cps.brockport.edu/~cpsclub/template/footnoteLinksExpanded.js
Ansel Halliburton
I was wondering if anyone else had run into this problem. In IE6, if you have a linked image (e.g. …), I get two superscripts and footnotes – one for the <a> tag and one for the <img> tag. The first footnote has the URL of the <a> tag, and the second has the URL in the src attribute of the <img> tag.
Why does this happen? Any ideas on how to fix it?
You can try this out for yourself by just adding a linked image to the final HTML from the article:
http://www.alistapart.com/d/improvingprint/files/final.html
Brian LePore
Yes, this is a problem. Mozilla will also double the superscripts, but it won’t add a supercript for the image. I’ll look into it and see if I can fix this.
Brian LePore
Ansel: I modified my version heavily from the authors code. Mine no longer has this problem. I solved it by walking the DOM with a recursive function, rather than just grabbing every single element.
If anyone knows anything about Memory leaks, can you please review the expanded version of the code. I’m not well versed in this (I have been reading all of the recent QuirksBlog entries on this subject) and not sure if I’ve worked around them. I think so….
Ansel Halliburton
Brian, thanks for taking a look at it. However, the links in your previous comment (#37) don’t work (403 Forbidden). Is that page not accessible outside your university?
Ansel Halliburton
I discovered the correct link:
http://www.cps.brockport.edu/~cpsclub/template/footnoteLinksExpanded.js
(The links posted in comment #37 are missing the tilde before “cpsclub”.)
Brian LePore
Sorry about that. Glad it worked for you (I assume it works or you’d have complained when posting).
Aaron Gustafson
I was just checking through the comments again to see how the discussion has progressed and it looks like you all have been very busy kicking the tires and finding bugs. I love all of the energy around this script and am very happy this has made so many of you smile. In the coming weeks I will be looking over the enhancements you all have put together and will look to roll them into a revised version I have planned.
Thanks again for all of your feedback!
Nicolas Hoizey
This is so great! I use it on my own website, if you want to check.
I only changed one thing: when there is no link at all, I find it disturbing to have a “links” title with no content, so I have just added a test for num > 1 before actually adding the content.
HTH
Jason Liu
Another possibility would be to check the myArr array to see if it is empty before appending the <h2> and <ol>:
if (myArr.length > 0) {// append the heading and ordered list to the target
target.appendChild(h2);
target.appendChild(ol);
}
Just another way of preventing “Links” from showing up in case there are no links on the page or you have all of them in the ignore class.
Tatham Oddie
I’ve just implemented this on my own site (www.fueladvance.com) and it rocks! Try printing our homepage…
Bertje van Zuylen
@Brian LePore: I’ve seen you’ve made a lot of alterations, but how do you implement them? Do you have some description?
What I was missing in the original script was not having the ability to skip elements (e.g. a menu). Even if it is set to display:none it will not print but the links are added to the list anyway. This could be solved bij adding ignore to an element (which is not possible right now) or by ignoring all elements that are not dispayed all together.
The class ignore did not seem to work bij the way but that is probably my bad implementation.
Another thing is that IE treats images as a link too.
But the technique is great and offers a great result for the end user.
Kevin Field
Hi,
The author’s technique is pretty slick. However, it wasn’t quite was I was searching for—hopefully someone here knows the answer. Is there a way to have a larger document that has lots of anchor links print just the page number they’ll appear on? So if you’re printing something that looks like this:
Additional Considerations
…it would appear in a print version as:
Additional Considerations (p. 17)
This ability would really help for a document I’m currently working on.
Thanks,
Kev