縦書きレイアウトです。


如何ですか。
スタイルシートだけで縦書きを実現してみました。
スタイルの記述によって、句読点や小さいっなどの
位置調整を行っています。
　★縦書きページのつくりかたは↓こちら。
　★スタイルシートのサンプルは↓こちら。

いちいち句読点や促音が出るたびにスタイルタグを
打ち込んでいくのも面倒なので、それらの位置調節を
しつつ、括弧「」（）などを縦書き字形に変換する
スクリプトを書いてみました。↓こちら。
このスタイルシートは現在、既に更新を停止していま
す。
おそらく現状でも、割と良い具合に縦書き表示ができ
ると思いますが、将来の保証は致しかねます。
…というわけで、このスタイルシートでは不満だ…というときは、より簡単に、綺麗な縦書きレイアウトを実現できるJavaScript・h2v.jsをお試しください。

さて、どういうスタイルを適用しているかといいますと、
  • 文を一行ごとに、幅が一文字分の<div>要素で括る。
  • 句読点や小さい「っ」は、放っておくと日本語の禁則処理で前の文字の真横に表示されるので、スタイルシートで禁則処理を外すように指定。
  • さらに、このままだと句読点などの位置が気持ち悪いので、<span>で括って表示位置を調整。
  • 横書きと縦書きで字形が異なる記号など(括弧や長音記号、〜や…など)は、90度回転させて表示。
…まぁ、それだけなのですが。

FireFox / Safari / Chrome / Opera / IEの各ブラウザで、なんとなく良い感じに表示されます。非常に古いバージョンのブラウザの場合、綺麗に表示されないことがあります。

一応、縦書き用のスタイルシートとHTMLのサンプルを載せておきます。
ただ、手動でガシガシ書くのはむっちゃ時間がかかります。

縦書きレイアウトのWebページを作ってみたいときは → つくりかたをご覧ください。

縦書き用スタイルシートの説明は → こちら、縦書きページのサンプルをご覧になりたい方はこちらのページへどうぞ。

横書きテキスト→縦書きhtml変換スクリプトはこちらのページで試す事ができます。