{"id":302008,"date":"2020-01-28T08:36:13","date_gmt":"2020-01-28T15:36:13","guid":{"rendered":"https:\/\/css-tricks.com\/?p=302008"},"modified":"2020-01-28T08:36:14","modified_gmt":"2020-01-28T15:36:14","slug":"set-type-on-a-circle-with-offset-path","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/set-type-on-a-circle-with-offset-path\/","title":{"rendered":"Set Type on a Circle… with offset-path"},"content":{"rendered":"\n

Here’s some legit CSS trickery from yuanchuan<\/a>. There is this CSS property offset-path<\/code><\/a>. Once upon a time, it was called motion-path<\/code> and then it was renamed. I sort of rolled my eyes at the time, because the property is so obviously for animating things along a path. But you don’t have<\/em> to use it for animation, hence the rename, and this example proves it! <\/p>\n\n\n\n\n\n\n\n

The thing with setting elements on a path though, is that the whole element is plopped on that path. So if that element is, say, <span>Chris<\/span><\/code>, that entire word is placed at a single point on the path. yuanchuan’s trick is to break the string into letters-as-spans, then place each span along the path (with a different offset-distance<\/code>). <\/p>\n\n\n\n

There is a top-of-circle path applied to each span:<\/p>\n\n\n\n

offset-path: path('M 0 200 A 200 200 0 0 1 400 200')<\/code><\/pre>\n\n\n\n
Then there’s some fancy-dancing math (rather specific to this demo, of course) to calculate appropriate distances for each letter:<\/p>\n\n\n\n
offset-distance: calc(8% + var(--n) * 89.5% \/ var(--total));<\/code><\/pre>\n\n\n\n
The beauty is that each span has its own custom property that affects the calculation. No big-chunk-of-:nth-child repetitive CSS is needed.<\/p>\n\n\n\n
<div style=\"--total:14;\">\n  <span style=\"--n:0\">C<\/span>\n  <span style=\"--n:1\">S<\/span>\n  <span style=\"--n:2\">S<\/span>\n  <!-- ... --><\/code><\/pre>\n\n\n\n
And it’s not just for letters! It’s good for all sorts of stuff!<\/p>\n\n\n\n