縦書きに苦戦しまくっている

縦書きサイトはまだまだ多くないし、ブログでやったら珍しかろうと縦書きのページレイアウトを組んでいるのだが、作るのがまた大変で大変で。
スクロール周りの処理がやっぱり辛いので、苦戦しまくっている。

とりあえず、横スクロールで巻物みたいに読める縦書きのブログなら簡単に作れるだろうと作り始めたが、面倒だらけ。現在、色々なブラウザを切りまくって、chrome最新とモバイルsafariくらいでしか検証していない。それ以外のブラウザは普通に横書き表示にしようかと考えている。

何かの参考にはなるかもしれないと、私のアホくさい縦書き実装の様子を、箇条書きダイジェストでお送りしましょう。

• 縦書きWeb普及委員会でCSS調べる
• とりあえず文字が縦に並んで喜ぶ。わーい
• 横スクロールっぽくレイアウト調整
• text-alignの感覚が変だ！感覚が変だー！
• iPhoneでツールバー邪魔だな（常に表示されるのが嫌）
• iPhoneで縦スクロールをなくす為にheightを100vhとかにしたがガクガクする（多分、アンドロインドもそうだと思う）
• 縦スクロールを無視すべく、fixedさせたコンテンツを上下左右中央表示にする方式に
• 横スクロールは、-webkit-overflow-scrolling: touchを入れる
• マウスでスクロールできへん・・・
• jquery-mousewheelというので縦スクロールを横スクールにする
• なんとなくは形になる
• 今までの過去記事が、なんか読みにくい・・・（縦書きは縦書きの文字選びがあることを知る）
• ( ^ω^ )『向きおかしいっしょ』
• 縦書きCSSの「upright」と「sideways」の意味がようやくわかる
• 「combine」の意味がようやくわかる
• ルビとかふってる場合じゃない
• WordPressの記事編集画面が横書きだから、記事のイメージがつきにくい。やりにくい・・・

あと今、画像をどうしようかなと悩んでいる。
ブログみたいにペッペと貼っていく画像。今まではカラムの横幅基準でやっていたけど、今度は縦幅を基準にすればいいんだろうか。モバイルで横に切れている写真を横スクロールで見ていく感覚がなんか違和感がある気がする・・。
でも縦に見切れた画像を縦スクロールして見ていくのも、昔は違和感があったような気もするし、慣れの問題なのかもしれない。

とりあえずiPhone5の横幅320で入るように300pxを最大幅にしているが、画像のサイズ感がちょっとしょぼい。

ところで、作ってる途中に「たてよこWebアワード」なるものが出ていたので見てみたが、縦書き・縦スクロールなんですね。オススメは。
素敵なサイトがいっぱいでございました。

でも横スクロールやりたいなぁ。文庫っぽく読めるのがやっぱいいもの。ブラウザの縦書きに合った横スクロールCSSプロパティとかないのかなぁ。対応、進まないかなぁ。