バックログも縦書きにしたい

縦書きの時はバックログも縦書きにしたい。

CSS変更で普通に出来んじゃね?と思ったらこうなった。何故だ。
log_vertical

結局のところ、原因はよくわからないのですが、
layer_menu に直接指定してる align=”center” が原因なようで、消したらこうなった。
log_vertical_2

ただ、layer_menu の指定を変えてしまうと、他に支障が出る可能性があるのであまり変更したくない。
もう面倒くさいので position で位置設定しちゃおう!
width 90%、height 80% なんだからと、単純に top 10%、left 5% にしても微妙にセンターにならず。
Left 0 でもLeft側に13px程の空きが出来る。もう意味がわからないorz
box-sizing設定してるとまた微妙に違うと思われますが、left 3% くらいでだいたいcenterかなー?
うーん適当すぎる…。ちゃんと計算すりゃいいんですけどね!

backlog.html

これでとりあえず縦書きにはなると思われます…。
というか、log_bodyのstyleを消して、tyrano.cssに書いた方が色々やりやすいとは思いますです。

 <div class="log_body" style="border:solid 1px gray;width:90%;height:80%;overflow-y:scroll;padding:5px" align="left"></div>
  ↓
 <div class="log_body" style="border:solid 1px gray;width:90%;height:80%;overflow-x:scroll;padding:5px;writing-mode:vertical-rl;-webkit-writing-mode;vertical-rl;position:absolute;top:10%;left:3%;" align="left"></div>

kag.menu.js

このままだと、ログ表示時は常に最初の行が表示されちゃうので、表示時のスクロール位置を変更しないとならないです。
displayLog のとこ

layer_menu.find(".log_body").scrollTop(9999999999);
  ↓
layer_menu.find(".log_body").scrollLeft(0);

注意横スクロール

マウスでログのスクロールはできません。横スクロール対応マウスなら出来るかも?
jQueryで何とか出来るのかな?

出来た。うう。なんかたぶん、特に記載する必要もない程度の事っぽいけど、ちょっと苦労したので。

参考サイト

マウスホイールでテキスト進行&バックログスクロール&メニュー閉じプラグインもどき | SOroom
jQueryでマウスホイールの上下イベントを取得 + 余韻をつけたイージングスクロールを実装する実験 | BlackFlag
ホイール系イベント2014年版クロスブラウザ|Web制作 W3G
スクロール位置や要素の座標を取得する | cly7796.net
縦書きWeb普及委員会
縦書きの指定 – CSS3ウェブブラウザ実装メモ – 血統の森 web実験小屋

バックログ関係は、できたら纏めてプラグイン化しちゃいたいけど、変更箇所が多すぎて微妙かもしれない。

関連記事

Pocket
LINEで送る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です