Idea for Making Printable Web Pages

Hey /prog/rammers, I know that web developers sometimes struggle with ideas for how to properly render text via CSS, etc. when printing a webpage to paper. You can't click hyperlinks on paper, so some information is lost in the printing.

The solution has always seemed obvious to me, but until today I was too lazy to do anything about it. So my idea (and it's probably actually been done a billion times before by other people) is to just turn every anchor tag into an endnote.

Just put this in your page and then execute makeEndnotes() whenever you want to create the endnotes and get rid of the hyperlinks for printing. You can include a different CSS file that defines printing (nice margins, serif font, no background, etc.).

Anyway, here's the function. I tested it out on a google results page and I thought it looked passable. There are things I could do to make it better, such as have the call number appear after a comma or period instead of before it (to make it "correct"), but I'm going to bed because tomorrow I start up interviews.

function makeEndnotes() {
                var anchors = document.getElementsByTagName('a');
                if (anchors.length>0) {
                    endnoteDiv=document.createElement('div');
                    endnoteDiv.id="endnotes";
                    document.body.appendChild(endnoteDiv);
                   
                    A=document.createElement('hr');
                    B=document.createElement('h1');
                    B.innerHTML = 'Endnotes';
                    document.getElementById('endnotes').appendChild(A);
                    document.getElementById('endnotes').appendChild(B);
                }
                //for (i=0;i<anchors.length;++i) anchors[i]=normalizeURL(anchors[i],TODO);
                for (j=0;j<anchors.length;++j) {
                    C = document.createElement('span');
                    C.innerHTML = '^'+(j+1)+''+anchors[j].href;
                    A = document.createElement('span');
                    A.innerHTML = anchors[j].innerHTML+'^'+(j+1)+'';
                    anchors[j].parentNode.insertBefore(A,anchors[j]);
                    E = document.getElementById('endnotes');
                    B = document.createElement('br');
                    E.appendChild(B);
                    E.appendChild(C);
                }
                while (document.getElementsByTagName('a').length>0) document.getElementsByTagName('a')[0].parentNode.removeChild(document.getElementsByTagName('a')[0]);
            }

                    B = document.createElement('br');
                    E.appendChild(B);
                    E.appendChild(C);
                }
                while (document.getElementsByTagName('a').length>0) document.getElementsByTagName('a')[0].parentNode.removeChild(document.getElementsByTagName('a')[0]);
            }

>>2
Oh, whoops, I thought "post truncated" meant it threw away the end of my function. My bad. Clearly I haven't lurked enough in the text boards.

You do realise you can specify a separate CSS file for print and just have that list of URLs in a div that's hidden in the screen CSS, right?

>>4
Yes, except this way it's automated. I don't have to code the URLs. And if you say I could just do it on the server side, and then it's just a matter of whose clock cycles I like to use up.

Also, it's semantically ugly to have a hidden DIV when one of the points of the MVC paradigm is to separate the different views (in this case, screen and print views).

Also, blind people and screen readers, dude. Hidden DIVs are for shit coders who have shit jobs and don't have to think about people with disabilities.

Create strict code, accept poor code. The mantra of a good programmer. You should create semantically strict HTML, and not depend on a screen reader designer to think "hey, invisible elements shouldn't be read to the user!" That's a recipe for code that isn't robust.

>>4
Also, this way, you have a script that you can run on any webpage you visit if you want to print it and preserve information about its links. Like I did with my Google test. If I were to print that out, I'd have a hardcopy that also preserves what each search result points to.

Does Javascript even get executed on pages before they're sent to the printer?
It'd be less intrusive for the user to write a simple preprocessor and configure Apache to run it on all .html files. That way you can't accidentally forget to include the script either.

You should create semantically strict HTML, and not depend on a screen reader designer to think "hey, invisible elements shouldn't be read to the user!" That's a recipe for code that isn't robust.
@media all {
 #endnotes {
  display: none;
 }
}

@media print{
 #endnotes {
  display: block;
 }
}

@media aural {
 #endnotes {
  speak: none;
 }
}

>>1
>>5
Nice try, but it looks like you should be using the EXPERT OPEN STANDARD XSL-FO¹ instead.

                                             
¹ http://en.wikipedia.org/wiki/XSL_Formatting_Objects

>>9
You mean the ENTERPRISE OPEN STANDARD XSL-FO.

@media print {
  a:link:after { content: '[' attr(href) ']'; font-size: 0.8em; }
}
usually suffices.

13 Name: Anonymous 2011-02-04 18:37

14 Name: Anonymous 2014-01-21 21:06

>>13
>le pedophile sage

---

Newer Posts

---

Don't change these.

Name:		Email:
Entire Thread Thread List