日別アーカイブ: 2009年3月2日

CSS3で得する話(1) URLを脚注に出す

CSSでWebを綺麗に印刷する方法として 「Improving Link Display for Print」(印刷するときURLを脚注にリストとして出す)という記事があります。
これはJavascriptを使って、URLを集めるようです。
ふーーん。便利そうだね。
ですが、CSS3の脚注機能を使うと、もっと簡単にできます。
ここに簡単なサンプルを作りました。
http://www.antenna.co.jp/AHF/Samples/Footnote.html
このサンプルは、ブラウザで見ても勿論だめです。AH Formatterで見てください。インストールしたくない方は、AH Formatter のデモサイトで次のように見ることができます。
1.AH Formatter のデモサイト http://cssfo.antenna.co.jp/ を表示します。
2.Webへの活用例のページを表示します。
 http://cssfo.antenna.co.jp/demo2.php
3.一般のサイトをみるの
 URL入力に「https://www.antenna.co.jp/AHF/Samples/Footnote.html」を入力します。
4.URLを送信ボタンを押します。
5.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では次のようになります。
ファイルをダウンロード