I love software!

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では次のようになります。
ファイルをダウンロード

弊社では、AH Formatter V5.0を本年2月出荷を目標に進めてまいりましたが、最終的に3月23日に出荷開始することに決定しました。

昨年12月に配布開始しましたベータ版は2月末までで利用期限が終了しています。製品出荷が予定より遅れていることもあり、先日よりβ2版の配布を開始しています。

β2版からは、Windows32ビット版に加えて、
・Windows64ビット版
・Linux32ビット版
・Linux64ビット版
・Mac OS/X（IntelCPU)
をとり揃えています。

β2版の利用期限は3月31日までとなっています。

こちらからダウンロードしていただくことができます。

AH Formatter V5.0β2版ダウンロード

予定より遅れてしまい、関係者の皆さま、ユーザの皆さまには大変お待たせして申し訳ありません。

いよいよCSS3を実用的に利用できる時代がやってきます。
CSS3を使いますと、これまでのWebと印刷の制作工程が抜本的な見直しになるものと思います。

このことに気がついておられる向きはまだ少ないようですが、β2版でCSS3のパワーを、ぜひ、体験してみてください。

HTMLの役割についての誤解が多いと思います。

HTMLは、HyperText Markup Languageという略称の通り、Web上に散在するドキュメント公開のためのものです。

しかし、現在、HTMLはBrowser Layout Markup Language化しています。つまりブラウザで表示したときの見栄えをHTMLで表すケースが多くなっています。特に、Microsoft Wordなどのアプリケーションで出力保存したHTMLはそういう傾向があります。

これはアプリケーションに対して、見たまま編集、みたまま印刷、そして見たままをWebブラウザでも表示したいと考える一般ユーザの要望に沿っていると思います。

しかし、実は、Webを見たまま印刷するのは却って不便です。

その典型的な例がURLです。URLはHTMLでもっともシンプルには次のように表します。

<a href="http://www.antenna.co.jp" > リンクを示すテキスト</a>

ブラウザでは、画面に「リンクを示すテキスト」を表示し、そこをクリックしたら、hrefで示すWebページにジャンプします。

従って、ブラウザで見たままを印刷したら、hrefの内容であるURLが見えなくなってしまいます。そうしますと、その印刷物からは重要な情報が脱落してしまいます。

この簡単な例からもわかりますが、Webの印刷は「みたたまではだめ」なのです。WebドキュメントのWYSIWYGは望ましくありません。

この例を、先日、実際のサンプルで示しました。
CSS3で得する話（１） URLを脚注に出す