2012-06-10 13 views
5

私は(理論的な)コンピュータ科学の学生です。プログラミング言語のセマンティクスの調査は、私の研究(wikipedia)の対象の1つです。CSSボックスポジショニングの公式セマンティクス

私はCSSで多くのことをしてきたし、ボックスの位置付けルールについても十分理解しています。 (特定のレイアウトのページを作成するように指示した場合は、適切なボックスアプローチと適用可能なCSSルールについてよく考えることができます)。

CSSボックスの位置付けルールには正式なセマンティクスがあり、しばらくの間、ネットを検索した後は、役に立たないものは何も見つかりませんでした。

ほとんどの場合、擬似アルゴリズムで長いテキストとしてフォーマットされたCSS仕様になってしまいます(最大の読み物ではありません---私はこれらの仕様をまだ読んでいません)。

この“の理論”の理論モデルは、仕様よりも厳しいものはありませんか?私は何かが完全であるか決定的ではないと思っていますが、少なくともボックスを配置する方法を正式な方法でモデル化することができれば、きれいで便利です!

誰もそのような研究を知っていますか?

+0

良い記事があります:http://www.brainjar.com/css/positioning/ – gandil

+0

「正式な」とはどういう意味か分かりませんが、仕様自体は**正式な定義です。これらの事。結局のところ*仕様*です。ここには[目次](http://www.w3.org/TR/CSS21/cover.html#toc)があります。書式設定モデルを詳細にカバーするセクション8,9、および10に焦点を当てたいと思うでしょう。 – BoltClock

+0

@Boltは数学的意味で正式である。 W3Cの仕様はこの意味で正式ではありません。 –

答えて

2

答えはありません!これは、非常に単純化されたケースの正式化の例です(上記の私のコメントを参照)。

言って、例えば、我々は(1)知られている画面の幅enter image description hereを搭載し、世界で活躍している、ネストされていないenter image description hereボックスenter image description hereの(2)順序付きリスト、マージンなし/パディングの/ボーダーを持っています(2.1)の高さと(2.2)の幅は、数学的関数whによって知ることができます。

ここでは、各ボックスの左上隅の座標を示すenter image description hereenter image description hereという関数を定義します。

"enter image description here開始ラインenter image description here"と "enter image description hereの高さはenter image description here"と定義して使用します。

そして、まず第一に、enter image description here開始ライン0

enter image description here開始はl行目、さらに特定のm in N

enter image description here

のためであればあれば...

  1. box heights in certain line
  2. box widths in certain line
  3. llineheight
  4. bm+1開始が

m le N IFFこれらのルールは正式で与えられた箱の位置を定義する行の高さを持っている:私たちは、と結論します方法。もちろん、これは唯一の方法であり、おそらく賢明ではありません(すぐに考えただけです)が、浮動小数点型の動作を正式に正式化します(十分にチェックしていません)。

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

誰かがCSSボックスの位置づけの正式化を試したことがあるのであれば、私は興味があります。もちろん、仕様は長い道のりですが、数学的方法ほど厳格ではありません。