css - CSS ボックス配置の正式なセマンティクス

Question

私は (理論的な) コンピューター サイエンスの学生であり、プログラミング言語のセマンティクスの調査は私の研究対象の 1 つです ( wikipedia )。

私は CSS をいろいろいじり、ボックスの配置規則をある程度理解しています。(特定のレイアウトでページを作成するように言われると、正しいボックス アプローチと適用可能な CSS ルールを思いつくことがよくあります。)

CSS のボックスの配置規則にある種の正式なセマンティクスがあればいいのですが、しばらくネットを検索した後も、役立つものはまったく見つかりませんでした。

ほとんどの場合、最終的に CSS 仕様にたどり着きます。これは、疑似アルゴリズムを使用した長いテキストとしてフォーマットされています (最大の読み物ではありません --- これらの仕様は、まだ多くの努力を払って読んでいません)。

この「理論」を、仕様が提供するものよりも厳密な数学的モデルに形式化しようとした人はいませんか? 私は完全なものや決定的なものを探しているわけではありませんが、少なくともボックスを配置する方法が正式な方法でモデル化できれば、それは確かに素晴らしい (そして便利です!) でしょう。

そのような研究を知っている人はいますか？

Answer 1

答えではありません！ これは、非常に単純化されたケースの可能な形式化の例です (上記の私のコメントを参照してください)。

たとえば、(1) 既知の画面幅、(2)ネストされておらず、マージン/パディング/ボーダーがなく、左にフロートされているボックスの順序付きリストを特徴とする世界で作業しているとします。 (2.1) 高さと (2.2) 幅を数学関数と で知る。

各ボックスの左上隅の座標を示す関数および を定義します。

リレーション「starts line 」と「has height 」を定義/使用します。

まずは0行目から。

次に、行を開始する場合、さらに特定の場合

...次のように結論付けます。

1. 
2. 
3. 高さがある
4. 行の開始+1 iff

これらのルールは、指定されたボックスの位置を正式な方法で定義します。もちろん、これは 1 つの方法にすぎず、おそらく最も賢い方法ではありません (すぐに考えただけです) が、float の動作方法を正しく形式化しています (モジュロ タイプミス、十分にチェックしていません)。

プログラミング言語を扱う場合、それぞれが特定の目的のために考案されたこれらの形式主義の多くから選択できます ( wikipediaを参照)。

CSSボックスの配置の形式化を考え出そうとしたことがある人がいれば、私はただ興味があります. もちろん、仕様は長い道のりを歩んでいますが、数学的な方法で強制されるほど厳密ではありません.