サポートされていない CSS 機能と回避策

概要

writeHtml エンジンは、コンテンツを一度の前進パスでレンダリングし、先行するコンテンツを決して再レイアウトしません。一部の Cascading Style Sheets (CSS) の挙動は、このモデルに適合しません。このページでは、エンジンで適用されない特定の挙動を列挙し、それぞれについてサポートされている回避策を示します。モジュール単位の検証ステータスについては、CSS サポートマトリクスを参照してください。

これらの制限は範囲を限定したものであり、ロードマップを示すものではありません。各エントリでは、プロパティ全体ではなく、適用されない具体的な挙動を明示しています。

サポートされていない挙動

挙動	適用されない内容	回避策
position: absolute / position: relative のオフセットレイアウト	エンジンはボックスをドキュメント順に配置します。位置指定ボックスを通常フローから移動させる top/right/bottom/left のオフセットは適用されません。静的位置指定は機能します。	配置には、通常フロー内のテーブルまたは flex を使用してください。
名前付きの grid-template-areas	エンジンは、名前付きグリッドエリアによる配置を実装していません。明示的なライン指定によるグリッド配置は機能します。	明示的なグリッドラインで項目を配置するか、テーブルを使用してください。
改ページをまたぐ rowspan（機能低下）	rowspan のセルは 1 ページ内にレンダリングされます。テーブルがページ分割されると、ページ境界をまたぐ結合セルは Architectural Decision Record（ADR-007）に記載のとおりフラグメント化され、高さが大きすぎて分割できないセルでは UnsplittableContentException が発生します。	ページ分割時にも一体のまま保持する必要があるグループ化された行には、背の高い rowspan の代わりにフロートまたはカテゴリーヘッダー行を使用してください。
overflow: hidden の背景描画順序	overflow: hidden は背景の描画順序を変更せず、子要素の背景を祖先要素の角丸ボックスやサイズ指定ボックスにクリップすることもありません。	クリップを担う要素に背景を適用するか、クリップされた背景に依存しないようにしてください。
flex 項目内での横並びの折り返しテキスト	折り返しテキストを含む flex 項目は、トラック内では折り返されず、トラックからあふれます。	明示的なピクセル単位の列幅を指定した 2 列のテーブルを使用してください。
ゼロに解決されるパーセント指定の列幅	% 指定の列 width に解決可能な基準がない場合、0 としてパースされ、列の圧縮警告が発生します。	横並びの列には明示的なピクセル単位の幅を指定してください。

関連項目

• CSS サポートマトリクス — モジュール単位の検証ステータスとサポートされている機能。
• HTML: HTML+CSS to PDF rendering subsystem — これらの制限の背景にあるシングルパスモデル。
• HTML でテーブルをレイアウトする — オフセット位置指定や flex 折り返しテキストを置き換えるテーブルパターン。