CSSで新聞をつくる
第５章では、Web の技術であるCSSを活⽤して紙の印刷のレイアウトを⾏い新聞の紙⾯を再現してみるとともに、CSS組版で使⽤される規格を紹介していきます。
全章を一括して購入されたい方はこちらの記事をご購入ください。https://note.mu/nikkei_staff/n/n44623c9b9ab4
RNikkeiなどの開発を担当している伊藤⼤晃/@isudzumiです。
最近、CSS 組版に興味が出ています。CSS 組版とは、Web の技術を紙の印刷のレイアウトを⾏う組版にも使⽤してみようという試みです。⼀度、⼩説の組版をしてみたところ、案外簡単にできてしまいました。本章では、CSS を活⽤して新聞の紙⾯を再現してみるとともに、CSS 組版で使⽤される規格を紹介していきます。
5.1 Web と新聞紙
新聞の特徴として、紙⾯のレイアウトと⼤きさで重要度を伝えていることが挙げられます。多くのWeb サイトでは⽇経電⼦版もそうですが、複数の記事を1 つのページにまとめることはありません。仮に複数の記事をまとめた場合は、記事の重要度はタイトルを太くしたり、インデントを深くすることで表現するでしょう。
新聞では記事をただ並べるだけでなく、配置が重要な意味をもちます。重要なものを右上に⼤きく配置し、そうでないものは左下に⼩さく、という形でニュースの重要度という情報を伝えています。つまり、⼆次元上にサイズの違ったコンテンツを並べていくことになります。
本稿では、記事をCSS のGrid Layout を⽤いて紙⾯のレイアウトを再現していきます。Grid Layout は、ページを格⼦状に分割することで要素を２次元に配置することを可能にした、CSS の新しい規格です。ここ数年でほとんどのブラウザに実装され、今ではよく⾒るようになりました。
今回は紙⾯をGrid で分割し、各記事の要素を配置することにしました。そして出⼒されたのがこちらです（図5.1）。
5.2 作成した新聞の特徴
まず、今回作成した新聞で使⽤したCSS プロパティや実装⽅法などについて紹介していきます。
5.2.1 ページサイズ
⽇本で主に使⽤される新聞のサイズは主に２つあります。ブランケット判とタブロイド判です。本紙ではサイズの⼤きいブランケット判（406.5 × 546mm）を採⽤しています。
タブロイド判は、ブランケット判の半分のサイズ（273 × 406.5mm）です。新聞の判型は多くの場合、我々が普段使⽤しているA 列やB 列とも違う、独⾃の判型を採⽤しています。これは明治時代の輪転機で使⽤していた紙⾯サイズが使われているからです*1。後に輪転機を更新しても、紙⾯サイズはそのままになっているんですね。
Paged Media Module
CSS で新聞独特の紙⾯サイズを表現するために、CSS Paged Media Module Level 3*2に規定されている@page 規則を使⽤しました。Paged Media Module は、印刷物をスクリーン上で再現するための規格です。現在ブラウザに実装されているものは、@pageを⽤いて、印刷時にmargin など⼀部のCSS プロパティを変更する機能です。現在Working Draft のLevel 3 では、sizeなどが指定できるようになるなど、いくつか機能が拡張されました。今回使⽤したいのは、このsizeです。しかし、この機能はほとんどのブラウザが対応していません。
そこで、今回はpaged.js というライブラリを使い、@pageを⽤いたサイズの指定を⾏ってみました。それが、こちらです（リスト5.1）。
今回はブランケット判なので、--paper-widthと--paper-heightにはそれぞれ406.5mm, 546mm という値が代⼊してあります。sizeには他にも、A4といった紙のサイズによる指定や、紙の向きを指定するlandscape（縦）、portrait（横）などもできます。
ネストされている@top-center、@top-leftは、紙の余⽩部分のスタイルを決めています。@top-centerでは上部中央の「⽇本経済新聞」の題字を、@top-leftではページ数、すなわち第何⾯かを指定しています。⽂書本⽂ほど細かくスタイルを指定できるわけではないので、発⾏⽇や「（⽇刊）」という⽂字など、スタイルの異なる多くの要素を詰め込めません。結局、紙⾯上部に書かれたテキストを完全に再現することは難しかったです。
CSS 組版向けライブラリ
次に、CSS 組版を実現するためのjs ライブラリを選定します。未だ主要ブラウザに実装されていない仕様をサポートしているライブラリは次のようなものがあります。
BookJS
後述するCSS Regions をブラウザ上で実現し、html を印刷可能な紙の形で表⽰する。⽐較的古い。
CaSSius
ブラウザの印刷機能でhtml を印刷レイアウトのpdf に変換する。パッケージがnpm に公開されていない。
paged.js
今回使⽤。今年リリースされた。ブラウザ上で紙⾯を表⽰できる。ただし、印刷には⾮対応。
Vivliostyle
⽇本製のライブラリ。開発も活発で、CSS 組版を⾏う者のほとんどが使⽤している。今回⾒送った理由は、Grid Layout に対応していないことや、開発時はビルドしたhtml ファイルをVivliostyle Viewer に指定するという形をとる必要があるため、devserver のauto-reload を活⽤できず、不便だったため。
WeasyPrint
html をpdf に変換してくれる。writing-mode: vertical-rlに対応していなかったため、縦書きできなかった。
今回paged.js を採⽤したのは、開発のしやすさが主な理由です。多くのCSS 組版向けライブラリはhtml を読み込んで変換するものが多いため、paged.js のようにライブラリを読み込むだけで変換後のものをブラウザに表⽰してくれるライブラリは貴重でした。現在は情報が多くなく機能も少ないですが、ブラウザでのプレビューが簡単にできるので、今後利⽤が広まっていくのではないかと考えます。また、開発元のWeb サイト、「Paged Media」*3や、その運営者Adam Hyde ⽒のサイト*4は、Web 技術を使った組版に関する情報や知⾒が幅広くまとまっていますので、興味のある⽅はぜひご⼀読ください。
5.2.2 紙⾯レイアウト
核となる全体的な紙⾯のレイアウトは、先述のとおりGrid Layout を⽤いています。縦を15, 横を130 に分割し、各記事の領域を縦の段組みごとに細かく分割していくという形を取りました。縦を15 に分割した理由は、⽇経本紙では縦に15 段の段組みが取られているからです。これを踏襲するかたちで、grid-template-rows: repeat(calc(100% / 15), 15); と指定し、題字下など、調整が必要な箇所はflex-box で調整しました。また、新聞は横に130 ⽂字分の幅であることから、横を130 分割しました。しかし、CSS で指定する際に常に格段の要素の幅を意識しなければいけなくなるので、⼈間にやさしくないですよね。ここはエディタなどを⽤意して⼈間が意識しなくてもよくなるようにする必要性を感じています。今回はひとまず縦の分割と同様にgrid-template-columns: repeat(calc(100% / 130), 130); としています。
5.2.3 記事本⽂のレイアウトについて
次にコンテンツの主体である記事についてです。
新聞紙⾯は縦組みが基本となるため、あまり⾝近でない⽅もいるのではないでしょうか。そこで、いくつかプロパティを紹介しながら、新聞記事のフォーマットをどのように再現していったか紹介します。
縦書きにする
まずは最⼤の特徴である縦書きにするプロパティです。今回は次の2 つのプロパティを紙⾯全体に適⽤させました。
• writing-mode: vertical-rl;
• text-orientation: upright;
最初のwriting-modeは、⽂書の⾏⽅向を定義するプロパティです。各国⾔語に対応するために⽣まれました。verticalで⾏を垂直⽅向に、rlで右（right）から左（left）にフローさせていくことを定義します。横書きの部分にはそこだけwriting-mode: horizontal-tb;を指定しています。
text-orientationは、⾏内のテキストの向きを定義するプロパティです。ただ上記のvertical-rlを設定しただけでは、アルファベットや数字が新聞のように縦にならず、90度横倒しになります。これを解消するために、text-orientation: upright;を設定することで、英数字も無事縦書きにすることができます。
局所的な横書き（縦中横）
前章の設定だけでは、新聞の⽂章を完全には再現できません。たとえば、トップ記事の⾒出しの「200 万⼈」というところです（図5.2）。
「200」だけ横書きになっています。「縦中横（たてちゅうよこ）」と呼ばれる処理ですが、これを⾏うには次の設定を縦中横にしたいテキストに当てます（リスト5.2）（リスト5.3）。
新聞では2 桁の数字に対してのみ縦中横の処理が⾏われ、それ以外の数字は縦書きされます。text-combine-uprightにはall以外に、digits 2という値でその仕様を満たすことも可能です。しかしCSS4 の仕様*5で、実装しているブラウザがほとんどないため、使⽤を⾒送りました。
⾏頭のインデント
新聞では改⾏するたびに、⾏頭にインデントが次の画像のように⼊ります（図5.3）。
縦書きに限らず、⽇本語ではよく⾒られる処理だと思います。電⼦版*6でも⾏頭にスペースが空いていますが、これは全⾓スペースが⼊っているだけです。
今回はtext-indent というプロパティを使⽤し、CSS でこれを再現しました（リスト5.4）。
これで段落に対して1 ⽂字分インデントを上げることができました。さらに、⽂章の途中で次の段に移動した場合、⾏頭にインデントが⼊るのはおかしいので、これを打ち消すcontinuedというクラスを段に対して付けました。
フォントについて
新聞は独⾃規格の⼭です。さきほど紹介した紙⾯サイズだけでなく、フォントについても独⾃の規格が使われています。本紙では「Z 字」と呼ばれる扁平⽂字が使われており、そのサイズは1 ⽂字119 × 143 ミルスと決まっています。「ミルス」というのは1000 分の1 インチ（0.0254mm）で、紙⾯を作る際の最⼩単位となっています。
これをCSS で表すと、次のようになります（リスト5.5）。
扁平⽂字を実現するために、transformでフォントを変形させています。このプロパティは適⽤させた要素の中⼼を軸に変形するため、四⽅が空いてしまいます。そのため、transform-originで右上⽅に寄せています。
これだけでは不⼗分で、⾊々と調整が必要になってきます。調整にあたっては、主に次の2 点を⾏いました。
• フォントサイズの調整
• widthとheightの調整
まずフォントサイズに⾏った調整です。本来であればpaged.jsでは、上記フォントサイズでは⼤きく描画されてしまうため、0.55 倍に縮⼩しました。次に要素⾃体のサイズの調整についてです。transform-originを設定しているため、フォントを縮⼩すると、各要素も右上に縮⼩されます。すると、このようになってしまいます（図5.4）。
そのため、各要素のサイズを調整しなければいけませんでした。heightに関してはすべてに同じ値を⼊れれば良かったのですが、widthは⾏数に依存するためcss だけではどうにもできませんでした。この調整はかなり⾟かったです。
5.3 課題
最後に、今回解決できなかった課題について書いていきます。課題はさまざまにありますが、CSS の組版向け規格と縦書きとの相性の問題の⼀⾔にまとめられます。
5.3.1 CSS Regions
当初考えていた形として、grid で仕切った領域にCSS Regions で流し込むことで新聞のレイアウトができると考えていました。CSS Regions はWorking Draft の段階にある規格で、⽂書（コンテンツ）とデザインを分割して記述することを可能にする規格です。ある⽂書を複数の領域に流し込むことができます。たとえば、次のように記述した場合、図5.5 のように表⽰されます（リスト5.6）（リスト5.7）。
CSS Regions は、元はAdobe が提唱した規格で、今回のように複雑な印刷物のようなレイアウトの作成には強い⼒を発揮します。しかし、ほとんどのブラウザではサポートされていません。
Google Chrome では、以前、実験的な機能として提供されていましたが、パフォーマンスが悪いことなどを理由にサポートを切ってしまいました。今後はNo longer pursuingということで、実装されることはなくなってしまいました*7。現在はIE11 とEdge が部分的にサポートしているのみです*8。私は今回、css-regions-polyfill*9とEdge*10両⽅を利⽤してみました。しかし、どちらの場合も縦書きにした途端に、次の画像のようになってしまいました（図5.6）。
仕様書*11では、横書きの場合について多く説明しており、縦書きについては、writing-mode の仕様書のvertical-layout に準ずると、軽く触れられている程度です。原因は詳しく調べられていないのですが、仕様書に合わせて実装すると、縦書きが効かなくなるということでしょうか。
例え縦書きができたとしても、今後ブラウザでのサポートが期待できる規格ではないですから、テキストの流し込みはjs 側で⾏うべき処理だと思います。
5.3.2 その他検討した規格
CSS Regions の他にも検討した規格があります。それがCSS Shapes*12です。こちらもAdobe が提唱した規格で、テキストをさまざまな図形の周りに回り込ませることができます。たとえば、ある<div>要素にshape-outside: circle(50%)を適⽤させると、その要素に重なるように配置したテキストは、その円の周りを沿うように表⽰されます。
この規格の中に、shape-insideというプロパティがあります。shape-outsideの逆に、ある図形の中にテキストを⼊れられるというものです。しかしこのプロパティは現在、Editors Draft のCSS Shapes Module Level 2*13に定義されており、実装されているブラウザはありません。また、CSS Shapes のPolyfill もこれに対応していませんでした。
また、仮にshape-insideが使えたとしても、実装がきれいにできないことがあります。
たとえば、次の画像のように、記事の後ろの⽅が⾶び地になっている場合です（図5.7）。
shape-insideを利⽤したレイアウトは、紙⾯を図形で切り分け、その中に記事を流しこむという形を取ります。しかし、⾶び地のある記事だと、コンテンツを完全に分ける必要があり、あまりきれいではなくなってしまいます。こうした理由から、CSS Shapes の使⽤を⾒送りました。
5.4 おわりに
最終的にはブラウザ上で簡易的な新聞組版ができるようにしてみるというところまで考えていました。しかし、css のみでレイアウトを組むのは難しかったです。特に記事の流し込みはjavascript で操作すべきことでした。また、フォントをtransformで変形させる必要があることも難点でした。おそらく現状ではcanvas を使⽤するのがもっとも新聞を再現できるのではないでしょうか。実装に⼿間はかかってしまいますが、レイアウトの柔軟性やフォントサイズの調整を考えると、現状ではベストの選択肢になると思います。
また、今回は私が新聞の規格をあまり知らなかったこともあり、詳細に紙⾯の設計を詰められませんでした。新聞のレイアウトは整理部という部署で⾏われるのですが、あまり関わりがないので、正直なところ何が⾏われているかよく知りません。今回は整理部出⾝の⽅に⽤語や新聞の規格など教えていただいた情報を元に作成しました。
次作る際は、きちんと設計を詰めてみたいと考えています。
本紙ははじめてコンピュータによる新聞組版システムを取り⼊れた新聞です。当時のことは本になるほど困難を伴うものだったようです*14。今回css という巨⼈の肩に乗って簡易に再現してみることで、その⼀端を知ることができました。これをきっかけにCSS組版に挑戦してみてはいかがでしょうか。
著者：伊藤⼤晃/@isudzumi
r.nikkei.com の開発と電⼦版マーケット情報ページの運⽤をしています。業務とまったく関係ないことを書いてます。
140年の歴史ある会社が、AIやデータを駆使した開発を現場で実践しています。是非疑問や感想を #nikkei_dev_book をつけてツイートしてください！
全章を一括して購入されたい方はこちらの記事をご購入ください。
https://note.mu/nikkei_staff/n/n44623c9b9ab4
この記事を購入すると、この下に第５章だけのダウンロードリンクが表示されます。
ここから先は
¥ 100