I love software!

« Webページ制作に革命をもたらす！CSS3　AH Formatter V5デモサイトを公開 | メイン | CSS3パワーでWebと印刷の統合！AH Formatter V5.0 3月23日より出荷開始します。 »

2009年03月02日

CSS3で得する話（１） URLを脚注に出す

CSSでWebを綺麗に印刷する方法として　「Improving Link Display for Print」（印刷するときURLを脚注にリストとして出す）という記事があります。

これはJavascriptを使って、URLを集めるようです。

ふーーん。便利そうだね。

ですが、CSS3の脚注機能を使うと、もっと簡単にできます。
ここに簡単なサンプルを作りました。

ｈｔｔｐ://www.antenna.co.jp/AHF/Samples/Footnote.html

このサンプルは、ブラウザで見ても勿論だめです。AH Formatterで見てください。インストールしたくない方は、AH Formatter のデモサイトで次のように見ることができます。

１．AH Formatter のデモサイト　http://cssfo.antenna.co.jp/　を表示します。
２．Webへの活用例のページを表示します。
　http://cssfo.antenna.co.jp/demo2.php
３．一般のサイトをみるの
　URL入力に「http://www.antenna.co.jp/AHF/Samples/Footnote.html」を入力します。
４．URLを送信ボタンを押します。
５．PDF化が完了したら確認してみてください。
　　URLのリストが脚注になっているのが確認できると思います。

この部分のCSS3はこんな感じです。

・URLをaの後ろに出して、脚注に出す。
a:after {float: footnote;
content: attr(href) ;
font-size: 0.9em;
}

・脚注のレイアウト
@page {
...
@footnote {
counter-increment: footnote;
float: page bottom;
border-top: thin solid black;
border-length: 30%;
margin-top: 0.5em;
padding-top: 0.2em;
}

・脚注番号の追加
::footnote-call {
content: counter(footnote, decimal);
}

::footnote-marker {
content: counter(footnote, decimal);
-ah-margin-end: 0.5em;
text-indent: 0;
}

※ご注意
　AH Formatterに添付のデフォルトスタイルシートでは、脚注番号にsuper-decimalを指定しています。
　しかし、サーバのLinuxにはIPAフォントのみを乗せているため、super-decimalの脚注番号はMissing glyphになってしまいます。

そこで、デモサーバ上のCSSは、decimalに変更しています。ちょっとみすぼらしいですが、super-decimalのグリフのあるフォントを使えば綺麗にでます。

※super-decimalでは次のようになります。
ファイルをダウンロード

投稿者 koba : 2009年03月02日 17:21

トラックバック

このエントリーのトラックバックURL:
http://blog.antenna.co.jp/PDFTool/mt-tbng2.cgi/1246

コメント

コメントしてください