analytics

Sunday, March 2, 2014

Content design as a system of equations

As a basic example, suppose all the content on for example a web page was presented in rectangles. We might have a largest rectangle called Page that was to have all other rectangles on it in a hierarchy.
First we define the hierarchy with a set definition:
[rectangle Page[rectangle Left[text LeftTitle, text Blurb, picture Stockfoto], rectangle Right[text MainText]]]
See there are various types that would be supported, above there are text, picture ,and rectangle elements. The hierarchy is unambiguous through the children of a type being listed inside brackets, possibly nested after the type name.
Now we need to give some information about how we want everything arranged. We can set variables for the width and height of the page:
width = 1.0
height = 1.0
offset = .05
Page.coord = [[0,0],[width, height]]
All types have certain built in data structures, above the rectangle variable coord sets the top left and bottom right of the rectangle named Page.
Left.coord = [[offset, offset], [width/2.0, height - offset]]
It's possible to use references to variables inside a call to coord. Later on we could change width and height in one place to a certain number of pixels, and change offset to whatever we'd like and it would change everything about the page.
LeftTitle.center.x = Left.center.x
LeftTitle.center.y = Left.top.y + offset
LeftTitle.topleft = [Left.topleft.x, Left.top.y]
Here we use a call to Left's center variable, which can be inferred by the program from the coordinates of Left, and refer to the x coordinate within the center to set the LeftTitle's center's x coordinate at the same value. Because that is the center of LeftTitle, the bottomright will be be inferred from where the center is and where the top left is.
Blurb.topleft = [LeftTitle.topleft.x + offset, LeftTitle.topleft.y+offset]
Blurb.bottomright = [Left.right.x - offset, Left.bottomright.y*(1/3)]
Indicating we want the blurb box to go down to 1/3 of the way down the page.

Notice now that we are relating variables with equations, the program will eventually solve these equations and certain other automatically generated equations for the unknown variables. This is how the inferences are working behind the scenes. An automatically generated equation for rectangle for example is:
rectangle.center = [(rectangle.topright.x - rectangle.topleft.x)/2.0, (rectangle.bottomleft.x - rectangle.bottomright.y)/2.0]

So hopefully the program parsing this will upon solving the equations, either produce the page or return that certain variables that are still free in the equations or that there is no solution for the variables given the criteria, at which point the user can try to add more information or change things until they get the layout they want.

So this example above might end up like:

  

I think this would work a lot better than the present ways for laying out content, because it can infer many variables without being explicitly told them, but it doesn't try to do too much automatically like layout systems I've used before. For example some systems have commands to try and automatically center things but sometimes that conflicts with one of the three different systems for automatically doing the padding around the content and so on. It is generally just a mess. 
 

No comments:

Post a Comment