要約

  • W3C が2023年6月に公開した最初の CSS Anchor Positioning 草案は、離れた場所にある基準要素との関係で浮いた要素の位置と大きさを決め、はみ出しに備える方法を示した。
  • 2024年の草案は既定の基準要素と position-try 系の代替配置を整えた。サイトが候補と順番を決め、ブラウザーが実際に収まる場所を測る。

入力欄の横に小さなヘルプボタンがある。意味の分かりにくい項目を読者が押すと、説明の吹き出しが現れる。大きな画面ではボタンの右側が自然だ。小さな画面でボタンが右端に寄ると、同じ配置は説明文を画面の外へ押し出す。「ボタンのそばに出る」は達成したが、「読めるところに出る」は失敗だ。開発者はまた top と left の数字を並べ、余白の中で自作の巻き尺を伸ばす。

W3C の2023年6月29日の最初の公開草案は、その距離の扱いを CSS に移した。位置を指定した要素は、ページ内の別の場所にある一つ以上のアンカー要素を基準に、大きさや位置を決められる。anchor-name は基準に名前を付け、anchor() と anchor-size() はその位置や寸法を参照する。吹き出しは独立した箱のまま、自分が説明するボタンを見失わなくなる。上の文章が折り返されてボタンが下がれば、参照する位置も下がる。

サイトはどのボタンにどの説明を付けるか、最初にどの側へ置きたいかを決める。ブラウザーはすでに両方の箱を描画するため、位置も寸法も知っている。共通の計測を任せれば、ページごとに座標計算の小さな工場を建てる必要が減る。巻き尺を畳んでも、編集上の選択は残る。右、左、上、下のどこなら読者がボタンと説明を一緒に見られるか。

画面の端に近づくと、第一希望だけでは足りない。2023年の草案には position-fallback と @position-fallback があり、代替の規則を順に試せる。好みの位置が包含ブロックからはみ出すなら、ブラウザーは候補を調べて、収まるものを採用する。候補の献立を決めるのはサイトで、空席を確かめるのはブラウザーだ。右側が満席なら左側へ。吹き出しは気分で移動しているのではなく、あらかじめ渡された座席表に従う。

2024年3月14日の草案は position-anchor によって既定のアンカーを明示する。代替配置の書き方は position-try-options、position-try-order、position-try という一群へ進んだ。吹き出しがボタンに付いて回り、画面の内側に残るという課題は同じだ。変わったのは二番目、三番目の希望をどう伝えるか。規格を書く側も、分かりやすい名前が座れる席を探していた。

2024年3月26日の草案はアンカーの参照と、はみ出した場合の選択をさらに扱う。長い記事の脚注を考えると、この仕組みの意味が見える。注は説明する文の近くにありたい。文がページの端にあれば、注は別の側へ回った方がよい。出版社が「この文と注の関係が分かる位置」を選び、ブラウザーがどの候補なら包含ブロックに収まるか測る。言葉のつながりは編集し、箱の位置は計算する。

2024年10月4日の草案では、代替候補を表す名前に position-try-fallbacks が現れる。2023年には position-fallback、2024年3月には position-try-options。別々の日付の草案に属する言葉であり、一つの時代の同義語として並べられない。名前の変遷は、作者が書きやすく、ブラウザーが試しやすい指定を探す作業の跡だ。端に追い詰められた吹き出しに必要なのは、魔法の座標よりもよくできた第二希望である。

W3C の公開履歴は2023年の初稿から2024年の改訂をつなぐ。ブラウザーはアンカーの位置、吹き出しの行き先、候補が使える空間を測る。サイトは説明文と、どの場所を先に試すかを決める。読者には、押したボタンのそばで最後まで読める一文が届けばよい。右端が駄目なら左がある。

巻き尺は引き出しへ戻った。吹き出しの仕事は測量ではなく、説明することだ。