美しい組版を実現させる新しい処理システム「Twight」　WYSIWYGへの依拠を回避しつつグラフィカルな媒体を実現

組版が情報化社会で重要な役割を担う理由

和田優斗氏（以下、和田）：それでは私、和田より「強力なグラフィックデザイン機能を備えた組版処理システムTwightの開発」について発表します。

あらためまして、横浜市立横浜サイエンスフロンティア高校の和田優斗と言います。春からは筑波大学の情報学部に進学します。私の趣味として、グラフィックデザインやタイポグラフィ、Webデザインといった領域に対して興味があり、そこで得た経験や情熱を活かして、未踏事業に邁進してきました。

本プロジェクトでは、新しい組版処理システムを開発しました。そもそも組版とは何かと言うと、文字を組み合わせて印刷の原稿である版下を作る作業のことを指し、現在では印刷物を制作する際に、文字や図版などをページ上に配置する作業のことも含めて、「組版」と総称します。

組版は、現代の情報化社会において、非常に重要な役割を担っています。（スライドを指して）例えばこちらの2つの文章、中身はまったく同じですが、果たしてどちらが読みやすいでしょうか。圧倒的に左のほうが可読性が高く、美しい組版に仕上がっていると思います。

その要因として、例えば句読点が行頭に来た際の禁則処理や、字間と行間の設定が適切になされていることなどが挙げられます。このように、美しい組版を実現することは、視認性や可読性の向上に大きく寄与すると考えられます。

さらに、組版やタイポグラフィが、視覚的なメッセージを訴えかける例もあります。例えば、スライドの左側の図は『エヴァンゲリオン』の広告を引用したもので、文字を効果的に組み合わせ、鮮烈なインパクトを与えることに成功しています。

また、右側のポスターは、植林運動のために製作された著名なポスターで、森と林の2文字のみで構成されているというので、非常に驚いています。

組版処理の2つのプロセス

では我々がそうした組版処理を行う、すなわち印刷物を製作する際に、どのような手法が存在するかというと、大きく分けて2つのプロセスが存在します。

1つ目は、画面上での表示と出力が一致する、WYSIWYG（What You See Is What You Get）なソフトウェアです。これにはWordやInDesignなどが該当します。

そしてもう1つが、マークアップ言語を用いてテキストベースで文書構造を記述する、組版処理システムです。これにはLaTeXやSATySFiといったソフトウェアが該当します。

WYSIWYGエディタでは、直感的な操作でグラフィカルな文書を作成できる反面、自動処理や拡張性に乏しく、図の挿入やスタイル変更にいちいち指定が必要など、決して作業効率がよいものとは言えません。また、高度な日本語組版に対応するソフトウェアが少ないのも現状です。

対して組版処理システムでは、マクロなどを用いた自由自在な拡張や、美しい日本語組版処理がオープンソースで提供され、作業効率や文章の再利用性に大幅な向上が期待できます。しかしながら、LaTeXを始めとするシステムは、グラフィカルな装飾処理を苦手としていて、論文やレポート執筆などに用途が限定されています。

つまり、平たく言えば、従来の組版処理システムでは、コードを書くことでテキストが主体の文書を作成できました。しかし、街中ではより高度なグラフィクスや、レイアウトを要求する雑誌・ポスターといった媒体が溢れており、そうした印刷物の製作は、WYSIWYGに依拠せざるを得ない状況が続いています。

DTPが普及して久しく、誰でも印刷物を製作できる今、TeXのようにマークアップランゲージの柔軟性を引き継ぎながらも、視覚的に訴えかける媒体を、効率的に製作可能なオープンソースの組版処理システムが要求されています。

組版処理システム「Twight」のデモ

そこで本プロジェクトでは、組版処理システム「Twight」を開発しました。Twightは、Web技術としてお馴染みのXML、CSS、JavaScriptの3言語を組版処理用に最適化した独自言語を利用して、テキストベースでのグラフィカルな媒体制作を実現します。

それではまずデモをご覧いただきたいと思います。始めに雑誌の組版を行ってみたいと思います。まずXMLに文書構造やテキストを記述して、CSSに文字の配置やフォント、行送りといったスタイルを提示します。

そして、TwightはJavaで組まれているので、コンソールからJavaで組まれたTwightを呼び出して、入力に先ほどのXMLファイルと、PDFの出力先のパスを指定します。

するとリソースの収集や組版処理が行われ、図版を全面に用いた、雑誌のようなグラフィカルかつ柔軟な組版が実現できました。

続いて、ポスターの組版を行いたいと思います。同様にして、XMLやCSSを入力として与えTwightを実行すると、こちらも組版処理などが行われ、今度は図を断ち切りにしたポスターができました。これは今年度の私の学校の広報用のポスターで、例えばとんぼの出力であったり、細やかなカーニングの調節なども可能となっています。

これらを実際に印刷してみました。従来のTeXなどで制作した文章に比べて、グラフィカルな文書の作成が可能になっています。

今度は、雑誌の中でもテキストが主体となるインタビュー記事の組版を行います。例によってCSSとXMLを生成して、Twightに入力として与えます。すると、またまた記事が生成されました。これはかつて『週刊アスキー』に未踏事業の特集記事が組まれた際に掲載したものを、本システムを用いて組み直したもので、実際の商用組版にも応用可能なレベルでの組版が実現されています。

また、CSSはそのままでXMLの中身のみを変更すると、レイアウトは共通で、本文のみを変更することが可能になっており、一括での組版や自動組版にも応用が可能となっています。

その他、辞書の単語データをXMLで定義して読み込んであげることで、カッコや四角つきの数字を自動で補い、辞書組版のようなものも実現できます。

さらに、従来のTeXといった組版処理システムが対象としてきた、論文のようなアカデミックな組版も可能です。和文の他に欧文も難なく扱えます。

Twightの実装内容

先ほど実際に5つのデモを示しましたが、こうした組版の実現を支える本システムの実装内容について見ていきたいと思います。

Twightの構造は、大きく2つに切り分けられます。まず上側のレンダリングエンジンでは、XMLとCSSを入力として与えると、構文解析や型検査を行い、DOMやCSSOMを生成して、フォントのリソースなどを収集した後、PDFのバイナリを出力します。下側のライブラリは、JavasScriptとJSONで構成されるパッケージ群となっています。

それではまず、レンダリングエンジンで処理される、XML、CSSの組版言語の仕様について見ていきたいと思います。

まず特徴的なものとして、1つ目がCSSレイヤー機能です。現行のWeb標準のCSSや、LaTeXといった多くの組版処理システムでは、テキストや図形などのオブジェクトに対して適用可能なスタイルは、1つに限定されてしまいます。

本システムでは、波カッコで囲われたCSSブロックをスラッシュで区切ることによって、Illustratorにおけるアピアランスのように、オジェクトのスタイルをレイヤーとして扱えます。

（スライドを指して）例えば、右側のCSSを記述することで、左側のようにスポーツ新聞の見出しのようなスタイリングを実現できます。さらに本機能を応用して、テレビ番組のテロップや雑誌のタイトルなどに見られるスタイリングも再現可能となっています。

また、テキストの扱いに非常に優れているのも、本言語仕様の特徴です。例えば、テキストを対象とするCSSプロパティには、Web標準で存在するものの他に、ベースラインシフトや長体・平体・斜体処理などを実現する独自のプロパティが定義されています。

さらに、マークアップも簡単に行えます。標準のXMLは入れ子構造を採るため、例えば右側の「こんな夢を見た。」という文言に見られるような、組み合わさったスタイルを実現するためには、複数のタグを冗長に記述する必要がありました。

しかし、Twightではテキストタグと呼ばれる独自の記述を導入することで、簡潔なスタイリングを実現しています。また、テキスト内に挿入されたXML要素は、テキストタグへと自動変換されるので、先ほどの辞書のサンプルにあったように、文書構造を維持したまま組版処理を行うことも可能です。

その他、インラインテキストコマンドという表記を用いることで、文中に直接スタイルを埋め込むことも可能で、かつてあった写研のSAPCOLのようなタグつき組版にも対応しています。

こうしたスタイリングを活用することで、例えばアニメのロゴのような組版を実現したり、文字が踊るような表現を可能としています。さらに、テキストが螺旋状にうねるような複雑な表現も可能となっています。

また、Twightでは一般には扱えないような特殊文字も容易に扱えます。世の中の大半のアプリケーションはUnicodeを用いて文字参照を行いますが、Unicodeでは参照できない文字が世の中には存在します。

（スライドを指して）例えば、左側の「あ」はすべてグリフが異なりますが、Unicode上では「U+3042」として包摂されてしまうため、表記の区別ができません。

そこで本システムでは、Unicodeの他にCIDと呼ばれる、グリフに固有のコードポイントを直接参照できるほか、異体字セレクタを付与することで、漢字の字形を区別するIVSといった規格にも対応しています。

例えば、右側に示したワタナベさんのナベの字形はすべて字形が異なっており、こうした人名漢字や地名などの細やかな表記の際も、IVSを利用して表記可能です。

さらにOpenTypeフォントに含まれるGSUBテーブルを利用して、字形の一括置換を行うことも可能です。右側に示した例では、字形を旧字体や等幅半角字形に自動変換する処理が実現されています。

その他に、型システムも内蔵しています。SATySFiの開発時にも言及されたように、LaTeXやブラウザ上で作動する旧来のCSS組版では、型エラーの際のメッセージが不親切であるという短所がありました。

そこで本システムでは、XMLの属性やCSSプロパティ値を静的型づけとすることで、迅速なエラー報告を実現しています。

組版言語ならではの型として、色空間や寸法を表す型も備えており、CMYKやRGB、メートル法や級数表記といった、複数の色空間や単位型を利用することが可能です。

また、条件式型という一次式に合致するかを調べる型も備わっていて、利用することで、例えば「マスターページとして奇数ページにはこの柱を、偶数ページにはこのノンブルを配置したい」といったような、柔軟な運用が可能となります。また、テキストを連ねて表示するスレッドテキスト機能も備わっています。

Twightのライブラリ

続いてライブラリの説明に移ります。（スライドを指して）ライブラリは、この赤で囲った部分で、ユーザーが自由に実装して機能拡張を行えます。それでは、まずライブラリをどうやって実装するかを見てください。

例えば縦中横という、縦書きで英数字を並べて表記する機能を実装したい場合、まず、JSONにCSSプロパティを定義して、型情報やイベントハンドラを記述した後、JavaScriptにその処理内容を書いていきます。

あとはプリミティブなCSSプロパティと同様に要素を適用することで、「縦中横」の処理を簡単に行えます。こうやって1度定義されたライブラリは、他の文章から再利用することも可能となっています。

このように、ライブラリでは独自のCSSプロパティや、XML要素が簡単に定義可能となっています。そしてTwightの開発方針として、“ライブラリでできる処理は、なるべくライブラリで行う”というものがあります。

この方針によって、ユーザーが後から介入可能な箇所を最大限まで広げることで、言語単体ではカバーしきれない細やかなハウスルールなどにも、柔軟に対応可能です。

システムは豊富なAPIをJavaScriptを通じて提供しており、例えば文字ごとのメトリクスの取得やフォント情報の取り扱いといった、Web標準をはるかに超える機能を利用可能です。

もちろん、需要が見込まれる組版機能は、標準ライブラリとして提供を行うため、JavaScriptに触れることなく組版処理を行うことも可能です。

標準ライブラリで既に複雑な日本語組版処理に対応しており、例えば複数の書体を混ぜて表現する合成フォント機能や、約物と呼ばれる記号類のアキをJSONで調節する機能、さらに禁則処理やルビ、割注といった標準的な組版機能は、すべてライブラリを通じて実装されています。

もう少し詳細を見ていくと、日本語組版に関しては、W3Cの『日本語組版処理の要件』に準拠した組版を行っています。欧文に関しては、TeXで採用されているKnuth−PlassのBreaking Paragraphs into Lines Algorithmを組み込んでいて、美しい行分割処理を実現しています。その他、テキストの自動伸縮や上付き、下つき文字、1行目のインデントや脚注などの処理にも、標準で対応しています。

ページレイアウトに関しては、段組みや、n段にわたって見出しや本文を配置する段抜きの処理、さらに、見出しや図版を配置する際にn行分のスペースを確保する行取り、図形の回り込みといった処理に対応しています。

グラフィックスに関しては、テキストに付随する図形を描写する、文中に画像や記号を挿入する操作も可能です。その他、円形やスターといった図形も描写でき、スクリプトと連携することで、例えば右側のように、スピログラフで描かれるような複雑な図形も表現可能となっています。

また、外部システムと連携して組版を行うこともできます。こちらのデモでは、テキストタグで囲んだTeX数式をXML上に記述して、処理を実行すると、外部のTeX2imgが走り、自動的に数式が生成されます。

あとは処理がTwightに返ってきて、TeXで出力された数式の画像を、Twightの文中に埋め込むことが可能となっています。

このように、Twightのグラフィックス性能と、TeXの美しい数式を組み合わせた組版が可能になるなど、既存のソフトウェアを流用することで、システムにさらなる柔軟性を持たせることが可能です。

Twightの今後の展望

それでは、最後にシステムの展望についてお話しします。今後の開発予定としては、人間の感覚的な調整に依拠してしまいがちなカーニング調節や、フォントの選択といった部分に対して、局所的にGUIを取り入れていきたいと考えています。

さらに、数式の組版を自前で実装することや、フォントの埋め込みサブセットへの対応、印刷標準であるPDF／Xへの対応を視野に開発を進めていきます。

Twightはオープンソースソフトウェアとして公開することで、より広いユーザーに対して、美しい組版のアプローチを提供することを標榜としています。

さて、実は本スライドもTwightを用いて作成されており、スライド上に登場するすべてのページの組版や図版は、Twightを用いて表現可能となっています。XMLを記述することで、デザインの統一や、文書構造の明瞭化、バージョン管理の効率化を達成することができます。従来のパワーポイントのように、手動で配置を整列したり、罫線を引いたりする必要はありません。

このように印刷物の製作以外にも、幅広い用途に対してTwightは応用可能であると考えています。

さらに来るべき次世代の、クラウド組版への対応も進めています。見ていただいている画面は、現在開発中のブラウザーで動作するオンラインエディタで、こちらにXMLやCSSを記述した後、コンバートボタンをタップすると、サーバー上で作動するTwightを通じて、オンラインで組版処理が可能となっています。そして出力された内容は、文学作品を小冊子のかたちで組んだものになっています。

このように、タブレットを始めとするマルチデバイスを用いて文書作成から組版処理までが可能となる、まさに組版の未来を見据えたシステムに仕上がっていると思います。

最後になりましたが、本システムの開発の参考として、プリプレスから製本までの印刷工程を見学させてくださった三美印刷株式会社のみなさまに、この場を借りて御礼申し上げます。

プロジェクトのまとめですが、強力なグラフィック機能を備えた日本語組版処理システムの開発では、新たな組版処理システムTwightを開発しました。TwightはWeb技術であるXML、CSS、JavaScriptを組版用に改良した独自言語を利用したテキストベースでの入力で、WYSIWYGに依拠しない、グラフィカルな媒体制作をサポートしています。

Twightは近日中にオープンソースでの公開を予定しているので、公開した際には、ぜひみなさまに活用していただけると幸いです。発表は以上です。ご清聴ありがとうございました。