Proper labels in your mobile apps are crucial in delivering a good experience for your users. Whether labels are used to provide information, instructions, high scores, titles, or anything else, it is imperative to have your labels render in the correct size and format across all device types. Perfect labels are even more crucial when you are dealing with corporate branding. There is often a style code, which needs to be perfectly matched with no exceptions. When writing brandnames, this usually means that a superscript registered trademark will need to be written after the name. The ability to seamlessly include the symbol, ®, varies across different platforms and engines. Let’s take a look a how this could be accomplished.
A Label in iOS
Adding a superscript registered trademark symbol to a native iOS project is incredibly easy. All you need to do is include the symbol in your string. On a mac, you can press Option-R to get the symbol. If you’d like to write the symbol in unicode, in Swift you would write, “\u{00AE}” or in Objective-C, @“\u00AE”. That’s it! The UILabel will automatically format the registered trademark to be superscript. Native iOS labels make the process as painless as possible.
A Label in Cocos2d-x
If you are using labels with bitmap fonts in Cocos2d-x, the task is not as easy. First off, you need to include you own bitmap font files in Cocos2d-x. These include a .fnt and a .png file. Make sure that you are using an ASCII character set, or if it is something different, double check that the registered trademark is a symbol included in the file. The symbol has to be part of the character set to be displayed. Once you add your desired font to the project, try creating a label with the registered trademark symbol and running the app. The symbol appeared! Unfortunately, the symbol is not superscript, but it is the same size as the rest of the characters in the label. To make matters worse, there is no way to superscript a single letter in the label. You could try to make the registered trademark symbol a separate label or sprite and hardcode it to a specific position, but that is hardly ideal. We need a solution that can seamlessly work at any spot in a label and adjust with wrapping text. What can we do?
Cocos2d-x Solution
My favorite solution to this predicament is to resize the symbol in the font file’s .png file. I did this in Gimp, a free open-source raster graphics editor that we have talked about before. I simply resized the registered trademark symbol to half its size and kept the image with the exact same top left alignment. Then, in the .fnt file, find where the symbol is located. Change the width to the new width of the symbol, change the xadvance to the width of the new symbol with a small amount of padding, and leave the height the same since we are working with the same text size. That’s it! Try running the project again with the edited font file, and the registered trademark symbol should appear correctly superscripted.
Conclusion
Although displaying a superscript registered trademark symbol is simple in some cases, the process can be much trickier. Don’t let that hold you back as there are always clever solutions that will get you back on the road in no time. I hope this helps anyone stuck in this situation. Until next time, thanks for reading the HangZone blog.