Generated Text Buttons

Wednesday, 2012-10-31; 00:08:40

Let’s say you have some UI elements in your iOS app. These elements have text on them! (Don’t they all!) But these aren’t ordinary elements! These are buttons with a custom styling, with the text designed to integrate with the style. Maybe you want recessed text, or floating text on a background, or some other effect.

Well, normally you’d have to get your resident designer to create all these assets, right? And then whenever the text changes, or you decide you want to tweak the effect, you have to get your designer to tweak their Photoshop file and export you another asset. To think nothing of localization, all the mounds of extra works that creates for your designer, and keeping track of all those files.

Well, if you hate the prospect of even thinking about all that, you’re in luck! Have I got the code for you! Want text masked to a background image, with anything behind it shining through? BAM!

Masked Text

Want text clipped from an image to put on top of some other background? BAM!

Clipped Text

Want recessed, transparent text? BAM!

Recessed, Transparent Text

Want glowing text? BAM!

Glowing Text

Want floating, wooden text? BAM!

Floating, Wooden Text

Don’t like the wood texture? BAM!

Floating, White Text

Want some custom crazy styling that even your MOM wouldn’t want to see in any self-respecting iOS app? BAM!

Crazy, Ugly Text

That’s right, boys and girls, today is your lucky day! All of the above images were generated purely in code, from fonts all included on your favorite iOS device. You can tweak the font family, size, shadow, gradient fill, and a bunch of other attributes. Best of all, this code also supports non-ASCII characters, Unicode characters, and non-Roman language characters (such as Arabic and Japanese), as you can see in the above examples.

If you’ve been looking for this your whole life, then just head on over to GitHub to download the code. BSD-licensed, of course.

(And remember, don’t abuse this code. It can be used both for good and evil!)


This article is the unofficial part two of a three-part series of code that my previous employer, Shiny Things, has graciously allowed me to open source. This code was super-useful in creating one of the early alphas of Sakura Quick Math, and for all I know, this code may still be in use in the current incarnation of the app.

Technological Supernova   Software Development   Older   Newer   Post a Comment