異体字セレクタを含む漢字が縦書きのウェブページでうまく表示されないときの対策

異体字セレクタを含む漢字の出力

異体字セレクタを指定すれば、漢字の細かい字形を区別して出力することができる ^[1] 。例えば、以下の「朝ご飯の前に、父と愉快に遊ぶ」という文に、適切な異体字セレクタを指定すれば、下段のような字形で出力することができる。

上に挙げた例のソースは以下の通りである。

<div>
  <h2>横書き</h2>
  <h3>異体字セレクタなし</h3>
  <p>朝ご飯の前に、父と愉快に遊ぶ。</p>
  <h3>異体字セレクタあり</h3>
  <p>朝&#xe0101;ご飯&#xe0102;の前&#xe0101;に、父&#xe0101;と愉&#xe0101;快に遊&#xe0101;ぶ。</p>
</div>

縦書きでの問題

横書きならばこのように異体字セレクタを使って細かい字形が出力できるのだが、縦書きではうまく出力できないことがある。

例えば、Google Chromeでウェブページを表示する場合、縦書きの文章の中で異体字セレクタがうまく働かず、異体字セレクタがないときの同じ字形が出力されてしまう ^[2] 。

また、Safariでは、字形は異体字セレクタの指定どおりに出力されるものの、90度回転した状態で出力されてしまう。

なお、Windows上でInternet Explorer 11を使ったところ、特に問題なく処理された。

解決方法

縦書きの文章の中で、異体字セレクタをうまく働かせるためには、CSSで text-orientation を upright と指定すればよい ^[3] 。

例えば、以下のようなHTMLがあるとする。

<div class="tategaki-box">
  <h2>縦書き</h2>
  <h3>異体字セレクタなし</h3>
  <p>朝ご飯の前に、父と愉快に遊ぶ。</p>
  <h3>異体字セレクタあり</h3>
  <p>朝&#xe0101;ご飯&#xe0102;の前&#xe0101;に、父&#xe0101;と愉&#xe0101;快に遊&#xe0101;ぶ。</p>
</div>

ここで、tategaki-boxというクラスのCSSを以下のように設定すれば、縦書きの文章の中でも異体字セレクタがうまく働くようになる。なお、以下のCSSの2行目から4行目は縦書きにするための設定であり、5行目と6行目が異体字セレクタをうまく働かせるための方法である。

.tategaki-box {
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  -webkit-text-orientation: upright;
  text-orientation: upright;
}

上記のCSSを適用すると、以下のように出力される。

上記の例は、Google Chromeの出力例であるが、FirefoxやSafariでも先ほど挙げたCSSで問題を解決できる。

1. ただし、対応するフォントが必要となる。 [↩]
2. Windows版でもOS X版でも同じ問題が発生する。また、Firefoxでも同様にうまく出力されない。 [↩]
3. 原理的に言えば、text-orientation を upright と指定すると、すべての文字が正立した状態で表示されるようになる。このため、この指定をかけることで、英字なども正立した状態になる場合がある。 [↩]