Tag Archives: CSS

[AH Formatter] Introduction to CSS for Paged Media（CSS組版入門）

先月開催された「XML Prague 2018」で
弊社の社員が「Introduction to CSS for Paged Media」において使用した CSS組版のチュートリアル（CSS-Print.pdf）を公開しています。
Introduction to CSS for Paged Media（CSS組版入門）
→ CSS-Print-XMLPrague2018.zip

このチュートリアルは『AH Formatter』の CSS組版によって作成されています。
組版に使用した html とスタイルシートほか必要なデータは「CSS」フォルダに格納されていますので、
フォルダ内の「CSS-Print.html」を『AH Formatter』で開くことで、チュートリアルの組版を確認できます。

なお、現在このチュートリアルは英語版しかありませんが、日本語版の作成も予定しています。

組版に使用した『AH Formatter』の評価版は以下のページよりお申し込みいただけます。是非、お試しください。
→ AH Formatter 評価版のお申し込み

また、『AH Formatter』についてお問い合わせがございましたら sis@antenna.co.jp 宛てにご連絡ください。

海外出展情報 XML Prague Czech Republic

XML Prague は、ヨーロッパ最大の XML 会議です。 チェコ共和国のプラハの経済大学で、毎年 2 月に開催されています。（寒いですが、宿泊はシーズンオフのため格安です）。

xml-prague-1

この会議の形態は、会議前の日と呼ばれる Unconference Day という日が設けてあり、本会議の前に開かれる、自由スタイルの形式から始まります。90 分のセッションが開かれ、その後は 2 日間のシングルトラック会議が行われます。 昨年は、ほぼ 30 分の講演だったと思います。 今年の公演は、30 分間または 15 分間とされています。 会議のスケジュールはまだ公表になっていないので、30 分になるのか 15 分になるのかまだはっきりしません。

アンテナハウスは数年間、この会議のスポンサーとなっています。 アンテナハウスは過去 2 年間、主催者からスポンサーに与えられる ２ 名参加分のフリーパスを学生に提供しています。

xml-prague-6

XML Prague 2018 の会議前の日（Unconference day）に、アンテナハウスは、「XSL-FO、CSS、およびページメディア」セッションで Antenna House Formatter の紹介、「ページメディア向けCSSの紹介」と題したチュートリアルの両方を発表します。アンテナハウスが 会議前の日（Unconference day) にユーザーミートアップと呼ばれるものをを主催してから 4 年目で、聴講率はよく毎回好評をいただいております。弊社社員トニーグラハムは、ここで最新の「ページメディア向けCSSの紹介」と題したチュートリアル文書を組版するのに使用している CSSスタイルを紹介する予定です。 またトニーグラハムは、「スキマトロン ユーザー ミートアップ」セッションでも講演する予定です。 スキマトロン（Schematron）は、XSL-FO ファイルをチェックするための  ‘focheck’  oXygen フレームワークで使用する技術の1つです。

xml-prague-3
xml-prague-5

本会議でも、トニーグラハムが 「人生、宇宙そしてCSSテスト」を発表します。 これは、W3C CSS テストスイートの中から 17,000 件に及ぶ自動組版テストを行うために、Jenkins サーバーおよび eXist-db XML データベースとともに、Antenna House リグレッションテストシステム（AHRTS） を使用して、社内プロジェクトの開発を行った時のケーススタディです。

xml-prague-2

この会議で人気であるものの一つに、本会議の最初の日の夕方に行われるソーシャルディナーがあります。 ディナーの後には「デモジャム」というものが行われ、ボランティアで各自が XML アプリケーションのデモを５分間行うものです。 デモジャムの優勝者は、最も大きな拍手を受けるプレゼンターです。弊社社員マイケルミラーは、2013 年の XML Prague でのデモジャムで弊社製品 AHRTS のデモンストレーションで受賞しました。

xml-prague-4

MathML数式組版入門書の英語版を作成中です

海外営業担当です。

MathML数式組版入門書 は初版V1.0が昨年６月に出版され、今回改訂版V1.1の出版を間近に控えています。

本書は数式記述言語 MathML を使って数式組版を行うための入門書です。MathML を使って数式を組むためには、MathML に対応した組版ソフトが必要です。本書では弊社が独自開発した「AH Formatter MathML 描画エンジン」を用います。本書の内容の大半は特定のアプリケーションソフトに依存しないものですが、『AH Formatter』を使って MathML 組版を行ううえで有用な知識を随所に盛り込みました。本書で取り扱う MathML 仕様はバージョン 3.0（Mathematical Markup Language (MathML) Version 3.0 2nd Edition）を念頭に置いてあります。これから MathML を学習する方も、Web 上のサンプルをコピー＆ペーストしてなんとなく使っていた方も、この一冊で MathML の基本がよく分かる構成になっています。

なお、本書は HTML と CSS で記述され、『AH Formatter』で組版（CSS 組版）されています。数式部分はもちろん MathML です

2014年2月リリースの『AH Formatter V6.2』では、MathML 描画エンジンが完全に書き換えられ、数式の組版がより一層強化されました。このとき、MathML の対応バージョンも『AH Formatter V6.1』までの MathML 2.0 から 3.0 へ更新しました。

海外でもこの時新しくなった MathML 描画機能を評価をしていただいた企業より、数式の組版精度が格段に良くなったとお褒めの言葉を頂いたのを覚えております。さて本書の改訂版の出版を機に、英語版を作って海外の皆さんにも幅広く利用していただこうと、現在翻訳に着手しております。翻訳をしながら、内容を理解していきますと、これなら初心者の方も試してみよう、数式をこの本書にあるサンプルのとおりコーディングして描画してみようという気になるのではという感想を持ちました。

是非読んでいただきたい書籍です。購入方法はこちらをご覧ください。

https://www.antenna.co.jp/AHF/ahf_publication/index.html#MathML

アンテナハウス海外サイト
http://www.antennahouse.com/
http://rainbowpdf.com/

CSS組版はどこまでいけるだろうか？

表題に関して、最近、参考になった話題をひとつ紹介します。併せてCSS組版の未来を少し考えます。

去る8月1日に、DITAユーザーズというメーリングリストに「CSS3 vs XSL-FO for PDF output」[1]という質問が投稿されました。

投稿者は、現在、SDL＋AH XSL FormatterでDITAからPDFを作成している[2]とのことですが、次のようなストレートな質問をされました。

「XSL-FOは古くて頑丈です。CSSはひとあたりが良くて単純で、スタイルをWebと共有するのも簡単です。XSL-FOを使い続けることに未来がありますか？　それともCSSに全面移行するべきでしょうか？」

XML組版といえば、ここ十数年XSL-FO一辺倒でしたが、CSSで組版できることへのアピールが増えてきました。製品もいくつかあります（弊社でも出しております）。このところ、DITAコミュニティでもCSS組版の話題が散見されるようになってきました。

この質問は、DITAユーザーズというディープなXMLユーザーのコミュニティで寄せられたもので、参加者は例えば書籍の組版をする人たちとは異なっています。しかし、投稿者の疑問はDITAユーザーに限らず、XMLやHTMLを使う人が共有されているものでしょう。

DITAユーザーズでは、直ちにクールな回答がいくつか寄せられました。

その中でもEliot Kimber氏の意見が参考になりました。Kimber氏は3月に来日されたのですが、その際に聞いたところ、「いま一番関心があるのはVivlioStylesのCSS組版」とのことで、大きな期待を寄せていました。そして、5月にサンフランシスコで開催されたCSSワーキング・グループのF2F会議にオブザーバーとして自ら参加したとのことです。氏のメーリングリストの意見を要約すると、次のようになります。

1． VivlioStyles、Prince、Antenna HouseのCSS組版は歩みを進めているが、CSSの印刷向けの機能が標準化されていないので、必然的にベンダー特有になっている。
2．CSS仕様に印刷向けの機能を入れることには、ブラウザベンダーが団結して反対しているので、標準化は難しそうだ。
3．CSSとXSL-FOの機能を比較してみれば、CSSではできないことがいろいろあることがわかるだろう。これは、だれも行ったことはなさそうだ。
4．CSSにはバージョンXというものはなく、モジュール毎に進化している。
5．ページ組版に特化したHTMLを作り、ブラウザのCSSとJavaScriptでそれを組版するのは確かに可能である。しかし、ブラウザとCSSが両方共進化している中で、それを実装してメンテナンスするのは容易ではないだろう。

氏の結論としては、予測可能な将来において、DITAコミュニティがXSL-FOに代えてCSS組版を採用するのは難しい、ということです。

CSSを組版に使うための根本の仕様は「CSS Paged Media Module Level 3」[4]です。これは1999年に「Paged Media Properties for CSS3」として最初のドラフトができてから何回となく改訂されています。最新は2013年3月版ですが、まだワーキングドラフトの段階から進んでいません。次のバージョンもEditor’s Draftとして用意されているところです。

新しいものを試してみたいという人はどこの世界にも一定数はいると思います。個人で試す範囲では、仕様がどうであろうとあまり関係は無いでしょう。しかし、その一線を超えて、実務の世界で積極的に使うにはまずCSS組版の仕様が勧告になることが前提になるでしょう。

現在のCSS組版は、各社それぞれが自己流の土台の上に築いている、というのが実態です。弊社は2006年からCSS組版の開発に取り組み、2009年に初版をリリースしました。CSS組版仕様の進展は、2006年に予想したよりも、残念ながら、遙かに遅かったと言わざるを得ません。その理由の一つに、CSS組版は、CSSの本流ではない、ということがあるのかもしれません。

弊社の立場としましては、CSSの仕様が勧告案（Candidate Recommendation）に進むのを待ちながら、着実に実装を進めていきたいと考えているところです。

[1] CSS3 vs XSL-FO for PDF output
[2] 同：Message 3
[3] 同：Message 7
[4] CSS Paged Media Module Level 3 W3C Working Draft 14 March 2013

XSL-FOの便利な機能、参照エリアとインデントとはどんなもの？（2）

前回に引き続き、参照エリアとインデントについて説明します。

ブロック（段落）全体に対するインデントは段落ブロックに対するmargin-＊で表すことができますが、start-indent, end-indentの方が便利です。

start-indent、end-indentは参照エリアの内容辺を基準にして、指定したFOの内容辺までの距離を指定します。

次の例では、本文区画（基本版面）の内容辺から、章の内容への間隔を20pt（2文字分）とり、引用段落を10pt（1文字）字下げ）、表は基本版面一杯に設定する例です。それぞれ、start-indent=”20pt”、start-indent=”30pt”、start-indent=”0pt”と指定します。

<fo:block start-indent=”20pt” text-indent=”1em”>
<fo:block font-size=”16pt”>第１章</fo:block>
<fo:block background-color=”#EAEAEA”>
<fo:block font-size=”14pt” space-before=”0.5em”>節１</fo:block>
<fo:block>章や節の見出しなどからページの柱（ランニングヘッダーやランニングフッター）を設定したり、辞書のページの辺に最初の単語と最後の単語を示したりできる。</fo:block>
<fo:block text-indent=”0em” background-color=”white” start-indent=”30pt” >どれもみんな肥料や薪炭をやりとりするさびしい家だ。街道のところどころにちらばって黒い小さいさびしい家だ。（宮沢　賢治『秋田街 道』）</fo:block>
</fo:block>
<fo:block background-color=”#DDDDDD”>
<fo:block font-size=”14pt” space-before=”0.5em”>節２</fo:block>
<fo:block>章や節の見出しなどからページの柱（ランニングヘッダーやランニングフッター）を設定したり、辞書のページの辺に最初 の単語と最後の単語を示したりできる。</fo:block>
<fo:table start-indent=”0pt” z-index=”2″ background-color=”yellow”>
<fo:table-column column-number=”1″ column-width=”proportional-column-width(1)”></fo:table-column>
<fo:table-column column-number=”2″ column-width=”proportional-column-width(2)+2pc”></fo:table-column>
<fo:table-column column-number=”3″ column-width=”72pt”></fo:table-column>
<fo:table-body>
<fo:table-row height=”20pt”>
<fo:table-cell column-number=”1″ display-align=”before”>
<fo:block>Cell 1 </fo:block>
</fo:table-cell>
<fo:table-cell column-number=”2″ display-align=”center” text-align=”center”>
<fo:block>Cell 2 </fo:block>
</fo:table-cell>
<fo:table-cell column-number=”3″ text-align=”center”>
<fo:block>Cell 3 </fo:block>
</fo:table-cell>
</fo:table-row>
</fo:table-body>
</fo:table>
</fo:block>
<fo:block background-color=”#EEEEEE” z-index=”0″>
<fo:block font-size=”14pt” space-before=”0.5em”>節３</fo:block>
<fo:block>章や節の見出しなどからページの柱（ランニングヘッダーやランニングフッター）を設定したり、辞書のページの辺に最初 の単語と最後の単語を示したりできる。同じエリアの中で同じ種類が指定されていたり、空のときはエラーである。</fo:block>
</fo:block>

本文区画は参照エリアであり、インデントの指定はすべて、本文区画の辺からの距離となります。その結果レイアウトは次のようになります。

start-indent-sample1

同じFOのstart-indentの箇所に、代わりにmargin-leftを指定すると、次のようになります。マージンは、親のブロックの内容辺を基準に自分のブロックのボーダーまでの距離になるため、内側に積み重なってしまうのです。

start-indent-sample2

このようにインデントは参照エリアを基準にして、FOのネストの如何に関わらず、指定されたFOの内容エリアまでの距離を指定します。

XSL-FOでもCSSでも、基本はブロック／エリアという玉ねぎの皮のような入れ子レイアウトモデルです。このため入れ子にならない字下げ配置の指定は厄介です。インデントを使うことで、その厄介な配置を簡単に指定できます。

『XSL-FOの基礎 – XML を組版するためのレイアウト仕様』（近日発売）

AH CSS Formatterで作った本：『CSS Secrets』（Lea Verou）をチェック！

CSSについての解説書はたぶん数えきれないほどありますが、6月に発売された『CSS Secrets』の評判はかなりよさそうです。しかも、この本は弊社のAH CSS Formatterを使っているらしい！

O’ReillyからはPDF版とEPUB版も購入できます。AmazonはKindle版のみです。Kindle版はたぶんあまり読み易くないし、DRMがかかっているので買いたくありません。PDFにしようか、紙版にしようかと迷いましたが、ビジュアルな本は高くてもやはり紙でしょう。早速購入してみました。

書名：『CSS Secrets, Better Solutions to Everyday Web Design Problems』(英語)
著者： Lea Verou
発行所： O’Reilly Media　米国
発行日：2015年6月
ページ数：392

本書のタイトルは、Webデザインで日々発生する問題にどう対処するかについてです。但し、Web全体のデザインをどうしたら良いか、というものではありません。CSS仕様の項目をトピック的にとりあげて、CSS 2.1からCSSレベル3でどのように強化されたのかという観点の説明が主体です。例も、大きなコードではなく簡単なコードとその表示見本を示しています。仕様を作成する立場からの解説本という位置づけになるでしょう。

表紙

01e2d1f7ef2b51d5db79af8812d645905f785cd473

本のページは次のような内容です。

内容１

01327ef684cc6035a23dacb7112099ed765ad092c9

内容２

0120c504fdafc9d07727f9e13cb3f9627a54af0777

この本の制作方法について

この本の内容は、O’Reillyが定義するHTML Book標準のHTML5で書かれており、レイアウト、図、カラーなどはHTML+CSSでスタイル付けされているそうです。

本の制作はO’Reillyの提供するAtlasシステムを使っています。O’Reilly AtlasのPDFレンダラーはアンテナハウスのAH CSS Formatterが採用されています。

つまり、上のようなページは印刷用CSSでレイアウトを指定し、弊社のAH CSS FormatterでPDF化しています。

すごいですね！

CSS組版の実際

CSSでレイアウト指定して作られた本はこれが初めてではありません。例えば、アンテナハウスでPDFを制作した『日本語組版処理の要件』という本もCSS Formatterで制作しています。

HTML+CSSで本を作る、ということは技術的にはできているわけです。

残る大きな問題は、こうした手法が、どの位一般的に使えるか、また生産性がどうか、ということでしょう。『CSS Secrets』の著者であるLea Verouさんは、現在、W3CのCSSワーキンググループに招待されてInvited Expertとして仕様の策定作業に参加しているほどの人です。つまりCSSについて恐らく世界でも有数の専門知識をもっている人が、CSS組版レイアウトの限界に挑戦した（著者の言葉）本が『CSS Secrets』です。この著者だからできることで、誰でもすぐに真似できることではありません。

さて、この本の制作についての統計が載っています。

・内容HTMLは10,000行を超える
・レイアウトはSCSSで4,700行、SCSSから生成したCSSは3,800行

※SCSSというプリプロセッサを使って、SCSSの記法で書いたプログラムからCSSを生成している。最近は、Webページもほとんどこのような手法で作るようになっていると言われます。CSSをハンドコードするのはもはや少数派？

1冊の本のために3,800行の印刷用CSS（生成）しているのですが、これにどれだけの時間を労するものなのか？
『CSS Secrets』はTechyな著者によるTechyな挑戦と言えます。著者がかけた時間と熱意に脱帽です。

一方、プロが使う仕事のためのツールは生産性が重要な指標になります。

システムやツールを評価する観点として、InDesignなどのDTP方式と比べて生産性がどの程度かは、実用性を判断する上で大きなポイントです。

ちなみにアンテナハウスでは、Atlasと類似の本を作る仕組みとしてCAS-UBをサービスしています。CAS-UBはテキスト文字組主体の本に限れば、InDesignよりもはるかに高い生産性で本を作ることができます。ビジネス・ツールは生産性を向上できないと意味がないと思います。