Proposal for Using Pinning Corners as an alternative layout scheme


#1

Back when I was a Classic MacOS developer, there was a great C++ based GUI library called Metrowerks PowerPlant. It featured a neat and simple way of laying out and sizing panes (the equivalent of container elements in html). You simply laid out your panes inside a parent pane (a windows is also a pane) and specify its height and width. This is all fairly standard and not unique to PowerPlant.

What made PowerPlant unique, however, is how panes adapted their positions and sizes automatically when a parent pane dimension changes. When you draw a pane, you specify wether each of the corners are pinned or not. When a corner is not pinned, it remains static and when it is, it moves with the parent. When you resize a Window (a parent pane), for instance, a single pane with all its corners pinned will adapt to its size relative to the Window’s new size. Likewise, a pane with all its corners unpinned, would not change relative to the Window’s new size. Pinning could be specified programmingically or declaritively via a resource file as a list of booleans values, ie. { topleft = false, topright=false, bottomleft = true, bottomright=true}. It’s equivalent to how you specify margins, paddings, etc in CSS.

This convention made programming GUIs intuitive, powerful and productive. I struggled learning HTML after being spoiled on it. The entire concept of using percentages, combined with inlined elements, just made the whole experience cognitively taxing and frustrating. Pinning made layouts not only simple, but made their behavior far more predictable. The first Mac version of Netscape Navigator used PowerPlant, but for some reason they didn’t add it to their HTML implementation.

Pinning may not work for the web as PowerPlant implemented it, but by adding a few layout and behavioral capabilities, it would make web development far more productive. I’m not proposing to change the CSS/HTML standard, but merely adding it as an extension to CSS. It can be easily retrofitted into CSS and HTML as an extension, for instance:

 .myPanel {
    layout: pinned;
    width: 50px;
    max-width: 100px;
    border: black 1px;
    // stretch box from the bottom
    pinnings: { topleft = false, topright=false, bottomleft = true, bottomright=true }
}  

I’d like to know what others think about this layout method.


#2

It is basically how NeXTSTEP did it , but it pinned edges not corners. I believe MacOS still does it that way. I liked that system a lot for normal UIs , but I am not sure it is a good fit for flexible layouts. That said I’d rather have it than not.


#3

After doing flexbox and grid, the CSSWG has expressed reluctance at directly specifying new layout models.

Are there layouts you want to do that can’t be done with flex or grid or older CSS? Having examples would be very helpful. Could this proposal be polyfilled, or implemented with Houdini?

At first read, it sounds like there would be a high risk of overlapping content with an unpinned element as child.