codersnotes

A Note On Layout Language November 23rd, 2015

Ah, CSS. Perhaps the only 2D layout system ever invented that forgot to include the Y-axis.

CSS tries to do two things - style, and layout. Now the styling, for the most part, it succeeds at. You can pick font sizes, colors, add borders, whatever you want, and it'll probably be OK. Ignoring of course the numerous cross-browser issues which we'll skip over today.

Layout, on the other hand, is a mess. It was a mess in version 1, and although version 3 tries to add new features to improve matters, it just seems like they're adding more complexity without actually solving the root problem.

A quote by Casey Muratori sums it up succinctly:

http://twitter.com/cmuratori/status/645323662883602432

Layout happens between two or more things. If your layout language is about properties per-object, you have failed completely.

An important concept here is the word "two". In order to define a relationship, you need two things to relate. For instance:

• The header goes above the content.
• The sidebar goes to the left of the content.
• The links go inside the menu.
• The button goes after the previous button.
• The menu goes in front of the page.
• The image goes behind the text.
• An icon goes between each item.

Do you see the pattern? Each pair of objects is linked by a relational rule. The word we use in the English language to bind this pair together is called a preposition.

In Brian Kernighan's excellent talk on programming language design, he mentions a famous quote from the linguist Benjamin Whorf:

Language shapes the way we think and determines what we can think about.

Brian suggests that it applies even more strongly to the artificial languages that we create to tell our computers what to do, and I'm inclined to agree.

People who are used to thinking about per-object properties will solve problems in a different way than people who aren't. For instance, let's say in CSS you want an object to appear on top of another object. You might use the z-index property:

img {
    position: absolute;
    left: 0px; top: 0px;
    z-index: -1;
}

CSS only knows about nouns and adjectives, and so defines a language that can only express one object at a time. The concepts it can reason about are limited by that. In CSS, if you want to express that something should be on top, we are forced to invent an artificial property, the Z-index.

The Z-index integer normally should exist only as an internal implementation detail, but it gets exposed out to the web designers simply because CSS has no other tools to express that concept with. It's trapped by the language of properties, something that works well for style but not for layout.

In a world of prepositions, we might perhaps use an infix syntax to define a similar rule using pairs of elements:

element-A   <preposition>   element-B

For example,

img goes-above body

This example shows why it is incredibly important to teach language and grammar skills. It's not just that using a preposition can improve a solution. In order to come up with this solution, you need to actually know about the word 'preposition', and its usage in the English grammar.

Properties like float: left result from a language that can only express nouns and adjectives. These come up so often in programming that many programmers forget anything else ever existed. Open a typical Visual Basic-style dialog editor and click on a widget, and what do you see? A property list full of nothing but adjectives. Open a JSON document and you see the same thing. It's so frequent that it shapes our poor little programming brains into assuming that's all there is in life.

Our exposure to OOP languages in todays world constantly shapes our thinking, and while having languages with good support for nouns is a fine thing, we shouldn't let those languages limit our thinking. Steve Yegge's eye-opening article "Execution in the Kingdom of Nouns" shows the importance of verbs, and what kind of programming language you end up with when you take them out.

As programmers it's so easy to get caught up in the details the computer needs to know, like the Z-index of an element, that we can forget that our job is to convert the needs of the human into those details. Let the human express their needs in the language most suitable for them, and let the computer do the busywork.