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

Webは見たまま印刷ではだめなこと WebはWYSIWYGではありません。

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で得する話(1) URLを脚注に出す


CSS3パワーでWebと印刷の統合!AH Formatter V5.0 3月23日より出荷開始します。

弊社では、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のパワーを、ぜひ、体験してみてください。


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


Pages: Prev 1 2