7月7日、七夕。みなさんは短冊にどんな願いを込めましたか？ 渋谷インターネットアカデミーにて、「縦書きレイアウト実践セミナー」に参加してきました。
前半が３名の縦書き専門家によるセッション、後半が短冊を縦書きのＨＴＭＬで書いてみようというコーナーです。
まずは、総務省の通信規格課の深津さんのお話し。実はみなさんが使っているブラウザの多くは、すでに縦書きに対応しています。実はＩＥが先駆者で、２０００年ころからＣＳＳに縦書きプロパティーが用意されています。それに続き Safari、Chrome、Opera でも実装が進み、すでに対応しているんですね！ Firefox も、ナイトリー版は対応しています。次のアップデートでは通常版でも縦書きに対応するという噂。この記事が縦書きで表示される方は、すでに縦書き対応ブラウザです！ （※すみませんがこの記事は通常版のFirefoxでは一部段落が重なって表示されてしまうようです）
総務省では、各ブラウザで仕様の共通化を進めるための国際標準化活動や、縦書きテキストレイアウトの普及に向けた取組みを行っているということで、今後日本語のウェブ表現が向っていく方向（上から下）に期待します。
次は、ＮＴＴソフトウェアのメディア＆モバイル事業部、山本さんのお話し。縦なウェブページの事例紹介がありました。
縦書きは、みなさん試行錯誤しています。タイトルのような要素はテキストを縦に並べるより、画像で用意してしまうのが、一番お手軽な方法として、様々な場所で使われています。講演中の例ではなく改めて探してみた例ですが、共栄製茶株式会社さんのようなメニュー要素などは、画像で用意されています。Ｆｌａｓｈによる縦書きコンテンツも、割とよく見かけます。櫻山さんの「櫻山のストーリー」や、恋する鳥羽の「海女の歴史」を見てみてください。JavaScript による縦書き対応というのもよく見かけます。竹取ＪＳが有名で、例えばジャングル不動産さんの物件紹介のページのように、竹取ＪＳはサイトに組み込んで使うことができます。
みなさん様々に工夫して縦書きを何とか実現しようとしているのですが、もっと簡単にＣＳＳで指定するだけで、縦書きできるということがまだ広まっていないようです。手軽に縦書きのデザインができるとわかれば、もっと制作物が多くなり、ブラウザ実装や国際仕様化の推進も加速されていくわけですね。
最後に、慶応ＳＦＣおよび弊社ＢＰＳ取締役の榊原です。Ｗ３Ｃで仕様化が進められている具体的なプロパティの話しが出てきて、ここから実践的になっていきます。
縦書きと一口に言っても、日本の縦書きのように、文字が下に向って進み行が左に向かって進むパターンもあるし、モンゴルの縦書きのように、行が右に向かって進むパターンもあります。また、文字が下から上に向かって進む縦書きというのもあります。世界的に見ると稀な例ですが、国際標準を作るときにはこういう実例も仕様化するかしないか、慎重な議論が必要になってくるので、時間がかかるわけです。
日本語の縦書きは、ＣＳＳでは writing-mode: vertical-rl; と記述します。サイト全体を縦書きにしたければ body に、記事の一部を縦書きにしたければ div や span などに指定します。勧告前ですので、ベンダープレフィックスが必要です。Chrome および Safari 向けには -webkit-writing-mode: vertical-rl; を指定します。Firefox は -moz-writing-mode、Opera は -o-writing-modeです。ＩＥは先駆的に実装を始めた経緯があるため、値も異なり -ms-writing-mode: tb-rl; というように指定します。
縦書きコンテンツを作り始めると、数字や記号などのレイアウトに例外が多いことに気付きます。15のように、数字や記号を横に並べることを「縦中横」と言い、ＣＳＳでは text-combine-upright: all; などと指定します。HELLOのような縦向きの配置は「正立」と言い、text-orientation: upright; で指定します。また、HELLOのように字の頭が横を向くのは「横倒し」と言い、text-orientation: sideways; のように指定します。
このようなプロパティを駆使して、作った短冊がこちら。
ウェブページの仕様というのは、まず実装ありきです。２つ以上のブラウザ実装がある機能が、Ｗ３Ｃ（World Wide Web Consortium）という機関で議論され、作業草案（ＷＤ）、勧告候補（ＣＲ）、勧告案（ＰＲ）の段階を経て、勧告（Recommendation）として国際標準となります。縦書き機能は、ライティング・モードというモジュールで案が練られ、勧告候補の段階です。最終的に勧告になるまでの間も、各社のブラウザでは試行錯誤の実装が進み、コンテンツ制作者も各ブラウザの実装を見ながら縦書きページの制作をします。みんなが安定版の仕様でウェブページを記述するのはまだちょっと先のようですが、実装ありきで整備されていくので、現在の実装を信じて取り入れていくのが大事なのです。その意味で、今回の実践セミナーということなのですね。