縦書きレイアウトです


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

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

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

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

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

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

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

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