印刷ページの最下部にリンク先を表示するjavascript

印刷ページでリンクを表示させるためには、css(media="print")で
a:after {
content: " (" attr(href) ") ";
}
とすればいいですが、リンク先のURIが長い場合ジャマになります。
そこで、A List Apartというサイトでは、各リンクに番号を振り、最下部にまとめて表示するjavascriptを紹介しています。
本家サンプルページはこちらですが、当ページでもこれを利用していますので、よろしければ印刷してみてください。

sponsors

使用方法

使い方は簡単です。
javascriptを二つ書き込んで、前述のcssを適用します。
footnotelinks.jslink.js
ただしこれだけだと、URIがリンク直後に続いてしまうので、以下のcssをprint属性で加えます。
html.noted a:link:after,
html.noted a:visited:after {
content: '';
}
さらに、htmlでは対象の部分を<div id="content">〜</div>で囲んで、screen属性で
.printOnly {
display: none;
}
を書き込んで完了です。
なお、既に出来上がっているサイトで、idのcontentじゃなくてmainとかに適用したいという場合は、footnotelinks.jsの最後の行を変更すればできます。

sponsors

Javascriptサンプルページ一覧
skuare.net