surface.css

Map, waveform, vertical writing, variable axes, and the elbow.

src/surface.css · 7 blocks · blocks that belong to a custom element are on that element's page

.ov-elbow

The LCARS elbow: the one FUI language that became a real design system, and the shape this kit could not make. It is a single element, not a corner assembled from three, so the sweep is continuous.

Used on surface.html.

.ov-elbow-bay

No still yet.

The bay the elbow frames.

🔴 The elbow column was a flat 200px, which is a track that CANNOT shrink. Dropped into a repeat(4, minmax(0, 1fr)) cell about 183px wide, the two tracks summed to 307px and the bay overflowed its own cell by ~123px, so the elbow and its head ran off the right edge of the surface and were cut by the page. It looked like a corner clip eating content, which is a bug this kit has now had five of, so it read as the sixth. It was not: nothing was clipped, the grid was simply wider than its box.

⚠️ The tell that separates the two: a clip removes a triangle and leaves the layout intact, an overflow moves content out of the box and leaves a straight vertical cut at the container edge. This was a straight cut.

The column is now bounded by the bay: it wants 38% but never takes more than 200px, and never less than the arm plus its radius (76px), which is the narrowest the elbow can be and still read as an elbow rather than as a bar. minmax(0, 1fr) on the second track lets the content column shrink to nothing rather than forcing the bay open from the inside.

Used on surface.html.

.ov-elbow-body

No still yet.

Used on surface.html.

.ov-elbow-head

No still yet.

Used on surface.html.

.ov-tcy

Tate-chu-yoko: a short run of Latin set across the column.

Used on surface.html.

.ov-var

No still yet.

The axes that matter on Recursive are not weight: MONO moves between a proportional sans and a monospace, and CASL between a neutral and a casual drawing. They are tokens because a theme should be able to say where on those axes it sits.

Used on surface.html.

.ov-vertical

🔴 VERTICAL WRITING IS A SCRIPT PROPERTY, NOT A ROTATION. text-orientation: mixed stands Han and Hangul upright and leaves Thai on its side, which is CORRECT: Thai is not written vertically. A wall that treats "Asian signage" as one texture is wrong about at least one script, and Thai is the one nobody tests.

⭐ And correct typesetting is also the most compact: the same string measures 147px with mixed, 221px forced upright, and 143px with text-combine-upright: all.

Used on surface.html.