縦書きWebページ作成スクリプト。

「青空文庫を縦書き表示」で、スタイルシートを使ってWebページ上で縦書きレイアウトを実現してみたのが、早1年前。

遂に「縦書きのホームページを作成する為の支援スクリプト」の公開です。

　　→ 縦書きWebページ作成スクリプト｜縦書きWebページプロジェクト

通常の横書きテキストから、縦書きレイアウト用のhtmlコードを生成します。縦書きをあなたのページで実現させる為にはcssの設定などが必要ですが、そんなに面倒なことは無いと思います。その辺りの説明はコチラ。

　　→ 縦書きHowTo｜縦書きWebページプロジェクト

この縦書きレイアウトに使用するスタイルシートそのものの説明はコチラ。

　　→ 縦書き用スタイルシート｜縦書きWebページプロジェクト


ブラウザの種類やPCにインストールされているフォントの種類によって、若干(かなり?)見苦しい感じになってしまうこともありそうですが、とりあえず ブラウザ / OS / フォントの問題をできるだけ排除するように出来ている筈です。

「Web上で縦書き」というと、<table>タグを使って表を作成して、表の右上のマスから順に一文字ずつ文字を入れてゆくという方法もありますね。その方法だと、コーディング後のhtmlを見ても元の文章が何だったのか非常に判りづらくなってしまいます。対して、このスタイルシートを使った方法だと、元の文章が比較的判りやすい。つまり後々のメンテナンスが楽。それから...↓

この文章の一部をマウスを使
っ
て選択してみてください
。
通常の横書きテキストと同じようにコピ
⼁
／
ペ
⼁
ストでき
る筈です
。
もちろん
、
横書きと縦書きで字形が異なる記号
などは
、
縦書きの字形でコピ
⼁
されてしまいますが
。
それから
、
例えばこのペ
⼁
ジ内で
﹁
縦書き
﹂
という文字列
を検索してみてください
。
縦書きレイアウトに含まれる
﹁
縦書き
﹂
という語句も
、
ち
ゃ
んと検索されましたね
。
このように
、
テ
⼁
ブルタグを使
う方法と違い
、
スタイルシ
⼁
トで記述すると文章が必要以
上には
﹁
ぶつ切り
﹂
にならないので
、
ペ
⼁
ジ内で文字列を
検索する場合
、
また検索エンジンが
Ｗ
ｅ
ｂ
ペ
⼁
ジのテキス
トを収集する場合に有利です
。


ということで、みなさんも縦書きホームページにチャレンジしてみませんか。

カテゴリ:

タグ: