Background
CSS Scripting Layout was designed as a general-purpose solution for defining the layout and resize behavior of HTML elements on a web page. It can be used to describe any variety of layouts succinctly and efficiently. It may be used to encapsulate layouts in reusable constructs that are applied implicitly with minimal developer imposition. Alternatively, layouts may be input explicitly, allowing developers to control precisely the layout and resize behavior of each element among a set of elements.
CSS Scripting Layout addresses most of the frustrations Web Developers have expressed in various articles referenced in my
comments on layout in the current CSS Standard. In the remainder of the blog I’ll post a sampling of some of the commentary of authors and commentators from articles referenced there and briefly comment on how Scripting Layout addresses each concern.
From the author...
“So how do we get really powerful source-order-independent layout? I wish I knew. … We just need it, and have needed it for a good decade or so. Without it, CSS is a styling language but not a layout language. We’ve bent it into being something close to a layout language, which is nice but not really ideal.
Maybe CSS isn’t the place for this. Maybe there needs to be a new layout language that can be defined and implemented without regard to the constraints of the existing CSS syntax rules, without worrying about backwards compatibility...”
The
Three-Column Presentation example exhibits source order independence. Scripting Layout defines interfaces and a set of objects in a composition that results in a powerful source-order-independent layout solution. Furthermore, Scripting Layout is fully backward compatible with the current CSS standard.
“CSS will be extended by JS.”
Extending CSS with Scripting Layout and JavaScript is a natural progression from the present state.
From Commentators…
“Give me math, variables, and constants. Give me positioning relative to a specified element. With those things I can make my OWN layout solution. Implement a grid system, and all independent of mark-up order.”
“The problem is this: It’s not possible to provide a generic solution to layout problems. Our layout problems are not generic. They are specific to our designs. So we need the tools in the core of CSS to make our own layout solution.”
Scripting Layout enables the specification any kind of mathematical expression. Positioning relative to specific elements is exhibited in the
Three-Column Presentation example. Scripting Layout enables anyone to implement their own layout solution. Moreover, Scripting Layout enables anyone to share and reuse solutions in the same manner that HTML JavaScript solutions are shared and reused such as JQuery.
“I think the best bet would be to create a separate layout module, independent of semantic markup in HTML and independent of the style rules in CSS as well.”
Scripting Layout provides layout independence from the both the HTML source and CSS style rules enabling a level of abstraction that makes layout easier to achieve.
“What CSS needs to make a good layout system is not so hard, really. It really boils down to satisfy the two main criteria about layout: being able to control the POSITION and SIZE, in the TWO dimensions, and being able to control the RELATIONSHIP of those caracteritics with other elements.”
Actually, a good layout system is hard, mathematically speaking, layout is often np-hard or np-complete such as a table layout. Scripting Layout provides a set of heuristics that enables the efficient resolution of difficult np-hard layout problems.
“…it seems quite clear that the problem is the lack of the ability to define relationships between elements: position and size.”
Scripting Layout enables the specification of relationships (constraints) among and between elements.
“Find out the fundamental axioms that work together to form the basis of a layout complete grammar… there must be a way to achieve any derived two-dimensional layout including the ability to define how it reshapes under different window sizes and zoom levels… Find a syntax and implement it.”
Scripting Layout provides a grammar and syntax, JavaScript, and fundamental axioms, new interfaces and constraint resolution techniques that enable a way to achieve any derived two-dimensional layout including the ability to define how it reshapes under different window sizes and zoom levels.
“…any container can be constrained (from any side, or the center) to be a certain distance (% or px) from it’s parent, including height. It’s basically absolute positioning done right. This opens up vast possibilities with layouts, far more than we have today, and equaling or bettering what can be done with tables.”
“Has anybody proposed something like Xt’s Form widget? All of the Form’s children size themselves, and they specify attachments to other widgets, or to the edges of the Form. So a 3-column layout, with a header and a footer, would be something like…
It’s simple to understand, it’s resolution-independent, and it’s really powerful.”
“We need the ability to “attach” one element to another in relation to each other. Possibly including the ability to “attach” an element in relation to a parent element…”
“…the perl saying “Simple things should be simple, difficult things should be possible”…”
Through encapsulation and reuse Scripting Layout makes many difficult things much simpler.
From the author...
"No Expressions - There is currently no ability to specify property values as simple expressions (such as margin-left: 10% - 3em + 4px;). This is useful in a variety of cases, such as calculating the size of columns subject to a constraint on the sum of all columns.
…
Vertical Control Limitation - While horizontal placement of elements is generally easy to control, vertical placement is frequently unintuitive, convoluted, or impossible. Simple tasks, such as centering an element vertically or getting a footer to be placed no higher than bottom of viewport, either require complicated and unintuitive style rules, or simple but widely unsupported rules.
…
Poor Layout Controls for Flexible Layouts - While new additions to CSS3 provide a stronger, more robust layout feature-set, CSS is still very much rooted as a styling language, not a layout language."
Scripting Layout addresses each of these CSS weaknesses:
- JavaScript provides syntax for expressions.
- Vertical control is precise and intuitive.
- Flexible layouts become much easier to achieve.
- Scripting Layout is a layout language.
From the author...
“…CSS just can’t do many of the things we should expect of it. Real-world CSS is likely to get longer, not shorter, as CSS evolves toward its manifest destiny and allows us to declare… all manner of complex layouts for which we currently turn to table elements and layout systems like the Dojo BorderContainer and ExpandoPane widgets…”
All manner of complex layouts are achievable with Scripting Layout. Layouts are as reusable as the Dojo BorderContainer and ExpandoPane widgets only easier to use and more efficient computationally.
From Commentators…
Rob:
“…until CSS lets me format my layout in a simple grid, just like a table, without resorting to strange non-semantic markup and obscure large negative margins and other hacks, I will continue to use HTML tables to perform this function.”
HTML-like tables are achieved in the Scripting
Table Layout example.
From the author...
“There’s also no indication that the WG has taken stabs exposing the expressive power that Microsoft exposed with CSS expressions.”
Microsoft’s CSS expressions had severe
performance issues that have lead many people to dismiss JavaScript as a viable layout language. Scripting layout as implemented here is fast and efficient at realizing even the most complex kinds of layout.
From the author...
“The fact that we have to resort to such contortions to produce layouts that please the eye (in such a simple, basic way) makes me wonder if css – as we know it today – is up to the job at all.”
This is a common sentiment. Scripting Layout enables the production of layouts in simple and basic ways that are efficient. Scripting Layout is up to the task.
From the author...
“CSS tables have only one notable weakness: CSS does not allow for table cells to span rows or columns the way they can in HTML tables (with the “rowspan” and “colspan” attributes).”
HTML-like tables that include cell spanning are found in the Scripting
Table Layout example. Furthermore, the cell spanning in this example requires no special nonsemantic HTML mark-up.
From the author...
“CSS is still incomplete - Alex Robinson's one true layout had stuff in it that nobody had thought of. Scripters are shoring up the weak points, presentation libraries (YUI), work on CSS is slow but is happening. CSS and web standards keep popping up where they’re least expected.”
The integration of JavaScript and CSS for layout as seen in Scripting Layout is a natural progression from what is happening now. The CSS Working Group should consider formalizing it.
From the author...
“Why is it that creating multi-column layouts [in CSS] still requires trickery and some magic even after all this time? And why can I still not achieve the same type of layouts that I could easily do with tables?”
HTML-like tables are achieved in CSS in the Scripting
Table Layout example without trickery or magic.
From Commentators…
Lonnie Lee Best:
“You can use absolute positioning to get any layout you want. However, when a page is loaded or resized, that layout remains static. For a layout to accommodate sizing, it requires *behavior* of that layout. I wouldn’t call it un-pure to use javascript to control layout behavior. I would simply call it an inconvenient reality for those who *purely* wanting to keep their layout out of their markup.
The question is: do we want that layout behavior to be inherent, or do we want to explicitly control it with javascript.
… some type of layout encapsulation needs to be specified somewhere in the markup or css or javascript… you need a way of grouping elements outside of the markup.”
Scripting Layout provides the kind of layout encapsulation and grouping required to achieve explicit and implicit layout and resize behavior. Scripting Layout bridges the gap currently existing between CSS and JavaScript.
From the author...
“We do not need the Working Group to study individual problem cases and propose a pre-packaged “solution” that either misses the point, is fundamentally wrong, or is inflexible... The crux of the issue is that W3C seem to try providing high-level “solutions” instead of low-level tools.“
…
“There are NO tools to allow flexible layout on the web. Building better tools drive better end results.“
…
“When I say CSS needs to manipulate the DOM I'm really talking about some sort of pseudo-DOM, a Visual Object Model… This is entirely about getting CSS able to provide flexible styling WITHOUT manipulating the semantics of a document.“
and finally…
“CSS 2&3…still suffers from the basic issue of having too few and too inflexible tools for layout.“
Scripting Layout is a low-level tool that allows designers to build their own layout solutions that are efficient, reusable, and independent of the semantics of a document. The language incorporates a type of Visual Object Model with the container, its ordered list of subelements, and Visual Object interfaces.
From Commentators…
Juergen Schreck:
“we just need a standardized way for CSS and Javascript to interact better.”
Scripting Layout describes a CSS/JavaScript interaction that can be standardized.
devsmt:
“my concern with css is that is not practical to write reusable components, the language itself laks tools to do it, basic math and variables but class like inheritance too, can alleviate this problem.”
Scripting Layout is a tool that provides basic math and variables as well as reusability and inheritance.
From the author...
“CSS gives imperfect options for layout. Take the example of
equidistant objects, have a look at what’s required to achieve this simple visual effect. Something as fundamental as this should not be so hard to achieve. And it wouldn’t be if CSS had basic math calculations combined with an awareness of the dimensions of boxes other than parents.“
Equidistant objects are achieved in the Scripting
Line Wrapping example. Justifying objects in this manner and mixing this effect with other layout effects is easily achieved in this example.
“If I want a grid layout, I want the display to adapt not pixel by pixel, but grid-unit by grid-unit.“
A reusable grid layout of this type could be achieved with Scripting Layout.
From the author...
“A lot of people complain about limitations in the layout capabilities in CSS. Layout in CSS is a pain, and it's a pain because CSS originally wasn't designed for coarse layout, only for linear documents. The CSS Working Group totally understands that CSS today is totally incompetent at doing layout… It is very, very obvious to us that CSS needs better, easier, more powerful layout capabilities.
At the same time, defining a CSS layout system is hard. It's expensive, and I don't mean money but skill×time, which is rarer… So for everyone out there who wants CSS layout to improve… please, don't come to the CSS Working Group with a loosely-defined layout proposal…Chances are your proposal is really hard to define and incorporate into existing CSS layout systems at the level of precision we need.“
The Scripting Layout Model proposed here is well-developed and fully incorporates into the existing layout system. Moreover, Scripting Layout enables the CSS Working Group to get out of the business of defining ever more expensive, yet limited, CSS layout systems.
Conclusion
I’ve shown how CSS Scripting Layout brings together many of the independent ideas that the Web community has expressed regarding layout within CSS. Scripting Layout is an open system whereby new layouts heretofore not achievable in CSS can be realized efficiently and shared among the developers putting to an end the frustrations nearly every developer has experienced with the current standard.