UI Programming

Add Curved Text to Your Apps

How to properly add some curved text in your app

Another week, another feature for our app. This week I had to make some research about how to add some curved text to our app.

I searched a lot and end up on different resources: from an official (but outdated) Apple example with CoreText, to a post on Stack Overflow written in Swift 2, 3, and 4. However, none of them offered a straightforward, easy to follow, mathematically sound approach.

I made several experiments, trials, and errors, before reaching this solution. I had to properly understand several concepts of how the text can be rendered on the screen and it could be useful to write them on (digital) paper for both the future me and anyone who could need it.

A caveat before starting: this article contains a bit of math, basic geometry, and some concepts of calculus, but nothing extremely complex. I tried to simplify them with graphs and to limit them to the minimum. Don’t be scared!

The Goal

What we want is to draw some text, with custom fonts and colors, on a curved line, rotating the letters so that the result will look like this.