改造フォントとCSSで縦組にする 3

縦組の表示に肝心のCSSである。縦組にするには、ウェブページ全体を90度回転させなければならない。*1
Firefoxの場合は、body要素直下を全部divで括り、次のようなcssを使うことで良い感じに表示される。

@font-face {
  font-family: "TakaoMincho-vert";
  src: local("TakaoMincho-vert"), url(TakaoMincho-vert.otf) format("OpenType");
}
body {
    direction:rtl;
    font-size: 10pt;
}
body > div {
    position:absolute;
    direction:ltr;
    width: 40em;
    -moz-transform-origin: right top;
    -moz-transform: rotate(90deg) translate(100%, 0);
    font-family: "TakaoMincho-vert";
}

WebKitもCSS3のtransformに対応しているが、親要素がRTLでもブロックが右に付かない、回転させた要素が元のページからはみ出てもスクロールしないなどの理由でうまくいかなかった。

*1:ページを印刷するのなら必要ないけど。