読者です 読者をやめる 読者になる 読者になる

にせねこメモ

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

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 に適切な値を設定すれば上手く行く可能性がある。ただしそれだとブラウザの禁則処理との兼ね合いが問題になってくるかもしれない。
  • ページ内で画像と組み合わせる場合の対応
  • ルビなどの対応