縦書きスタイルシート、修正。

縦書き用スタイルシート、久しぶりに弄っていたら不具合発見。

Operaの一部のバージョンで、transform が効かない。

このスタイルシートでは、括弧や長音記号などを 横書き → 縦書き に変換する際に、CSS3の transformプロパティを使って 90度回転させています。ちゃんとクロスブラウザで確認していたのだけれど、Mac版Opera 10.5で閲覧してみたら、これが効いていない。

Syntax Errorが出てしまうのね。

いろいろ試行錯誤してみた結果、原因が判りました。

・エラーが出る書き方
-o-transform: rotate( 90deg ); 
-o-transform: translate( 40px, 50px );

・エラーが出ない書き方
-o-transform: rotate(90deg);
-o-transform: translate(40px, 50px );

()内の先頭に余計なスペースが入っていると、正しく認識してくれないみたい。rotateだけではなくて、matrix() や translateX() などでも同様です。

Windows版Operaだったり、別バージョンだと先頭にスペースが入っていても大丈夫な場合もあるのですが、いちおう安全のために縦書き用CSSを修正してみました。現在縦書き用スタイルシートの説明ページで紹介しているものは修正済みのバージョンです。

カテゴリ: