compose-visuals-footguns

Compose のビジュアルに関する落とし穴：テーマ設定、エフェクト、チャート

本番環境の Kotlin および Compose Multiplatform アプリから集めた 36 の落とし穴です。それぞれの短いファイルが references/ にあります。各ファイルでは、適切なパターン、落とし穴（実際に発生する具体的な問題とその理由）、およびユーザー自身のツリーで実行するコマンドを示す「検証方法」のセクションを説明しています。

このインデックスの使い方。 これから書こうとしているコード、または解決しようとしている症状に照らして、以下の項目を確認してください。各項目にはトピックと、その項目を参照すべき症状が記載されています。コードや修正を提案する前に、該当する可能性のあるファイルをすべて Read ツールで読んでください。各ファイルは 150 行未満です。「検証方法」のコマンドでソースプロジェクトのパスが指定されている場合は、ユーザーのツリー内の対応するパスに置き換えてください。

相互参照。 この一覧にないファイル内にバッククォートで囲まれた落とし穴の名前がある場合は、隣接する領域のスキルに含まれています。../*/references/<name>.md を glob して開いてください。

テーマ設定、色、グラデーション、スクリーン

• smooth-scrim-gradient — アートワークを目に見える継ぎ目なくページの背景になじませるスクリーンを構築します。両端で傾きが平坦になる smoothstep イージング、レンダラー任せにせず Kotlin で補間する色の停止点、そして Color.Transparent ではなく独自の RGB 値を保持する透明な停止点を扱います。グラデーションオーバーレイの開始点や終了点にくっきりした線が現れる場合、フェードの中間が濁った灰色になったり両端より暗くなったりする場合、あるプラットフォームではきれいに見えるフェードが別のプラットフォームでは縞模様になる場合に使用します。
• angled-gradient-modifier — Compose のボックス全体に任意の角度で線形グラデーションを描き、両端がボックスの辺にぴったり収まるようにします。指定した角度から象限ごとに端点を求める式、対角線を回転すると行き過ぎる理由、最寄りの辺にクランプすると角度が歪む理由、そしてグラデーション幅がなくなる縮退ケースを扱います。傾けたグラデーションが薄く見えたり隅で切れたりする場合、見た目の角度が指定した角度と異なる場合、同じグラデーションが横長のボックスと縦長のボックスで異なって見える場合に使用します。
• artwork-palette-theming — アートワークから抽出した色で画面の色を決めます。アクセントとページ全体の背景でどの抽出色を使うか、画像上のテキストの読みやすさを保つ輝度に応じた暗色化、そのために必要な 16 進数解析ヘルパー、抽出結果が空の場合やアートワークがない場合の対処方法を扱います。ページの背景がけばけばしくなったり明るすぎて読めなくなったりする場合、リストのスクロール中に点滅したり変化したりする場合、画面が色づかず透明または見えない状態で描画される場合に使用します。
• force-dark-immersive-subtree — Compose アプリの一部（暗いアートワーク上に描画される画面など）を暗いままにし、アプリの残りの部分はユーザーのライトテーマに従うようにします。完全なダークカラースキームと独自のトークンローカルをそのサブツリーに渡す方法を扱います。テキスト色のフラグだけでは不十分な理由、ボトムシートとダイアログはウィンドウ境界を越えてこれらのローカルを継承する一方、新たにルート化されたコンポジションは継承しないことが確認されている点も含みます。画像を背景にした画面のアイコンやボタンがライトテーマで灰色になり読めなくなる場合、その画面から開いたシートが不適切な色になる場合、強制的に暗くした画面でもシステムに夜間かどうかを問い合わせる場合に使用します。
• semantic-color-tokens-compositionlocal — Material のロールにない色（お気に入り状態のピンク、アクティブ行のハイライト、シマーの色調、アートワーク上に重ねるオーバーレイなど）を、staticCompositionLocalOf で提供する @Immutable トークンクラスにまとめます。テーマ値に static が適しているバイトコードレベルの理由と、トークンクラスとカラースキームのどちらに含めるべきかの判断基準も扱います。コンポーザブル内に 16 進数のリテラルが散在している場合、カラースキームのロールではないもののライトとダークで色を変える必要がある場合、staticCompositionLocalOf と compositionLocalOf のどちらを選ぶか迷っている場合に使用します。
• deterministic-title-placeholder-painter — アートワークのないアイテムに専用のカバーを用意します。タイトルをハッシュ化して安定したグラデーションを生成し、計測済みのテキストとバッジとともにカスタム Painter にまとめ、画像ローダーのプレースホルダー、エラー、フォールバック用スロットにそのまま渡せます。ハッシュを実際に決定論的にする方法、レイアウトパスの外でテキストを計測する方法、固有サイズの報告方法を扱います。カバーのない行がすべて同じに見える場合、生成色が実行やプラットフォームごとに変わる場合、プレースホルダーのテキストがタイルからはみ出す場合、null の画像モデルによって空白の四角形が残る場合に使用します。
• overflow-tilted-browse-card — カバーアートを傾け、クリップされた角からはみ出させるブラウズタイルを構築します。対角線が貼り付けた四角形ではなく切り抜きになる修飾子の順序、兄弟要素に必要な余白を決める回転後の境界ボックスの拡大、正方形でないタイルでは装飾のサイズを幅だけから決められない理由を扱います。回転した画像の角が切り取られる場合、傾いたアートとテキストがぶつかったり、アートの読み込み時にレイアウトが変わったりする場合、回転した子要素が親にクリップされず隣接要素を覆う場合に使用します。
• artwork-seeded-dynamic-scheme — アートワークから抽出した単一のシードを基に完全なトーンカラースキームを導出し、そのサブツリーだけをそのスキームでラップします。すべてのコントロールが手動で選んだ色ではなく、コントラストの釣り合ったロールを継承できます。シードの初期化に使ったセンチネルと比較してフォールバックする方法、スキームではなくシードをトゥイーンする方法、アニメーションの各フレームで再導出するコストを扱います。画面の色をアートワークに合わせたい場合、色付きのサーフェス上の前景テキストが読めなくなる場合、色の変化が目に見えるちらつきとして現れる場合に使用します。
• palette-state-parks-on-loading — パレット生成器は、自身のサスペンド箇所に到達する前に状態を Loading に切り替えるため、生成のたびに処理中の全期間にわたって色を返しません。生成が途中でキャンセルされると、再開する処理がないまま Loading 状態にとどまります。そのため、パレットを直接参照するサーフェスは null のフォールバックを描画します。エフェクトのキーはビットマップのみにする（または何も指定しない）必要がある理由、サスペンド後に設定する「完了済み」フラグでは完了を記録できない理由、最後に確定した色を別途保持する必要がある理由を扱います。アートワークから色を付けた画面が黒くなったり正しい色になったりする場合、同じアイテムが前回は正しく色づいたのに今回はそうならない場合、導出されたカラースキームが気づかないうちにフォールバックのままになる場合に使用します。
• gate-optional-effect-at-the-shared-primitive — オプションの装飾的なサーフェス処理に対するユーザーのオン／オフ設定を、それを描画する共通プリミティブ内に置きます。設定はテーマから、既定値をオンとする CompositionLocal として公開し、各呼び出し箇所でフラグを確認する必要をなくします。オフの場合も形状とヒット領域を維持し、描画方法だけを変える必要がある理由、既定値を false ではなく true にする理由、マテリアルを選ぶ呼び出し箇所と別のコンポーザブルを選ぶ呼び出し箇所の違いを扱います。設定の切り替えが対象となる一部のサーフェスにしか反映されない場合、制御対象のコンポーネントがプレビューで何もないボックスとして描画される場合、エフェクトをオフにするとレイアウトまで動く場合に使用します。
• shell-background-is-not-scheme-background — アプリのシェルがコンテンツパネルを colorScheme.background 以外の色で塗った時点で、末端が colorScheme.background に収束するすべてのグラデーション、スクリーン、フェードにくっきりした継ぎ目が生じます。装飾自体は正しく、背景色の到達先が画面上にないだけです。ページ背景の値を一つに定め、すべての装飾に渡す方法、有効な対処方法（シェルの色に合わせるか、独自の背景を描くか）、特定のフォームファクターで計測した固定値ではなく、装飾対象のコンテンツに対して matchParentSize で装飾のサイズを決める方法を扱います。画面の途中でグラデーションが目に見える境界とともに止まる場合、スマートフォンでは正しく見えるフェードがデスクトップウィンドウでは不自然な場合、ウィンドウのクロームを追加したことで変更していない画面まで崩れる場合に使用します。
• flat-twin-shares-geometry-not-material — ユーザー設定で同じコントロールの二つの描画（高コストな装飾付きとシンプルなもの）を切り替える場合、幅、バーの高さ、インジケーターのサイズ、インセット、幅の予算を計算するルールなど、すべてのジオメトリ上の判断を両方で一致させる必要があります。こうすれば切り替わるのはマテリアルだけで、レイアウトは変わりません。コンパイラーは別々のファイルで宣言された二つの定数を対応付けられません。また、スロットラムダとして渡されるアイコンの色を変える方法も扱います。これに作用できるのは CompositionLocalProvider(LocalContentColor) だけです。見た目の設定を切り替えると位置も動く場合、シンプルなバリエーションのインジケーターがアイテムからずれる場合、スロットラムダのアイコンに渡した色が反映されない場合に使用します。
• chrome-drawn-outside-the-theme-scope — アプリのテーマの内側ではなく兄弟要素として構成されたカスタムウィンドウタイトルバー、スプラッシュ、クラッシュダイアログは、ユーザーの設定にかかわらず、常にライトの MaterialTheme のフレームワーク既定スキームを読み取ります。しかもエラーは発生しません。保存されたモードから真偽値を決める処理を共有コンポーザブル関数として抽出し、クロームとテーマで判断が食い違わないようにする方法、テーマを再適用せず色をパラメーターとして渡す方法、意図的にテーマに従わせてはならない色を扱います。タイトルバーやダイアログがダークモードでもライトのままになる場合、クロームの色が設定より起動一回分遅れる場合、テーマ呼び出しより上にコンポーザブルを追加する前に使用します。
• ambient-tone-layer-behind-flat-pages — 画像がないページにも、画像を背景にした画面と同じ色付きの背景を与える、再利用可能な上部のグロー層です。ナビゲーション先のコンテンツの最初の兄弟要素として出力します。ナビゲーション先ではすでに要素が積み重なるため、ラッパーは不要です。トーンが null の場合にテーマ色で代用せず、グラデーションをページの色に溶け込ませる理由、スクロールに伴うオフセットを描画フェーズで処理する理由、リストの最初の項目をこの層より高くする必要がある理由、独自の層を維持すべき画面を扱います。フラットな設定ページやリストページがアプリの他の画面と調和しない場合、アプリがアイドル状態なのに何もないところにグローが表示される場合、リストのスクロール中にグローがずれて見える場合に使用します。

エフェクト、アニメーション、画像

• material-symbols-icon-system — すべてのアイコンを、1つのレシーバーオブジェクト上の生成済み ImageVector 拡張プロパティとして提供します。アイコンフォント独自の Compose ジェネレーターから取得することで、参照されていないアイコンをバイトコードのシュリンカーで削除できます。ジェネレーターへのリクエストと軸パラメーター、生成ファイルを拡張プロパティに変換する編集、状態アイコンの塗りつぶし／塗りつぶしなしのペア、ドローアブルリソースのままにする必要があるアイコンについて説明します。アイコンを追加または置き換えるとき、アイコンセットのウェイトや角のスタイルが不揃いになったとき、または Painter が必要な場所で ImageVector が指定されているという型エラーが表示されたときに使用してください。
• fit-icon-glyphs-to-the-live-area — 同じサイズのアイコンが同じサイズに見えるよう、アイコンの構築時にすべてのグリフをアイコングリッドの 20×20 の実描画領域に収めます。シンボルフォントのグリフは 2dp のパディングにまで広がります。最も遠くまで伸びた点を囲む円を基準にグリフのサイズを判断すると、1本の線だけが突き出ているグリフまで小さくしすぎてしまいます。また、小さな丸型アイコンボタンは、独自の形状でコンテンツをクリップします。同じサイズで描画したアイコンが並べると大小ばらばらに見えるとき、小さな丸型ボタンの中でアイコンの角が切れるとき、またはデバッグ用の輪郭線からグリフが枠をはみ出していることが分かったときに使用してください。
• liquid-glass-backdrop — Compose でバックドロップライブラリを使って光を屈折させる「液体ガラス」サーフェスを構築し、最も時間を浪費する3つの問題を回避します。デフォルトで方向性のあるリムのハイライトが小さな丸型ボタンではほとんど見えなくなること、ガラスの内側に配置したバックドロップソースが自身のガラスを参照してレンダリングフィードバックループを起こしシェーダーが停止すること、ソースに何も入っていないため平坦なページに灰色のコインのようなコントロールが描画されることです。ソースとサーフェスの分離、エフェクトを取り除くのではなく屈折させる価値のある背景を平坦なページに用意する方法、強制ダーク表示専用の白いデフォルト色合い、エフェクトスタック、押下ジェスチャーを監視のみにする方法、形状の問題と配置の問題を見分ける切り替え実験について説明します。ガラスサーフェスが平坦な角丸ボックスや灰色のコインとして描画されるとき、幅広のピル型ではリムが見えるのに丸型ボタンでは見えないとき、ライトテーマでグリフが消えるとき、または描画パスがシェーダー内でクラッシュするときに使用してください。
• shimmer-skeleton-loaders — 自身のサイズを測定するシマー修飾子と、読み込み中のリストの代わりに表示するスケルトンコンポーザブルを紹介します。修飾子が自身のサイズを取得する方法、シマーの下地となる色が重要な理由、クリップと背景の修飾子の順序で角の丸まり方が変わる理由、スケルトンの遅延リストでスクロールを無効にする必要がある理由について説明します。読み込み中のプレースホルダーを作成するとき、シマーが平坦なブロックとして描画されるとき、角丸のデザインなのに角が四角くなるとき、または描画の合間に目に見えて止まるときに使用してください。
• animated-gradient-border-ring — クリップしたボックス、全面サイズのグラデーション、その中央に配置した不透明な内側サーフェスを使って、カード、チップ、ボタンの周囲に回転するスイープグラデーションのリングを作ります。修飾子の順序が仕組みのすべてであり、ブレンドモードは使いません。また、SrcIn とオフスクリーンレイヤーを使う方式ではリングを描画できない理由と、そのレイヤーにかかるコストについても説明します。グラデーションが境界線ではなくサーフェス全体を覆うとき、リングが見えないとき、ウィジェットの背後にあるものにグラデーションがはみ出すとき、または複数並べるとスクロールが重くなるときに使用してください。
• hoist-the-flag-not-the-animation — フェードを動かす真偽値を共有し、トゥイーンは共有しないようにします。それぞれの見た目が独自のカーブを導出するため、一方だけを非対称（速く表示し、ゆっくり消す）にしても、もう一方の見え方は変わりません。明るい背景上で対称な線形フェードを使うと、コンテナの背景色があるコントロールが本来と異なる色に見える理由と、共有するアニメーション値を引き続き公開しておく必要がある理由について説明します。何かがフェードしている間だけボタンが隣のボタンより明るく、または暗く見えるとき、見た目のスタイルごとに異なるタイミングが必要なとき、または animateFloatAsState を共有状態ホルダーに移す前に使用してください。
• dont-pre-animate-a-self-animating-property — プロパティ自体をアニメーションするコンポーネントには、生の目標値を渡します。外部でトゥイーンした値は新しい目標値のストリームになり、そのようなコンポーネントは通常、自身のアニメーション実行中に新しい目標値を無視するため、エフェクトが途中で止まります。自己アニメーションするプロパティの見分け方、端点間を即座に切り替えるのが解決策である理由、コンパイル済みアーティファクトから所有者を証明する方法について説明します。アニメーションするコンポーネントが開始値の近くで止まるとき、トランジションが一度だけ実行されてその後は動かないとき、またはコンポーネントの入力を animateFloatAsState でラップする前に使用してください。
• draw-outside-bounds-particle-modifier — 通常の描画修飾子を使って、ホスト自身の境界を越えて描画するお祝いの粒子エフェクトを作ります。描画修飾子はデフォルトでクリップされないため、修飾子はチェーン内のすべての .clip(...) より前に置く必要があります。また、クリッピングする祖先があると、その端を越えた部分は切り取られます。ホストの測定サイズを基準に拡大縮小の原点と到達範囲を決め、28dp と 48dp のどちらでも同じ見え方にする方法、フレームごとのラムダを軽量に保つ方法、この用途ではアニメーションライブラリより純粋な描画が優れている理由について説明します。粒子エフェクトがボタンの輪郭で切り取られるとき、角丸カードやリスト行の内側で消えるとき、または1つ描画するためだけにベクターアニメーションの依存関係を追加する前に使用してください。
• image-fallback-url-retry-in-composition — 高解像度画像がないとき、ソース側で保証されているバリエーションの URL をレコードの画像に再試行します。URL をコンポジションの状態として保持し、onError で一度だけ切り替えます。変更後の URL にディスクキャッシュのキーを追従させる方法、レコードごとに状態をリセットする方法、2回目以降の切り替えを何もしないようにしてループを防ぐ方法、そして見えにくいコスト、つまり onSuccess に依存するすべての処理（パレットや、そこから導出されるページのテーマ）がひそかに実行されなくなることについて説明します。特定のレコードでページにフォールバック色が残るとき、再試行した画像がアクセスのたびに再取得されるとき、または画像リクエストがいつまでも再試行されるように見えるときに使用してください。
• text-brush-shimmer-sweep — TextStyle 自体に動くグラデーションを設定して、ラベルにハイライトを走らせます。グリフはブラシで描画されるため、オーバーレイもクリップも不要で、同期させるための幅の測定も必要ありません。ラベルが表示されるたびにスイープが再開しないよう、無限トランジションを無条件に宣言する方法、スイープの先頭にラベル自体の色ではなくコントラストの高い純色を使う理由、グラデーションの停止位置はピクセル単位であり両端を越えて移動させる必要があること、ブラシを設定するとテキストの色が完全に置き換わることについて説明します。ラベルが再表示されるたびにシマーが開始位置に戻るとき、ラベル自身の灰色に光沢が溶け込んで見えないとき、またはブラシを設定すると慎重に選んだテキスト色が消えるときに使用してください。
• touch-indication-bounds-and-alpha — アプリ全体のタッチリップルをアルファ値だけで柔らかくし、適切な境界を設定します。色はローカルのコンテンツ色から導出されるため、強制配色のサブツリー内でも正しく保たれます。一方、色を固定すると、ほぼ黒のサーフェス上でリップルが暗くなります。テーマの設定が通常の Modifier.clickable にも適用される理由、.clip(shape) を .clickable より前に置く必要がある理由、カードとそのクリップに同じ形状値を使う理由、クリック可能な修飾子を2つ重ねてはならない理由、アルファ値を設定できる唯一の方法である非推奨コンストラクターについて説明します。角丸の項目をタップすると四角く光るとき、ダークテーマでリップルがすすのような汚れに見えるとき、または長押し可能な項目でリップルが二重に表示されるときに使用してください。
• crossfade-container-sizes-to-the-visible-child — クロスフェードのコンテナは左上に配置した Box で、現在コンポジションされている子のうち最大のものに合わせてサイズが決まります。そのため、背の低い子を背の高い子に切り替えると、トランジション中に背の低い子は上端に固定され、背の高い子が外れるときに消えます。両方の分岐を明示的な配置を指定した1つの固定フレームに収める方法、長さの異なる2つのプログレス表示を重ねるのではなく置き換える方法、対話型コントロール全体をフェードすると操作できなくなる理由について説明します。状態変更後にバーが目に見えて所定の位置に落ち着くとき、重なった2つのトラックの長さが異なるとき、またはフェード中にコントロールが反応しなくなるときに使用してください。
• slide-transition-defaults-to-half-a-height — 垂直スライドトランジションは、デフォルトで要素の高さの半分だけ移動します。そのため、要素は自身の移動の途中から現れ、最初の部分が欠けてポップのように見え、スライドには見えません。高さ全体を渡す方法、どちらの端から現れるかを決める符号、短いフェードと長いスライドを組み合わせて要素が落ち着く前に不透明にする方法、表示よりも退出を速くする方法、すべての画面で一貫させるためにペアを共有値として公開する方法について説明します。バーやパネルがスライドせず所定の位置にパッと現れるとき、表示と退出の動きが揃わないとき、または同じコントロールが画面によって異なるアニメーションをするときに使用してください。
• transparent-chip-selection-signals — 透過する選択チップについて説明します。透明な形状の下にあるドロップシャドウは暗い輪として透けて見え、通常時のエレベーションをゼロにしても消えません。各インタラクション状態には独立したトークンのデフォルト値があるためです。チップの幅を 26dp 広げ、タップした指の下でスクロール行をリフローさせる選択時専用の先行アイコンをなくす方法、塗りつぶしが表示されたときにアウトラインをオフにする方法、ロールの色と対応する「オン」トークンを組み合わせる方法について説明します。透過チップに暗いハローが現れ、押下やホバーでも戻ってくるとき、チップをタップすると隣のチップが横にずれるとき、または2つのテーマのどちらかで選択中のチップのラベルが読みにくいときに使用してください。
• word-timed-karaoke-lyrics — 刻々と進む時間ソースに直接連動する単語ごとのカラオケワイプは、滑らかではなく段階的に見えます。ユーザーが巻き戻すと、すでに歌い終わった単語が以前の位置より後ろに戻っても点灯したままになることがあります。また、既存の行単位の歌詞表示を単語単位のハイライトに変更すると、同期していないシート全体が白く光り続けることがあります。単語ごとの歌詞ハイライト、同期する文字起こしビュー、または再生クロックに連動する左から右へのテキストの「塗りつぶし」エフェクトを構築またはデバッグするときに使用してください。
• compose-capture-to-share-image — コンポーザブルを画面外で ImageBitmap に描画し、ボタンから画像として保存または共有できるようにします。プラットフォーム専用の依存関係を追加せず、キャプチャのプリミティブを共通コードに移植する方法、固定出力サイズの代わりに最大幅の上限を使う方法、ボタンを操作できるようになる前にアートワークの読み込みを完了しておく必要があること、同じ機能のデスクトップ保存では不要な権限で Android の MediaStore への保存が制限されることについて説明します。「画像として共有」する機能で空白または描画途中の画像が出力されるとき、デバイスごとに出力サイズが異なるとき、または一部の Android バージョンでは保存できるのに他のバージョンでは何も表示されず失敗するときに使用してください。

チャートと統計の表示

• self-normalised-axes-need-a-second-shape — 独自のデータを使い、外部のコーパスなしで、軸を 0..1 に正規化したレーダーチャート／フィンガープリントチャートを作成します。各軸にガード付きの分母を 1 つ設け、2 つ目のポリゴン（前の期間）も描画します。自己正規化された軸にポリゴンが 1 つだけでは何もわからないためです。「利用状況の特徴」や「年間の振り返り」チャートで、用意できない比較対象が必要な場合、期間が短く、実際の値が 4 つある一方で 1 つの軸がガード付きのゼロになる場合、または 1 つの軸が NaN になり、ポリゴン全体が消えてしまう場合に使用します。
• dont-slice-one-circle-between-unrelated-measures — 合計値に共通性のない複数の指標は、1 つの円を分割するのではなく、同心円弧で表現します。最大の弧は 360° 未満に制限し、値を示す扇形は円環全体のトラック上に描画します。合計しても何にもならない個数をドーナツチャート／円グラフで表そうとしている場合、最大の円環が全周と見分けられない場合、または「ほとんど何もない」区分が目盛りの欠落のように見える場合に使用します。
• delta-absent-not-infinite — 空またはゼロの基準値に対する変化量は何も表示しません。「+100%」や無限大、上限に張り付いた整数は表示しません。また、除数だけでなく比較する 2 つの値の範囲もガードします。新規ユーザーの最初の期間があらゆる数値に対して大幅な増加として表示される場合、減少した数値の横に「+0%」が表示される場合、または誰にも理由を説明できないのに画面上のすべての変化量が減少を示す場合に使用します。
• partial-chart-must-say-so — 分布が実際に分類できた入力の割合を、バケットの作成に使ったものとまったく同じ述語を用いて算出し、カバー率がゼロの場合でもその行を表示できるようにします。NULL 許容の結合や解析済みテキスト列をもとにチャートを作成する場合、棒グラフはもっともらしく見えるのに下部の合計が一致しない場合、またはもっとも免責表示が必要なケースで何も描画されない場合に使用します。
• equal-buckets-or-no-buckets — 範囲を幅が厳密に等しいバケットに分割し、余りは範囲外にします。ユーザーが読み取る行数に応じてバケットの単位を選び、最新のバケットが不完全なのに全幅で描画されることがないようにします。棒グラフの最古または最新の棒だけが理由もなく長かったり短かったりする場合、範囲から誰も読まない 30 行が生成される場合、または一連の範囲のうち 1 つだけがほかと逆方向に描画される場合に使用します。
• mosaic-arrangements-must-be-hole-free — ランク付けされたモザイク（大きなタイル 1 つと小さなタイル群）を作成し、可能なすべての件数に対応する分岐を設けることで、項目が黙って除外されたり、配置に空の長方形が残ったりしないようにします。また、タイルごとではなくブロック全体を 1 つのクリップで囲みます。「トップ 5」に 4 件しか表示されない場合、件数によってグリッドに目に見える隙間ができる場合、または「未対応」サイズでの早期リターンが問題なさそうに見える場合に使用します。