2013年12月25日
_ [ahf] サンプルを作る
ちょうど要素が揃っているのと関係者が弊社と版元さんだけなので、オライリージャパンさんの許諾をいただき、『初めてのHTML5ゲームプログラミング』( http://www.oreilly.co.jp/books/9784873115603/ )をサンプルとしてみた。
で、今のところこんな感じ。
商用フォントの入っていないDebian GNU/Linux環境で試行している関係上、IPA明朝/ゴシックとVL Gothicに留めているが、本番環境ではちゃんと「A-OTFほげほげ」のようなモリサワOTFを指定すれば、InDesignで組んだものにさほど遜色のない見栄えになる。
- 課題: CSSのfont-familyで欧文フォント→和文フォントの順で指定しておけば、和文グリフが見つからないときに和文フォントにフォールバックする、という合成フォントっぽいものは簡単にできる。ただ、InDesignの合成フォントのような詳細な設定は設定ファイルでがんばる必要があるし、文字グループごとの縦横比指定というのも難しそう。とはいえ、合成フォントでは嫌な思い出しかないし、無理にがんばるよりは今のほうがすっきりしててわかりやすい。
- 課題: font-familyにはフォントをファミリ名で指定するが、Linuxではfc-listでなんとなくわかるものの、MacやWindowsだと面倒くさそう。AHF側でフォントパスの把握はできているということは、フォント名一覧を出力するヘルパーコマンドを用意してもらえると便利ではないだろうか。
さて、CSSの冒頭部分。CSS3のpage仕様に基づいている。
@page {
size: A5;
margin: 24mm 15mm 15mm 15mm;
-ah-marks: crop cross;
-ah-printer-marks-line-width: 0.25pt;
-ah-crop-offset: 20mm 20mm 20mm 20mm;
-ah-page-bleed: 3mm;
font-family: "IPAゴシック", sans-serif;
counter-reset: footnote;
@footnote {
-ah-float: bottom page;
border-top: solid 0.25pt black;
border-length: 100%;
padding-top: 0.5em;
padding-left: 2em;
}
}
@page Chapter:left {
background-repeat: no-repeat;
background-image: url(line.svg);
background-position: 10mm 16mm;
@top-left {
content: counter(page);
margin-right: 0;
padding-right: 0;
}
@top-center {
padding-left: 2mm;
width: 100mm;
content: string(ChapterStr);
border-left: solid 0.5mm black;
text-align: left;
margin-top: 8mm;
margin-bottom: 8mm;
}
}
@page Chapter:right {
background-repeat: no-repeat;
background-image: url(line.svg);
background-position: 0mm 16mm;
@top-right {
content: counter(page);
}
@top-center {
padding-right: 2mm;
width: 100mm;
content: string(Section);
border-right: solid 0.5mm black;
text-align: right;
margin-top: 8mm;
margin-bottom: 8mm;
}
}
@page Chapter:first {
@top-right {
content: counter(page);
}
@top-center {
padding-right: 2mm;
width: 100mm;
content: " ";
border-right: solid 0.5mm black;
text-align: right;
margin-top: 8mm;
margin-bottom: 8mm;
}
}
@page Chapter:blank {
@top-right {
content: none;
}
@top-center {
content: none;
}
@top-left {
content: none;
}
}
body {
page: Chapter;
break-before: right;
font-size: 10pt;
line-height: 1.5;
font-family: "IPA明朝", serif;
}
AHFでは、本文ボディを中心に、左上、上、右上、左、右、左下、下、右下とそれぞれに仮想のボックスが配置される構造で紙面を作っており、それぞれのボックスからはみ出させようとするのがけっこう難しい。
たとえば紙面の見開きでまたがって上に罫線を入れたいのだけど、CSS指示でやるのは簡単ではない。結局横幅いっぱいのSVG画像を作り、ポジション指定して貼り付けるようにしてみた。
ページ番号(ノンブル)隣の縦罫線も本当はもう少し上下は詰めたいけれども、ボックスのborderで描画しているのでちょっと難しい。このあたりの柱飾りは、全部画像にして背景貼り付けとしたほうがよいのかもしれない。
body要素にChapterで指定したページテンプレートを適用するが、テンプレート側は:firstで最初のページ、:leftで左、:rightで右、:blankで何もコンテンツがないときの設定となる。
h1 {
font-family: "IPAゴシック", sans-serif;
-ah-bookmark-level: 1;
bookmark-label: attr(title, string);
string-set: ChapterStr attr(title, string);
}
h2 {
font-family: "IPAゴシック", sans-serif;
string-set: Section self;
-ah-bookmark-level: 2;
}
章見出し。bookmarkはしおり、つまりPDFリーダーで展開表示したときに出てくるハイパーリンク目次。string-setは変数の値設定で、h1要素では柱用の変数ChapterStrにbookmark同様にh1要素のtitle属性から見出し文字列を引っ張ってきている。本来ここは属性からの取得ではなくh2のように「self」で自身のコンテンツを入れるのが普通なんだろうけど、HTMLデータ側でh1内にいくつか細工をしている関係上、selfの内容では不都合だったため、別途属性で値を持たせてすっきりさせるようにしている。
- 疑問: bookmark-labelではstring関数が利用できない？
このサンプルだとちと見栄えが悪いだけの結果だけど、「ここまでインデント」がちゃんと使えるのはありがたい。図2-3ではスペースの後のところで2行目が折り返しているが、普通にtext-indentでこれをスタイル付けしてしまうと、2-10とか12-3とか出てくるとずれてしまう。スペースの後に「<span class="splitter"/>」のように隠しでタグを入れておき、次のようにすれば、折り返した2行目以降がこの位置で開始するようになる。
span.splitter {
-ah-indent-here: 0pt;
}
AHFのCSSを作っていると、本によってはかなり複雑化していくので、全部を手打ちにするよりはCompassなどを使って効率良く作っていくのがよさそうだ。
