Add marquee layout.


Add a layout that centers content horizontally and vertically, like a theater marquee.




Garret Wilson
August 2, 2020, 9:41 PM

One might wonder whether "marquee" might not be its own component, which would be a better semantic approach than a "marquee" layout. But many general blocks might want their content arranged centered, and there is no need to bring any other features along with this centering. In fact one might wonder whether layout-flex might better be a component—and in fact it originally was: the box component.

But pragmatically "layouts" as of are starting to become more of a type of mixin for layout, which can be pretty orthogonal to other facets of a block. So we can consider "marquee" to be a type of mixin.

Following this train of thought, there might be some standard e.g. margin mixins, but we should be careful not to go too far down the road of simply specifying styles in Guise Skeleton with no semantics whatsoever. This will need to be considered more going forward.

Garret Wilson
August 3, 2020, 4:48 PM

There is one little caveat with this layout: if we have a child such as <h1> or <p> that is so long that it wraps, in a "marquee" we would want the wrapped lines to be centered as well. But we can only do that if we have the layout reach down and change the text-align of the direct children. (We could make it inherited, but we don't want it to apply all the way down in to all descendants.) But then it's not purely a "layout"; it's more like a component, changing properties of children and not just their layout.

But changing marquee into a component seems to heavy-handed, and sort of interferes in how it is used e.g. in a rotulus ().

So maybe we can think of direct children text-align setting as a bit of wiggle room, as wrapped text is almost like a lightweight way of splitting up text into children of the marquee layout. Hopefully this won't be a slippery slope, and in general we can keep layouts from changing properties of descendants.

Here to be safe we'll initially just change initial headings and paragraphs (<h*> and p), to allow things like <div> to be uncentered and also to prevent accidentally centering everything (even e.g. cards) all the way down. Admittedly this selective (no pun intended) centering does make the layout look more like a component, but I'm not sure of any better approach. We'll have to go with this for the moment and see how it works.


Garret Wilson


Garret Wilson




Fix versions