CSS3 で縦書き+四分空け組

明治時代などにしばしば用いられていた四分空け組ってスタイルシート使えば再現できるんじゃね、と思ったのでやってみた。

サンプル

図書カード：吾輩ハ猫デアル

また、これを近代デジタルライブラリーの画像を参照しそれをできるだけ再現しようと本文を組んだ。

近代デジタルライブラリー - 吾輩ハ猫デアル. 上

ワガハイハ
ネコデ
アル　✿✿🐈
🐈🍲
🐈

〈第一〉　　　　　　　　　　　　　　　夏　目　漱　石

　吾輩は猫である。名前はまだ無い。
　どこで生れたか頓と見當がつかぬ。何ても暗薄いじめじめした所でニャー〳〵泣いて居た事丈は記憶して居る。吾輩はこゝで始めて人間といふものを見た。然もあとで聞くとそれは書生といふ人間で一番獰惡な種族であつたさうだ。此書生といふのは時々我々を捕へて煮て食ふといふ話である。然し其當時は何といふ考もなかつたから別段恐しいとも思はなかつた。但彼の掌に載せられてスーと持ち上げられた時何だかフハフハした感じが有つた許りである。掌の上で少し落ち付いて書生の顏を見たが所謂人間といふものゝ見始であらう。此の時妙なものだと思つた感じが今でも殘つて居る。第一毛を以て裝飾されべき筈の顏がつる〳〵して丸で藥罐だ。其後猫にも大分逢つたがこんな片輪には一度も出會はした事がない。加之顏の眞中が餘りに突起して居る。そうして其穴の中から時々ぷう〳〵と烟を吹く。どうも咽せぽくて實に弱つた。是が人間の飮む烟草といふものである事は漸く此頃知つた。
　此書生の掌の裏でしばらくはよい心持に坐つて居つたが、暫くすると非常な速力で運轉し始めた。書生が動くのか自分丈が動くのか分らないが無暗に眼が廻る。胸が惡くなる。到底助からないと思つて居ると、どさりと音がして眼から火が出た。夫迄は記憶して居るがあとは何の事やらいくら考へ出さうとしても分らない。
　ふと氣が付いて見ると書生は居ない。澤山居つた兄弟が一疋も見えぬ。肝心の母親さへ姿を隱して仕舞つた。其上今迄の所とは違つて無暗に明るい。眼を明いて居られぬ位だ。果てな何でも容子が可笑いと、のそ〳〵這ひ出して見ると非常に痛い。吾輩は藁の上から急に笹原の中へ棄てられたのである。
　漸くの思ひで笹原を這ひ出すと向ふに大きな池がある。吾輩は池の前に坐つてどうしたらよからうと考へて見た。別に是といふ分別も出ない。暫くして泣いたら書生が又迎に來てくれるかと考へ付いた。ニャー、ニャーと試みにやつて見たが誰も來ない。其内池の上をさら〳〵と風が渡つて日が暮れかゝる。腹が非常に減つて來た。泣き度ても聲が出ない。仕方がない、何でもよいから食物のある所迄あるかうと决心をしてそろりそろりと池を左りに廻り始めた。どうも非常に苦しい。そこを我慢して無理やりに這つて行くと漸くの事で何となく人間臭ひ所へ出た。此所へ這入つたら、どうにかなると思つて竹垣の崩れた穴から、とある邸内にもぐり込んだ。縁は不思議なもので、もし此竹垣が破れて居なかつたなら、吾輩は遂に路傍に餓死したかも知れんのである。一樹の蔭とはよく云つたものだ。此垣根の穴は今日に至る迄吾輩が隣家の三毛を訪問する時の通路になつて居る。偖邸へは忍び込んだものの是から先どうして善いか分らない。其内に暗くなる、腹は減る、寒さは寒し、雨が降て來るといふ始末でもう一刻も猶豫が出來なくなつた。仕方がないから兎に角明るくて暖かさうな方へ方へとあるいて行く。今から考へると其時は既に家の内に這入つてたのだ。こゝで余は彼の書生以外の人間を再び見るべき機會に遭遇したのである。第一に逢つたのがおさんである。是は前の書生より一層亂暴な方で我輩を見るや否やいきなり頸筋をつかんで表へ抛り出した。いや是は駄目だと思つたから眼をねぶつて運を天に任せて居た。然しひもじいのと寒いのにはどうしても我慢が出來ん。吾輩は再びおさんの隙を見て臺所へ這ひ上つた。すると間もなく又投げ出された。吾輩は投げ出されては這ひ上り、這ひ上つては投げ出され何でも同じ事を四五遍繰り返したのを記憶して居る。其時におさんと云ふ者はつく〴〵いやになつた。此間おさんの三馬を偸んで此返報をしてやつてから、やつと胸の痞が下りた。吾輩が最後につまみ出され樣としたときに、此家の主人が騷々しい何だといひながら出て來た。下女は吾輩をぶら下げて主人の方へ向けて此宿なしの小猫がいくら出しても出しても御臺所へ上つて來て困りますといふ。主人は鼻の下の黒い毛を撚りながら吾輩の顏を暫らく眺めて居つたが。やがてそんなら内へ置いてやれといつたまゝ奧へ這入つて仕舞つた。主人は餘り口を聞かぬ人と見えた。下女は口惜しさうに吾輩を臺所へ抛り出した。かくして吾輩は遂に此家を自分の住家と極める事にしたのである。

やり方

アイデアとしては、ページの領域を枡目に区切って、そこに文字を入れていくというもので、実際には1字ずつ文字が入った同じサイズのマスを積み上げていくということを行っている。これにより、句読点を前の文字と同じマスに入れてしまうことで、句読点が入っても文字間隔が変わらないようになっている。

CSS

次の様なCSSを用意した。

.masu{ /* 1文字分のマス */
    display: inline-block;
    height: 1.25em; /* 0.25em 分のスペースをとる */
    letter-spacing: -0.1em; 
    white-space: nowrap; /* 句読点前での改行禁止 */
}
.masu_2{ /* くり返し記号用 2文字分の幅をとる */
    display: inline-block;
    height: 2.50em;
    letter-spacing: 0em;
    white-space: nowrap; /* 句読点前での改行禁止 */
    
    /* 2文字間のスペース分だけ引きのばす */
    transform-origin: center top;
    transform: scale( 1, 1.125 );
}
.tatepage{ /* 縦書きページ領域 */
    display: block;
    padding: 3em 0;
    
    /* 右寄せ */
    margin-left: auto;
    width: 100%;

    /* 行間 */
    line-height: 2em;

    /* 縦書きを設定 */
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    -o-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: tb-rl;
    vertical-align: top;
    
    /* 高さを設定(32文字+スペース0.25em*32 = 40em) */
    height: 40em;
}

HTML

HTML内には次の様に書く。

まず

<span class=tatepage>
〜
</span>

で囲った中(印刷された1ページに対応させている)に文章を書いていく。

その中に書く文章は、文字を1文字ずつ

<span class=masu>〜</span>

でかこむ。ただし、句読点「、」「。」は前の文字と一緒にかこむ。すなわち

<span class=masu>で</span><span class=masu>す。</span>

の様になる。この様にすることで句読点が入っても同じ間隔で文字を並べることができる。

また、くり返しを表すくの字点については、

<span class=masu_2>〳〵</span>

とする。

ある程度まとまった文章を表示させようとすると次の様になる。

<div>
<span class=tatepage>
<span class=masu>　</span><span class=masu>吾</span><span class=masu>輩</span><span class=masu>は</span><span class=masu>猫</span><span class=masu>で</span><span class=masu>あ</span><span class=masu>る。</span><span class=masu>名</span><span class=masu>前</span><span class=masu>は</span><span class=masu>ま</span><span class=masu>だ</span><span class=masu>無</span><span class=masu>い。</span><br>
<span class=masu>　</span><span class=masu>ど</span><span class=masu>こ</span><span class=masu>で</span><span class=masu>生</span><span class=masu>れ</span><span class=masu>た</span><span class=masu>か</span><span class=masu>頓</span><span class=masu>と</span><span class=masu>見</span><span class=masu>當</span><span class=masu>が</span><span class=masu>つ</span><span class=masu>か</span><span class=masu>ぬ。</span><span class=masu>何</span><span class=masu>て</span><span class=masu>も</span><span class=masu>暗</span><span class=masu>薄</span><span class=masu>い</span><span class=masu>じ</span><span class=masu>め</span><span class=masu>じ</span><span class=masu>め</span><span class=masu>し</span><span class=masu>た</span><span class=masu>所</span><span class=masu>で</span><span class=masu>ニ</span><span class=masu>ャ</span><span class=masu>ー</span><span class=masu_2>〳〵</span><span class=masu>泣</span><span class=masu>い</span><span class=masu>て</span><span class=masu>居</span><span class=masu>た</span><span class=masu>事</span><span class=masu>丈</span><span class=masu>は</span><span class=masu>記</span><span class=masu>憶</span><span class=masu>し</span><span class=masu>て</span><span class=masu>居</span><span class=masu>る。</span>
</span>
<div>

課題

現状大量のタグの挿入によりHTMLソースコードがかなり見難くなる。しかし、これらの縦組み用のタグはJavascript等により自動的に挿入させることが可能であると思う。そうすればかなり見通しが良くなるはずだ。
句読点が2分サイズで作られているので大きい。4分のスペースにきっちりおさめるにはそれ用の小さな句読点を用意した方が良いかもしれない。
句読点以外にも鉤括弧類(「」『』など)、及び鉤括弧類と句読点の組合せ(“。」”)などの対応も必要である。
禁則処理がない。また英文などが入った場合に個別に対応する必要がある。
全ての文字にspanタグを挿入せずとも letter-spacing に適切な値を設定すれば上手く行く可能性がある。ただしそれだとブラウザの禁則処理との兼ね合いが問題になってくるかもしれない。
ページ内で画像と組み合わせる場合の対応
ルビなどの対応

にせねこメモ

はてなダイアリーがUTF-8じゃないので移ってきました。

CSS3 で縦書き+四分空け組

サンプル

やり方

CSS

HTML

課題