Establecer tipo en un círculo… con ruta desplazada

Aquí hay algunos trucos CSS legítimos de yuanchuan . Existe esta propiedad CSSoffset-path . Érase una vez un nombre motion-pathy luego le cambiaron el nombre. En ese momento puse los ojos en blanco, porque la propiedad es obviamente para animar cosas a lo largo de un camino. Pero no es necesario usarlo para animación, de ahí el cambio de nombre, ¡y este ejemplo lo demuestra!

Sin embargo, lo que pasa con establecer elementos en un camino es que todo el elemento se coloca en ese camino. Entonces, si ese elemento es, digamos spanChris/span, esa palabra completa se coloca en un solo punto del camino. El truco de yuanchuan consiste en dividir la cadena en letras como tramos y luego colocar cada tramo a lo largo del camino (con un diferente offset-distance).

Hay una ruta de cima de círculo aplicada a cada tramo:

offset-path: path('M 0 200 A 200 200 0 0 1 400 200')

Luego hay algunas matemáticas extravagantes (bastante específicas de esta demostración, por supuesto) para calcular las distancias apropiadas para cada letra:

offset-distance: calc(8% + var(--n) * 89.5% / var(--total));

Lo bueno es que cada tramo tiene su propia propiedad personalizada que afecta el cálculo. No se necesita CSS repetitivo de gran tamaño: enésimo hijo.

div  spanC/span  spanS/span  spanS/span  !-- ... --

¡Y no es sólo para letras! ¡Es bueno para todo tipo de cosas!

Notas relacionadas:

• Esto es mucho más limpio que un método antiguo que escribimos en el blog, donde cada tramo tenía que usarse transform: rotate()con un transform-originpunto común establecido fuera de la letra misma.
• SVG maneja esto sin ningún tipo de piratería. (Esto no es totalmente un truco, pero como tienes que dividirlo en tramos, al menos necesitas aria-labelel padre, lo que lo hace sentir más complicado).
• Quisquilloso (soy el peor): no invente etiquetas HTML como este lápiz de demostración en sitios que no sean de demostración y que la gente necesite usar.