10日目エントリーです。当日のスライドはこちらです。CSS組版とは書籍を出版する上でのレイアウトを、htmlとCSSを使って実現するものです。Foundationがオープンソース(AGPL)で提供するVivliostyleがCSS組版の分野をリードしています。著者もこのライブラリーを使用してCSS組版を行っています。Markdownからhtmlへの変換もPandocで行っています。原稿はMarkdownで記述します。次に、Pandocが変換するhtmlにあわせてCSSを記述します。serveコマンドでWebサーバーを立ち上げた上で生成したhtmlとCSSをVivliostyleのViewrにかまして、レイアウトします。下記はpackage.jsonの抜粋です。}}最後に、Chromeの印刷機能を使って、PDFを出力します。CSS組版の光CSS組版には以下のようなメリットがあります。ビルドが早い(LaTexに比べて)フォントの自由が利くブラウザーでレイアウトのデバッグが出来る以下、エンジニア観点でCSS組版でうれしいことについて述べます。コード例などで、コメント等でいわゆる全角文字を半角文字2文字分に揃えたレイアウトが非常に困難ですが、CSS組版だとフォント指定のみで可能です。CSS組版だと比較的楽です。URL紙のレイアウトの際にURLを識別しやすくするのもCSSだと楽ですね。光があれば闇もあります。Mediaのtarget-counterを使って行うのですが、32ページ程度の書籍でも目次のレンダリングが終わるまで結構かかります。環境依存のレイアウト乱れCSS組版は、ブラウザーのレンダリングした結果をPDFとして出力するものです。Mediaは、html/CSSによるレイアウトを拡張してページレイアウトをCSSで実現することを目指していますが、そもそもhtmlというものは、文書構造をマークアップするものであって、物理レイアウトを規定するものではないです。結果として、現状のCSS組版では、画面の解像度やdpiなど、ハードウェアの要因によって、出力されるレイアウトに差異が生じます。レイアウトする際の微妙な差異の累積によって、出力されるページ数もかわってきます。下記は比較的解像度が低いモニターで出力した際のレイアウトずれの例です。このようなレイアウトずれは、多様なデバイスの存在を前提としたhtmlとWebブラウザーの世界では起きて当然なのですが、出版物の組版の環境としては見逃すことができない問題です。このため、現状のCSS組版では、入稿するPDFをビルドするマシン環境を作ったら、その環境は死守する必要があります。以下のような、ページの一番下に見出しが来てしまう現象は、LaTexだといい感じにレイアウトを調整してくれるのですが、CSS組版でこれを回避したい場合は、実装する側で調整を行う必要があります。フォント埋め込み上記のような難関を越えていったとして、最後に残るのがフォント埋め込みの問題です。Acrobatで見ると、以下のようにフォントの種類が「Type3」と表示されています。これはChromeでhtmlをPDF出力する際の仕様で、Type3と表示されていますが実際の端末での表示上はまず問題になりません*1。印刷所で入稿する際はAcrobatの文章のプロパティでフォントが埋め込まれているかを判断しているので、この状態のPDFを受け付けてくれない場合があります。CSS組版のフォント埋め込みについては、@vvakameさんの「Re:VIEW+CSS組版やっていき」に、次のような記述があります。印刷所に入稿するデータはPDF形式であり、そこにはフォントデータを埋め込まなければなりません。現時点ではChromeの印刷機能でPDFを生成する時に、フォントデータを埋め込む方法が分かっていません。Acrobatに課金してフォントデータを後乗せで埋め込むという手法が選択肢としてあるそうです。羊にこの手法を試してもらいましたが、上手くいきませんでした。よって、今回の印刷ではフォントデータが欠損していても無視して無理やり印刷します。現状の到達点だから...!仕方ないから...!著者もこの問題に多いにはまり、その結果としてわかったことを以下に記します。Pro*2には、システムにインストールされているフォントでないとフォントの埋め込み・アウトライン化ができないという仕様があります。Webフォントの埋め込みはAcrobatではできない、ということになります。ローカルで動かすフォントをCSSで直接指定すればいいのかというと、WindowsってCSSで指定するフォント名と、アプリケーションが認識するフォント名が一致しないフォントがあるっていう落とし罠があるんですね。下記のQiitaエントリーを見てこの現象に思い至りました。JPを指定するときの表示です。表示名違うでしょ?で、入稿前日に悪戦苦闘したのですが、これはどうやってもAcrobatでは埋め込みできない、ということになりました。回避先としては、Macのプレビュー.appだと強制的にアウトライン化してくれるので、これだと入稿OKなPDFになります。著者の環境はWindowsなので、入稿当日にキンコーズでMacを借りて、入稿用のPDFを作成しました。以上のような悪戦苦闘を経て、できあがったものがこちらになります。fieldnotes.booth.pm最後に終わった後で振り返ってみると楽しくも思えますが、入稿前日の夜*3にこういう問題にはまるのは正直地獄です。組版環境を入稿直前にいじるのはほどほどにしましょう。月別アーカイブはてなブログをはじめよう!setoazusaさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。