CSS を使用してクロスブラウザ互換の縦書きテキスト レンダリングを実現するにはどうすればよいですか?

CSS を使用したクロスブラウザー縦書きテキストレンダリング

Web 開発の領域では、テキストを縦方向に表示するという課題が長い間頭を占めてきました。プログラマーの。複数のブラウザ間でこの効果を実現し、普遍的な互換性を確保することは、長年の探求でした。

理想的なソリューション

最適なソリューションは、CSS 変換の導入によって現れました。 -webkit-transform、-moz-transform、transform などのプロパティと回転値を利用することで、開発者はテキストを簡単に 90 度回転して垂直方向の配置を実現できます。

クロスブラウザ実装テキストの回転

IE6、Firefox 2、Chrome などのさまざまなブラウザとの互換性を確保するため、 Safari および Opera では、次の CSS ルールを使用できます:

.rotate {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);

  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;

  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

古いバージョンのブラウザのフォールバックとして、次の CSS ルールを使用して、Firefox 3.5 または Safari/WebKit で同様の効果を実現できます。 3.1:

.rot-neg-90 {
  -moz-transform: rotate(270deg);
  -moz-transform-origin: 50% 50%;
  -webkit-transform: rotate(270deg);
  -webkit-transform-origin: 50% 50%;
}

これらの CSS ルールを Web デザインに組み込むことで、クロスブラウザーで縦書きテキストを簡単に表示できます互換性を確保し、プラットフォーム間で視覚的に魅力的なタイポグラフィをユーザーに提供します。

以上がCSS を使用してクロスブラウザ互換の縦書きテキスト レンダリングを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。