縦書きスタイルシート、修正。
縦書き用スタイルシート、久しぶりに弄っていたら不具合発見。
このスタイルシートでは、括弧や長音記号などを 横書き → 縦書き に変換する際に、CSS3の transformプロパティを使って 90度回転させています。ちゃんとクロスブラウザで確認していたのだけれど、Mac版Opera 10.5で閲覧してみたら、これが効いていない。
Syntax Errorが出てしまうのね。
いろいろ試行錯誤してみた結果、原因が判りました。
()内の先頭に余計なスペースが入っていると、正しく認識してくれないみたい。rotateだけではなくて、matrix() や translateX() などでも同様です。
Windows版Operaだったり、別バージョンだと先頭にスペースが入っていても大丈夫な場合もあるのですが、いちおう安全のために縦書き用CSSを修正してみました。現在縦書き用スタイルシートの説明ページで紹介しているものは修正済みのバージョンです。
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を修正してみました。現在縦書き用スタイルシートの説明ページで紹介しているものは修正済みのバージョンです。
コメント