【HTML】文字・文章を縦書きで表示する「writing-mode」プロパティ

日本語の雑誌のように縦書きで表示する機能ですが、Internet Explorer独自のHTMLであり、まだChromeやFirefoxでは適用されていません。俳句や短歌などに使えばいいと思います。

セレクタ{writing-mode:値;}

lr-tb	通常どおり横書きで表示する。
tb-rl	文字・文章を縦横書きで表示する。

ただ「writing-mode: tb-rl;」はInternet Explorer独自のHTMLのため、GoogleのChrome、Firefoxでは効かないデメリットがあります。

この場合は、下記のように別途HTMLプロパティを書き加えることでメジャーのブラウザーでは縦書きで表示できます。

writing-mode: vertical-rl;　(右→左)

<style>
 .writingmode {
　 writing-mode: tb-rl;/* IE独自 */
　 writing-mode: vertical-rl;
　-moz-writing-mode: vertical-rl;
　-o-writing-mode: vertical-rl;
　-webkit-writing-mode: vertical-rl;
  }
</style>

「writing-mode: tb-rl;」はInternet Explorer独自のHTMLのため、GoogleのChrome、Firefoxでは効かないデメリットがあります。これを考えて、下記のように別途HTMLプロパティを書き加えることでメジャーのブラウザーでは縦書きで表示できます。

【CSS3】セレクタ{writing-mode:値;}

horizontal-tb	通常の横書きで、上から下方向に表示する（デフォルト）
horizontal-bt	通常の横書きで、下から上方向に表示する
vertical-rl	縦書きで、右から左方向に表示する。
vertical-lr	縦書きで、左から右方向に表示する。

writing-mode: vertical-lr;　(左→右)

<style>
 .writingmode {
　 writing-mode: vertical-lr;
　-moz-writing-mode: vertical-lr;
　-o-writing-mode: vertical-lr;
　-webkit-writing-mode: vertical-lr;
  }
</style>

「writing-mode: tb-rl;」はInternet Explorer独自のHTMLのため、GoogleのChrome、Firefoxでは効かないデメリットがあります。これを考えて、上記のように別途HTMLプロパティを書き加えることでメジャーのブラウザーでは縦書きで表示できます。

英語の正しい表示方法

上記サンプルのように、縦書き表示にすると、英単語が時計周りに横倒れになっている様子です。これを正しく立たせるには「text-orientation」を用いると垂直方向になります。

text-orientatione : upright ;

<style>
 .writingmode {
　 writing-mode: vertical-rl;
　-moz-writing-mode: vertical-rl;
　-o-writing-mode: vertical-rl;
　-webkit-writing-mode: vertical-rl;
　 text-orientation: upright; 
  }
</style>