ちょうど今、現在進行系で「縦書きデザイン」のWordpressテーマを作っているところです。そこでルビとかの表現についてチェックを行ったので、その覚え書きとして残しておきたいと思います。

ルビ関連

Firefox Version:53.0.2

 完璧に実装されています。表示も美しい。ちゃんと行間幅に収まるようデフォルトでレイアウトされています。

Google Chrome Version:58.0.3029.110

 残念ながらバグありです。表示も汚く、ルビが存在する行の幅が異様に広がり、調整もできません。ルビ関連のCSSも未実装の模様。

 バグの内容は以下の通り。

<p>hoge<ruby>hoge<rp>(</rp><rt>hoge</rt><rp>)</rp></ruby></p>

 上記の状態では(汚いけれど)正常に表示されますが、

<p><span>hoge<ruby>hoge<rp>(</rp><rt>hoge</rt><rp>)</rp></ruby></span></p>

 このようにp要素の内部でspan要素を用いてRuby要素部分を囲むと、ルビ適用部分のテキストだけ空白表示になる。(文字自体は存在するものの、見えない状態)

 

Writing-Mode(縦書き)関連

 ブラウザバージョンは上記のとおり。どちらも縦書きに関しての実装は終わっており、普通に表示されます。

 ただし、再現条件は不明ですが「横スクロール時に背景色が崩れる」不具合に遭遇しました。

 htmlにbackground:rgb(255,255,255)を指定しておき、あとの要素は未設定――つまり、透過してhtmlの背景色を表示するはずが、何故か透過せず「どこからともなく出てきたrgb(0,0,0)」がブロック状に表示されたのです。

 スクロールする要素に対してもbackground:rgb(255,255,255)を設定することで解決しましたが、どうも私の環境では「ウィンドウサイズが一定以下まで小さくなると発現」する不具合だったようで、スマートフォンサイズで表示テストを行った際に発覚しました。一般的なPCサイズで表示確認をしていると発現しないものだったので、危うく見落とすとろこでした。

 

フォント関連

 縦書き用フォントは自前で作成する必要があります。GoogleFonts(アーリーアクセス)で提供されている日本語フォントは、おそらく全て「横書き用に作成」されていますので、そのまま縦書きにすると一部の文字「。」とか「、」とかの表示がえらいことになります。

 自前でフォントを用意するとなると「Webフォント」として配信することになりますが、このフォントファイルのサイズが大きすぎると使えません。だいたい1~2MBくらいに収めるのがベストです。

 武蔵システムさんが提供している「サブセットフォントメーカー」と「WOFFコンバータ」を使い、ライセンスに問題のない明朝系フォントから自前のWebフォントを作ります。

 なお、この際に注意してほしいのですが、一部の文字は縦書き用で出力しても縦書き用になりません。

 ――
 ↑この表現をするための「―」

 ……
 ↑よくある三点リーダ「…」

 この二つは要注意です。

 このような場合は該当文字を<span></span>で囲み、CSSでtext-combine-upright:all;を指定する必要があります。

 

IE

 知らない。滅んでくれ。-ms-writing-modeで一応縦書きに出来る(らしい)

 

Edge

 縦書きは対応してる(はず)だけどまだテストしてない。

 


 ざっとこんなところでしょうか。