Wednesday, December 23, 2009

Browser in a browser!

Spent the evening going from


V({backgroundColor: "rgb(255, 204, 204)",
wCnstrnt: {px: 100},
hCnstrnt: {px: 100}},
V({wCnstrnt: {px: 20}, hCnstrnt: {px: 20}, backgroundColor: "red"}),
H({wCnstrnt: {px: 30}, hCnstrnt: "auto", backgroundColor: "green"},
V({wCnstrnt: {px: 20}, hCnstrnt: {px: 20}, backgroundColor: "orange"}),
V({wCnstrnt: {px: 5}, hCnstrnt: {px: 5}, backgroundColor: "white"})))


to




... and all within your browser!


The magic is actually what's on the inside: I really spent the evening writing a layout engine generator that takes in a layout engine specification and emits an engine that can consume a basic box layout, solve it, and render it. Tomorrow I'll add in left floats and hopefully *automatically* incrementalize it :) Probably won't get to working on the finale -- full specification and verification -- until I get more performance results on the basic parallel engine stuff. However.. still kinda cool it was that easy.

Check out the BSS0 and BSS1 layout specification in the source of my toy layout interpreter. In a slicker version, the inherited/synthesized pass stuff might be inferred (being explicit about the staging helps for performance guarantees, however). Anyways, for this version, you need to run in Firefox with Firebug enabled (or delete all the console stuff).

No comments: