CSS3縦書きをサポートする組版エンジンAH Formatterの紹介

CSS3 縦書きをサポートする組版エンジン
AH Formatter の紹介
2012-03-06
（次世代ブラウザ技術を用いたコンテンツ表現方式に関するイベント）

むらかみしんゆう
村上真雄
@MurakamiShinyu
murakami@antenna.co.jp

(1 / 25)

CSS3 縦書きをサポートする組版エンジン AH Formatter の紹介

目次

1. はじめに . . . . . . . . . . . . . . . . . 3 4. CSS3 Writing Modes
（縦書き）
1.1 自己紹介 . . . . . . . . . . . . . . . . . 3 対応 . . . . . . . . . . . . . . . . . . . . 13
1.2 アンテナハウス株式会社について
5. ルビと圏点 . . . . . . . . . . . . . . 15
......................... 4
5.1 ルビのマークアップ(HTML5) 15
2. AH Formatter とは . . . . . . . 5 5.2 CSS3 Ruby 対応 . . . . . . . . . 16

3. CSS3 ページ媒体向け仕様への 5.3 CSS3 Text：圏点 . . . . . . . . 17

対応 . . . . . . . . . . . . . . . . . . . . . 7 6. その他の日本語組版関連機能 19
3.1 柱とノンブル . . . . . . . . . . . . . 7 6.1 約物の処理 . . . . . . . . . . . . . . 19
3.2 クロスリファレンス . . . . . . . . 8 6.2 和欧文間の空き . . . . . . . . . . 20
3.3 フロート拡張：ページフロート 9 6.3 OpenType フォント機能 . . . 20
3.4 段組のフロート . . . . . . . . . . 10 6.4 IVS 異体字対応 . . . . . . . . . . . 21
3.5 脚注 . . . . . . . . . . . . . . . . . . . 12 7. 利用事例紹介 . . . . . . . . . . . . 22

(2 / 25)


1. はじめに

1.1 自己紹介
しんゆう
❏ 村上真雄（Twitter: @MurakamiShinyu）と申します。
❏ 1990 年ごろ、テキスト整形ツール「XTR」を開発しフリーソフトウェアとし
て公開。それ以降、組版・印刷とマークアップ言語(SGML、XML、HTML)、
スタイルシート言語(XSL、CSS)に関心を持ち続ける。
❏ 1999 年、XML 自動組版ソフトの開発を企画、アンテナハウス株式会社から、
XSL Formatter（のちに Antenna House Formatter = AH Formatter）とし
て製品化。2007 年より同社非常勤取締役。AH Formatter 開発責任者。
❏ 2010 年より JEPA EPUB 研究会参加、W3C CSS3 縦書き関係仕様の co-
editor（2011 年まで）、次世代 Web ブラウザのテキストレイアウトに関する
検討会　構成員。

(3 / 25)


1.2 アンテナハウス株式会社について
❏ 設立：　1984 年 8 月
❏ 代表取締役：　小林徳滋（Twitter: @TokKoba）
❏ 資本金：　4000 万円
❏ 従業員：　53 名（国内）
❏ 事業内容：　データ有効活用のためのコンピュータソフトの企画・開発・販売
❏ 主要商品：　PDF 関連ソフト、XML 組版関連ソフト
❏ 所在地：　東京都中央区東日本橋 2-1-6
❏ TEL: 03-5829-9021　FAX: 03-5829-9023

❏ URL:　 http://www.antenna.co.jp

(4 / 25)


2. AH Formatter とは
❏ 正式名称は Antenna House Formatter です。現在バージョンは V6.0。
❏ ページ媒体（Paged Media）用に特化した XML/HTML 組版エンジン、主に
PDF・印刷物制作用途
❏ W3C 標準仕様 XSL-FO, CSS, SVG, MathML などに対応
❏ AH Formatter の応用例
✦ 雑誌、書籍の組版
✦ 多言語を必要とするグローバル企業でのマニュアル制作
✦ 精細なベクタ画像を必要とする工業部品カタログ制作
✦ 議事録や会誌、帳票などの自動組版
✦ Web との連携による PDF 配信システム
など

(5 / 25)


AH Formatter（Windows 版）の組版結果プレビュー画面
(6 / 25)


3. CSS3 ページ媒体向け仕様への対応

3.1 柱とノンブル
ページヘッダやフッタに本文中の見出しからとった文字列を表示できます。
@page {
size: 128mm 188mm; /* ページサイズ */
margin: 14mm 12mm; /* ページ余白 */
}
@page :right { /* 右側ページの右下にノンブル（ページ番号） */
@bottom-right { content: counter(page) }
}
@page :left { /* 左側ページの左上に柱、右下にノンブル（ページ番号） */
@top-left { content: string(柱) }
@bottom-left { content: counter(page) }
}
/* 章タイトルを柱に設定 */
.Chapter > h1 { -ah-string-set: 柱 content() }

(7 / 25)


3.2 クロスリファレンス
「2. AH Formatter とは(p. 5)を参照」のように、参照先の章番号やページ番号を
自動的に付加することができます。
a.XRef::before {
/* リンク先の章番号 */
content: target-counter(attr(href), ChapterNo) ". ";
}

a.XRef::after {
/* リンク先のページ番号 */
content: "(p. " target-counter(attr(href), page) ")";
}

... <a class="XRef" href="#AHFIntro">AH Formatterとは</a>を参照

(8 / 25)


これは -ah-float: page top; （ページの上に配置）の例

3.3 フロート拡張：ページフロート
❏ -ah-float: page top; /* ページの上に配置 */
❏ -ah-float: page bottom; /* ページの下に配置 */
❏ -ah-float: page left top; /* ページの左上に配置 */
❏ -ah-float: page right bottom; /* ページの右下に配置 */
❏ -ah-float: page top outside; /* ページの上の小口側（見開きの外側） */
❏ -ah-float: page bottom inside; /* ページの下のノド側（見開きの内側） */

など。
これは -ah-float:
これらフロート拡張は、CSS3 Generated Content for
page right bottom;
Paged Media (GCPM)ドラフト仕様の Page Floats をベ
（ページの右下に配置）
ースに、より自由な配置ができるよう拡張しています。
の例

(9 / 25)


3.4 段組のフロート

段の上に配置 -ah-float: column そ、つねならむ。段の右上に配置

top; うゐのおくやま -ah-float: column
けふこえて、あさ right top;
いろはにほへとちりぬるを、わかよたきゆめみしゑひ
れそ、つねならむ。うゐのおくやまけふもせすん。いろはにほへとちりぬるを、
こえて、あさきゆめみしゑひもせすん。わかよたれそ、つねならむ。うゐのおく
いろはにほへとちりぬるを、わかよたれやまけふこえて、
段の左下に配置
あさきゆめみし
段の下に配置 -ah-float: column
ゑひもせすん。
-ah-float: column bottom; left bottom;
いろは。

次は段をまたがるフロート。

(10 / 25)


左上に 2 段抜きで配置そ、つねならむ。ねならむ。うゐの

-ah-float: multicol left top; うゐのおくやまけおくやまけふこえ
ふこえて、あさきて、あさきゆめみ
width: 3gr;
ゆめみしゑひもせしゑひもせすん。
いろはにほへとひもせすん。いろすん。いろはにほいろはにほへとち
ちりぬるを、わかはにほへとちりぬへとちりぬるを、りぬるを。
よたれそ、つねなるを、わかよたれわかよたれそ、つ
らむ。うゐのおく
やまけふこえて、右下に 3 段抜きで配置
あさきゆめみしゑ -ah-float: multicol right bottom; width: 5gr;

より詳しい説明は、AH Formatter のドキュメントをご覧ください。
AH Formatter のフロート拡張では、W3C『日本語組版処理の要件（JLREQ）』
の「図版の配置処理」に準拠した図版の最適な自動配置を実装しています。

(11 / 25)


3.5 脚注
拡張フロート -ah-float プロパティの値に footnote を指定するとその要素の内容
が脚注(1)になります(2)。
<style>
.Footnote { -ah-float: footnote }
</style>

<p>floatプロパティの値にfootnoteを指定するとその要素の内容が脚注
<span class="Footnote">脚注とはページの下の方に置かれる注です。</span>
になります。...</p>

(1) 脚注とはページの下の方に置かれる注です。
(2) 脚注の配置には 3. フロート拡張：ページフロート(p. 9)の -ah-float: page bottom が使われています。
脚注領域の設定は@page ルールの中で@footnote ルールを使います。脚注の番号の形式を設定するに
は、::footnote-call、::footnote-marker 擬似要素を使います。

(12 / 25)


4. CSS3 Writing Modes（縦書き）対応
文書全体を縦書きにするには、ルート要素に指定：
html {
-ah-writing-mode: vertical-rl; /* 縦書き */
}
もちろんブロック単位にも指定できます：
を字すと文クのきん書なで
な 31 縦よ
mode: horizontal-tb

mode: vertical-rl
「日。横縦も書をに、きど組日
縦たてど」書書書で全縦うもが出ま本
中ちゅをのきききき体に対版れ語

AH Formatter
書主
横うよ横よのののまをき、応流物まは
」こ書う中指指す縦に部しのす伝
にてで
ときに定定。書す分多。統
いに部「き的いすく書的
ははる
いす分でににま。は籍に
こも
まる的 ’12 年すすブすは今や縦
writing-

writing-

とち
すこに３。るもロ。縦も雑書
。と数月でこッこ書ろ縦誌き
、

(13 / 25)


div.Vertical {
-ah-writing-mode: vertical-rl; /* 縦書き */
}
span.TCY {
-ah-text-combine: horizontal; /* 縦中横 */
}
...
<div class="Vertical">
...
<p>縦書きの中に「<span class="TCY">’12</span>年３月
<span class="TCY">31</span>日」のように部分的に数字などを
横書きにすることを「縦中横」といいます。</p>
</div>

(14 / 25)


5. ルビと圏点

5.1 ルビのマークアップ(HTML5)
<ruby>京<rt>きょう</rt></ruby><ruby>都<rt>と</rt></ruby><ruby>府<rt>ふ</rt
きょうとふ
京都府
<ruby>京都府<rt>きょうとふ</rt></ruby>
きょうとふ
京都府
<ruby>京<rt>きょう</rt>都<rt>と</rt>府<rt>ふ</rt></ruby>
きょうとふ
京都府

(15 / 25)


5.2 CSS3 Ruby 対応
<ruby style="-ah-ruby-position: after;">
<ruby style="-ah-ruby-position: before;">東南<rt>とうなん</rt></ruby>
<rt>たつみ</rt>
</ruby>の方向
とうなん
方た東と
う
東南の方向向つ
み
南な
ん
たつみの
<ruby style="-ah-ruby-align: center;">地<rt>ち</rt></ruby>
地ち

<ruby style="-ah-ruby-align: start;">地<rt>ち</rt></ruby>
地ち

その他、ルビを隣の字に掛ける方法の指定やルビが長いとき自動的にルビの字幅を
縮める指定など、ルビ配置の細かな設定のためのプロパティがあります。

(16 / 25)


5.3 CSS3 Text：圏点
em.Kenten {
-ah-text-emphasis-style: filled;
font-style: normal;
}
ここは<em class="Kenten">圏点で強調</em>よ
● ● ● ● ●
強﹅こ
ここは圏点で強調よ調﹅こ
よは
圏﹅
点﹅
で﹅

-ah-text-emphasis-style: open;
○ ○
ここは圏点よ
(17 / 25)

• • ▲ ▲
圏点 (dot) 圏点 (triangle)
◦ ◦ △ △
圏点 (open dot) 圏点 (open triangle)
● ● ﹅﹅
圏点 (circle) 圏点 (sesame)
○ ○ ﹆﹆
圏点 (open circle) 圏点 (open sesame)
◉ ◉ ★ ★
圏点 (double-circle) 圏点 ("★")
◎ ◎
圏点 (open double-

circle)

(18 / 25)


6. その他の日本語組版関連機能

6.1 約物の処理
「
《約物〔やくもの〕、つまり『括弧』『句読点』の類（たぐい）です。
》・」のように、
約物（句読点や括弧類）が連続する場合や行頭や行末に来たとき、通常は全角幅の約
物を半角幅に詰めて、見栄えをよくします。
「《約物〔やくもの〕》、つまり『括弧』・『句読点』の類（たぐい）です。」←
こちらは比較のために、約物の詰めを無効にした例です（-ah-punctuation-trim:
none を指定）(3)。

(3) この約物の詰めの処理と次の和欧文間の空きの処理は、CSS Text Level 4 で定義される予定の text-
spacing プロパティの機能に相当します。

(19 / 25)


6.2 和欧文間の空き
「日本語にも global にも 100%を目指す AH Formatter V6 です」のように、日本
語の文章の中に欧字や数字が入るとき、間にアキを入れて読みやすくします。
「日本語にもglobalにも100%を目指すAH Formatter V6です」←こちらは比較のた
めに、和欧文間の空きを無効にした例です（-ah-text-autospace: none を指定）。

6.3 OpenType フォント機能
CSS3 Fonts ドラフト仕様の font-variant 拡張に対応しています。

❏ font-variant: normal | [ <font-variant-caps> || <font-variant-numeric> || <font-variant-
alternates> || <font-variant-east-asian> ]

body { /* 日本語OpenTypeフォントの仮名文字などをプロポーショナルに */
font-variant: proportional-width;
}

(20 / 25)


「日本語 OpenType フォントの仮名文字などを“プロポーショナル”なグリフにすることが
できます。（font-variant: proportional-width）
」
「日本語 OpenType フォントの仮名文字などを“プロポーショナル”なグリフにする
ことができます。（通常）
」
「日本語 OpenType フォントの仮名文字などを“プロポーショナル”なグリ
フにすることができます。（font-variant: full-width）
」

6.4 IVS 異体字対応

葛󠄀城市と葛󠄁飾区葛󠄀葛󠄁
葛󠄀 = U+845B U+E0100葛󠄀
葛󠄁 = U+845B U+E0101葛󠄁

(21 / 25)


7. 利用事例紹介
❏ W3C 技術ノート『日本語組版処理の要件』
書籍版の組版

(22 / 25)


❏ 米国国税庁(IRS)のページ組版システム

(23 / 25)


❏ 日刊情報誌「The Daily NNA」18 紙の制作

㈱エヌ・エヌ・エー様による AH Formatter 事例紹介資料より

❏ このほか、アンテナハウスのサイトの AH Formatter 導入事例紹介のページ
で、いろいろなソリューション事例を紹介しています。ご参照ください。
http://www.antenna.co.jp/AHF/ahf_jirei/

(24 / 25)


ありがとうございました

村上真雄 (MURAKAMI Shinyu)　アンテナハウス株式会社
Twitter: @MurakamiShinyu
CSS 組版ブログ: http://blog.antenna.co.jp/CSSPage/
AH Formatter: http://www.antenna.co.jp/AHF/
(25 / 25)

CSS3縦書きをサポートする組版エンジンAH Formatterの紹介

Recommended

More Related Content

More from Shinyu Murakami (12)

CSS3縦書きをサポートする組版エンジンAH Formatterの紹介