writing-mode: vertical-rl を指定して縦書きにすると印刷プレビューで縦にならないです・・・

Question

writing-mode: vertical-rl; をCSSで指定して文字を縦に表示しています。

                <td class="vertical-text">縦書きにしたい</td>
                <td class="vertical-text">縦書きにしたい</td>
                <td class="vertical-text">縦書きにしたい</td>

.vertical-text {
  writing-mode: vertical-rl;
  height: 30%;
}

しかしこれで表示した画面に対して印刷プレビューを出すとその部分が横になってしまっています。(chromeでやってます)
ブラウザ上で通常は縦に表示されていますが、印刷プレビューではその部分がまさに無効になっているようです。印刷したい画面なのでそこで無効になっては困るのですがこちらの直し方をご教示いただけないでしょうか？

以上よろしくお願いいたします。

追記

よく見るとその画面で印刷プレビューが出ると縦書きだったところがプレビュー上で横書きになってしまうだけでは無くプレビューを消した後元々の画面上も横書きになってしまっていました。開発者モードで確認してもCSS上は何も変わっていないように見えるのですが、なぜか見え方が変わっています。なぜプレビュー後このようになってしまうのでしょうか・・・？

追記2

無くプレビューを消した後元々の画面上も横書きになってしまっていました

こちら開発者ツールから確認すると下記のようにwriting-mode: vertical-rlにチェックがついていて有効になっているように見えますが実際にはこれは無効になっているようで、一度そのチェックを外してから再度チェックを入れると元の縦書きに戻ります。なぜこのような現象が起こるかわかりません。このCSSだけこのように無効になってしまいます。

Comments

[int32_t]

FirefoxとSafariだと印刷以前に表示がおかしくなりますね。<p> だと印刷でも縦書きになるようなので、テーブルと縦書きの組み合わせがどのブラウザでもバグっているのかもしれません。

Answer 1

<td> を縦書きにするのは各ブラウザとも期待通り動かないようです。<td>の中にもう1つ要素を入れて、そちらを縦書きにすることで回避するのはいかがでしょうか。

.vertical-text div {
  writing-mode: vertical-rl;
  height: 30%;
}

   <td class="vertical-text"><div>縦書きにしたい</div></td>
   <td class="vertical-text"><div>縦書きにしたい</div></td>
   <td class="vertical-text"><div>縦書きにしたい</div></td>

Comments

[Hayato1201]

こちらでできました！ありがとうございます。