日本語は縦書きの方が読みやすそうだし、新聞や雑誌のような感じで表示できないかと手探りしてみた結果と問題点。
デモ・ソースコード：
- CodePen
- React版 ( ソース )
テキストはこんな感じ：
<div id="container">
<p>吾輩は猫である。名前はまだ無い。</p>
<p>
どこで生まれたか頓と見當がつかぬ。何ても暗薄いじめじめした所でニャー／＼泣いて居た事丈は記憶して居る。吾輩はこゝで始めて人間といふものを見た。然もあとで聞くとそれは書生といふ人間で一番獰惡な種族であつたさうだ。此書生といふのは時々我々を捕へて煮て食ふといふ話である。然し其當時は何といふ考もなかつたから別段恐しいとも思はなかつた。但彼の掌に載せられてスーと持ち上げられた時何だかフハフハした感じが有つた許りである。掌の上で少し落ち付いて書生の顏を見たが所謂人間といふものゝ見始であらう。此の時妙なものだと思つた感じが今でも殘つて居る。第一毛を以て裝飾されべき筈の顏がつる／＼して丸で藥罐だ。其後猫にも大分逢つたがこんな片輪には一度も出會はした事がない。加之顏の眞中が餘りに突起して居る。そうして其穴の中から時々ぷう／＼と烟を吹く。どうも咽せぽくて實に弱つた。是が人間の飮む烟草といふものである事は漸く此頃知つた。
</p>
<p>
此書生の掌の裏でしばらくはよい心持に坐つて居つたが、暫くすると非常な速力で運轉し始めた。書生が動くのか自分丈が動くのか分らないが無暗に眼が廻る。胸が惡くなる。到底助からないと思つて居ると、どさりと音がして眼から火が出た。夫迄は記憶して居るがあとは何の事やらいくら考へ出さうとしても分らない。
</p>
<p>
ふと氣が付いて見ると書生は居ない。澤山居つた兄弟が一疋も見えぬ。肝心の母親さへ姿を隱して仕舞つた。其上今迄の所とは違つて無暗に明るい。眼を明いて居られぬ位だ。果てな何でも容子が可笑いと、のそ／＼這ひ出して見ると非常に痛い。吾輩は藁の上から急に笹原の中へ棄てられたのである。
</p>
<p>
漸くの思ひで笹原を這ひ出すと向ふに大きな池がある。吾輩は池の前に坐つてどうしたらよからうと考へて見た。別に是といふ分別も出ない。暫くして泣いたら書生が又迎に來てくれるかと考へ付いた。ニャー、ニャーと試みにやつて見たが誰も來ない。其内池の上をさら／＼と風が渡つて日が暮れかゝる。腹が非常に減つて來た。泣き度ても聲が出ない。仕方がない、何でもよいから食物のある所迄あるかうと决心をしてそろりそろりと池を左りに廻り始めた。どうも非常に苦しい。そこを我慢して無理やりに這つて行くと漸くの事で何となく人間臭ひ所へ出た。此所へ這入つたら、どうにかなると思つて竹垣の崩れた穴から、とある邸内にもぐり込んだ。縁は不思議なもので、もし此竹垣が破れて居なかつたなら、吾輩は遂に路傍に餓死したかも知れんのである。一樹の蔭とはよく云つたものだ。此垣根の穴は今日に至る迄吾輩が隣家の三毛を訪問する時の通路になつて居る。偖邸へは忍び込んだものの是から先どうして善いか分らない。其内に暗くなる、腹は減る、寒さは寒し、雨が降て來るといふ始末でもう一刻も猶豫が出來なくなつた。仕方がないから兎に角明るくて暖かさうな方へ方へとあるいて行く。今から考へると其時は既に家の内に這入つてたのだ。こゝで余は彼の書生以外の人間を再び見るべき機會に遭遇したのである。第一に逢つたのがおさんである。是は前の書生より一層亂暴な方で我輩を見るや否やいきなり頸筋をつかんで表へ抛り出した。いや是は駄目だと思つたから眼をねぶつて運を天に任せて居た。然しひもじいのと寒いのにはどうしても我慢が出來ん。吾輩は再びおさんの隙を見て臺所へ這ひ上つた。すると間もなく又投げ出された。吾輩は投げ出されては這ひ上り、這ひ上つては投げ出され何でも同じ事を四五遍繰り返したのを記憶して居る。其時におさんと云ふ者はつく／″＼いやになつた。此間おさんの三馬を偸んで此返報をしてやつてから、やつと胸の痞が下りた。吾輩が最後につまみ出され樣としたときに、此家の主人が騷々しい何だといひながら出て來た。下女は吾輩をぶら下げて主人の方へ向けて此宿なしの小猫がいくら出しても出しても御臺所へ上つて來て困りますといふ。主人は鼻の下の黒い毛を撚りながら吾輩の顏を暫らく眺めて居つたが。やがてそんなら内へ置いてやれといつたまゝ奧へ這入つて仕舞つた。主人は餘り口を聞かぬ人と見えた。下女は口惜しさうに吾輩を臺所へ抛り出した。かくして吾輩は遂に此家を自分の住家と極める事にしたのである。
</p>
<p>
吾輩の主人は滅多に吾輩と顏を合せる事がない。職業は教師ださうだ。學校から歸ると終日書齋に這入つたぎり殆んど出て來る事がない。家のものは大變な勉強家だと思つて居る。當人も勉強家であるかの如く見せて居る。然し實際はうちのものがいふ樣な勤勉家ではない。吾輩は時々忍び足に彼の書齋を覗いて見るが、彼はよく晝寐をして居る事がある。時々讀みかけてある本の上に涎をたらして居る。彼は胃弱で皮膚の色が淡黄色を帶びて彈力のない不活溌な徴候をあらはして居る。其癖に大飯を食ふ。大飯を食つた後で「タカチヤスターゼ」を飮む。飮んだ後で書物をひろげる。二三ページ讀むと眠くなる。涎を本の上へ垂らす。是が彼の毎夜繰り返す日課である。吾輩は猫ながら時々考へる事がある。教師といふものは實に樂なものだ。人間と生れたら教師となるに限る。こんなに寐て居て勤まるものなら猫にでも出來ぬ事はないと。夫でも主人に云はせると教師程つらいものはないさうで彼は友達が來る度に何とかゝんとか不平を鳴らして居る。
</p>
<p>
吾輩が此家へ住み込んだ當時は、主人以外のものには甚だ不人望であつた。どこへ行つても跳ね付けられて相手にしてくれ手がなかつた。如何に珍重されなかつたかは、今日に至る迄名前さへつけてくれないのでも分る。我輩は仕方がないから、出來得る限り我輩を入れてくれた主人の傍に居る事をつとめた。朝主人が新聞を讀むときは必ず彼の膝の上に乘る。彼が晝寐をするときは必ず其脊中に乘る。是はあながち主人が好きといふ譯ではないが別に構ひ手がなかつたから已を得んのである。其後色々經驗の上、朝は飯櫃の上、夜は炬燵の上、天氣のよい晝は椽側へ寐る事とした。然し一番心持の好いのは夜に入つてこゝのうちの小供の寐床へもぐり込んで一所にねる事である。此小供といふのは五つと三つで夜になると二人が一つ床へ入つて一間へ寐る。余はいつでも彼等の中間に己れを容るべき餘地を見出してどうにか、かうにか割り込むのであるが運惡く小供の一人が眼を醒ますが最後大變な事になる。小供は―殊に小さい方が質がわるい―猫が來た／＼といつて夜中でも何でも大きな聲で泣き出すのである。すると例の神經胃弱性の主人は必ず眼をさまして次の部屋から飛び出してくる。現に先達て抔は物指で尻ぺたをひどく叩かれた。
</p>
</div>
CSS3 には段組みレイアウト(column)プロパティがあり、これに writing-mode: vertical-rlと text-orientation: uprightを加えると、それっぽい感じになる。
div#container{
writing-mode: vertical-rl;
text-orientation: upright;
columns: 17em;
display: block;
width: 75%;
margin: 0 auto;
padding: 2em 1em;
}
けれど、包含するボックスの高さ計算は１段目のみしか行われないようで、以下のようになってしまう。
これをなんとかするには、段数(column-count)かコンテナの高さ(height)いずれかを明示的に指定しなければいけないようだ。けれどテキストが長文だった場合など、段数の指定は自動的にしてほしいもの。それに多段組み表示はちゃんとできているので、その高さ値さえ入手できればなんとかなりそうではないか。
調べてみると、scrollHeightプロパティでoverflowしたテキスト分も含めた高さを取得できるようなので、それを指定：
function adjustHeight(){
let container = document.getElementById('container');
container.style.height = container.scrollHeight + 'px';
}
これをページロード後に起動。ついでにウィンドウサイズが変更された時も反映してほしいので：
window.addEventListener('load', adjustHeight);
window.addEventListener('resize', adjustHeight);
こんな感じになった:
しかし何故か左側に隙間ができてしまっていたりする上に、chrome ではまだ一行分テキストがはみ出てしまう時もあったり、この状態でブログ記事等に使えるのかどうかというと、ちょっと微妙かもしれない。