h2v.jsに関するメモ。
Webページを縦書きに変換するJavaScript h2v.jsです。
とりあえず細かな不具合はだいたい潰せた感じ。ブラウザの種類ごとに、対処療法的に不具合回避しているので、ソースコードがぐちゃぐちゃです。まあ、最近のブラウザはJavaScriptの実行が爆速だし、正しく動作すればいいのよ…と酷い言い訳をしつつ、今後はコードを綺麗に書き直す作業がメインになるかと。
で、あとでコードを見直したときに「どーしてこんなコードを書いたのだろう」と考え込まないように、いろいろ自分用にメモしておきます。
☆考え方の基本。
☆ブラウザ間の動作の違い。
☆その他。
とりあえず、こんな感じか。
とりあえず細かな不具合はだいたい潰せた感じ。ブラウザの種類ごとに、対処療法的に不具合回避しているので、ソースコードがぐちゃぐちゃです。まあ、最近のブラウザはJavaScriptの実行が爆速だし、正しく動作すればいいのよ…と酷い言い訳をしつつ、今後はコードを綺麗に書き直す作業がメインになるかと。
で、あとでコードを見直したときに「どーしてこんなコードを書いたのだろう」と考え込まないように、いろいろ自分用にメモしておきます。
☆考え方の基本。
- クロスブラウザで、できるだけ表示に差異が出ないように配慮する。
- テキストの文字そのものを置換しないようにする。
例えば、横書き → 縦書き に変換するとき、括弧の類いなど、横と縦で字形が違う文字。こいつらを縦書き時に正しく表示させるためには、
- 横書き字形を縦書き字形に置換する（文字そのものを置換）
- 横書き字形を CSS で回転させて表示する
というわけで、CSS3 の transform プロパティに対応していないブラウザはサポート外。transform の代替で filter プロパティが使える iE8 はサポート対象。filter が使えるけれど CSS 周りでよく分からない不具合が出る IE7 はサポート外。
☆ブラウザ間の動作の違い。
パラメータ auto を true に設定すると、ページがロードされたときに自動的に 横→縦変換 が行われるけれど、
変換作業の途中で、要素の width や height の値を取得する必要があるのだが、
- Firefox および IE 9 では、DOMContentLoaded に AddEvent することによって、ページ内の全てがロードされるのを待たずに、横→縦変換すべき部分がロードされた時点で変換を開始できる。つまり、動作が速い。
- Webkit系ブラウザでも DOMContentLoaded が使えるのだが、ページ全体のロードが終わる前に要素のサイズを取得しようとすると不正な値が返ってくる。よって window の load 完了を待つ必要があるので、動作がちょっと遅い。
- IE 8 では、そもそも DOMContentLoaded が使えないので、window の load 完了を待つ。ちょっと遅い。
変換作業の途中で、要素の width や height の値を取得する必要があるのだが、
- IE 8 以外のブラウザでは document.defaultView.getComputedStyle で実際の値の取得が可能。
ただし Firefox 以外では、値を取得したい要素が、実際に document に接続されていなければ正しい値が得られない。
- IE 8 では element.currentStyle で取得できるのだが、px値ではなく 'auto' というとぼけた値が返ってくることがある。そのため IE 8 では、実際に要素を表示させて、 offsetWidth または offsetHeight の値を取得する必要がある。
☆その他。
- Mobile Safari には、フォントサイズなどを勝手に調整してくれちゃう機能があって有り難迷惑。それを止める方法 → こちら。
- Webkit のちょい古めのバージョンでは、margin の値が正しく取得できないバグがある。回避方法は → こちら。
- Opera のちょい古めのバージョンの一部では、フォントの種類の指定やフォントサイズの指定を正しく処理してくれない。お手上げ。
- Androidでは、OSに標準インストールされているフォントが何なのか、よく判らん。機種によってちがうのか？ だから縦書きレイアウトが若干ズレる可能性あり。仕方無い。
とりあえず、こんな感じか。
コメント