スポンサーリンク

JavaScriptで縦書きに挑戦 (練習編)

「縦のものを横にもしない」と言えば、ひどくものぐさであることの例えですが、コンピューターで横のものを縦にするのって、なにかと大変です。

というわけで(?)Web上の縦書き表示に挑戦してみました。要はこういう文章(↓)をですねぇ

じゅげむじゅげむごこうのすりきれかいじゃりすいぎょのすいぎょうまつうんらいまつふうらいまつくうねるところにすむところやぶらこうじのやぶこうじぱいぽぱいぽぱいぽのしゅーりんがんしゅーりんがんのぐーりんだいぐーりんだいのぽんぽこぴーのぽんぽこなーのちょうきゅうめいのちょうすけ

寿限無、寿限無
五劫の擦り切れ
海砂利水魚の
水行末 雲来末 風来末
食う寝る処に住む処
やぶら小路の藪柑子
パイポパイポ パイポのシューリンガン
シューリンガンのグーリンダイ
グーリンダイのポンポコピーのポンポコナーの
長久命の長助

こう表示(↓)しようって話です。





























































































寿



寿

 



































































































































はじめはCSS使えば簡単じゃん!と思ってたんですが、writing-mode ってプロパティは今のところIE(5.5以上)以外では効かないという罠・・・orz

そんなわけで、仕方なくJavaScriptでテーブルを組んで並び替えることにしました。ソースは以下のとおりです。

謝辞:
 タグを判定する部分の正規表現は、HODADE SYSTEMSさんの「正規表現サンプル(HTMLタグを削除する(記号で囲まれた文字の削除))」を使わせていただきました。ありがとうございました。

参考リンク
 ・縦書き用スタイルシート:縦書きWebページプロジェクト
 ・縦書き JavaScript
 ・縦書き文庫

スポンサーリンク
コメント
Verify your Comment
Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Working...
Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.

Working...

コメントを投稿
トラックバック

このページのトラックバックURL:
https://www.typepad.com/services/trackback/6a01310f1f31c0970c0120a8ba977f970b

このページへのトラックバック一覧 JavaScriptで縦書きに挑戦 (練習編):

おすすめの記事と広告

プロフィール


  • 書いてる人:夢界 陸

    名古屋在住のおっさん。
    プログラミングやガジェットの話など、 日々の興味を徒然と綴っています。



    Twitterやってます @mukairiku

    運営サイト
    www.mukairiku.net

ブログ内検索

Licenses

  • Creative Commons License

OTHER

  • このブログのはてなブックマーク数

Blog powered by TypePad

スポンサーリンク