ネットで見かけなかったので書いておきます。
動作確認ブラウザ
- Mozilla Firefox 90.0.2(64bit)
- Microsoft Edge 92.0.902.55 (公式ビルド) (64 ビット)
方法
CSSでいくつかの指定をするだけです。
コード
百聞は一見にしかず。
HTMLファイルのテキストを載せておきます。CSSはこの中の<style>要素で**ルート要素（html要素）**に対して指定しています。（外部CSSファイルにしてxmlファイルから指定しても効果がありました。xmlファイルの場合も、ルート要素に対して同様に指定します。）
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>たて書き</title>
<style>
html{
width:97%;
height:85%;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
margin:1em 0;
padding:1em;
column-count:1;
column-rule-style:solid;
}
p{text-indent:1em}
</style>
</head>
<body>
<p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん
<p>がぎぐげご、ざじずぜぞ、だぢづでど、ばびぶべぼ、ぱぴぷぺぽ
<p>あいうえお、かき...（以下くり返し）
</body>
</html>
結果
（下の画像を参照。）マウスで縦スクロールができるようになりました。横幅はブラウザの表示幅（の97%）、高さはブラウザの表示高さ（の85%）に設定、段組の境界線も表示しています。
スクロール前（Firefox）
スクロール中（Firefox）
Edge
Microsoft Edge では、行の幅が Firefox より狭く表示されました。このあたりは工夫の余地がありそうです。