[css-align][css-shapes] Circular center alignment

[Crissov]

• https://drafts.csswg.org/css-align/#positional-values
• https://drafts.csswg.org/css-shapes/
• Optical Effects in User Interfaces (for True Nerds) by Slava Shestopalov (Muzli)

For center alignment, matching the center of the smallest possible virtual circle (or possibly ellipse) surrounding the box to align with the same center of its alignment container may give better visual results than using the horizontal and vertical center of rectangular boxes. I propose a new positional alignment keyword circular-center for this.

This alignment is particularly useful for non-rectangular boxes as specified in [css-shapes], but the level-1 draft of this module only considers custom shapes for floating boxes. For rectangular boxes and shapes, circular-center equals center.

[Crissov]

Alternatively, a new property could be introduced to specify the “gravitational” center of a box which is used for (center) alignment.

[tabatkins]

I'm not sure I understand what's being requested here. For rectangles, the circumcircle has the same center as the rectangle itself.

The medium post you've linked to describes the use of a circumcircle around the non-rectangular shape, which can definitely give a different answer than the center of the shape's bounding box. But we only have rectangles to work with.

[Crissov]

Yes, that is why I referenced the Shapes module. Its shape-outside currently only affects the float area of float elements (defaulting to the margin box) and not the alignment subject (also defaulting to the margin box). This would need to change for circular-center to differ from center.

[Crissov]

Designers may also want this effect for boxes that have non-rectangular border-shape applied.

PS: Maybe this could also be solved by a keyword like shape-center (similar to anchor-center).