Leveraging the power of Unicode

Petar M
2 min readAug 24, 2015

--

Background

Recently I was working on a project where we were adding support for some new languages. One of those languages were German. Now German is notorious for having some really long words. Part of that is due to the fact that they can combine multiple words together into one. For example the word Rückenstrecken which consists of the words Rücken (back) and strecken (extension).

Handling too long text in UILabel

UILabel has a property where you can set what behaviour you wish to have should the text inside it be too long. A couple of the options available is to truncate end, scale down the text with a smaller font size or to line break it. I’ll focus a bit on the last option.

Using unicode to power your line breaks in UILabel

This is where Unicode comes in to aid the German. In the case of words composited from several others it is preferrable to line break them between those words as to make it easier to read. We could just add a line break in our Localizable.strings file. But that would cause the word to line break in all places where it’s used. In some places in the app it might be able to fit, while not in others. What we want to do is to add some sort of line break hint to tell the text system that if it needs to line break it shuold do so at a specific place.

One of the ways this can be done in unicode is by simply adding the character named soft hyphen where you want a line break. It is a special character that won’t be visible as it takes up zero space but it will tell UILabel to line break at it’s position if needed. There are a couple of different ways of adding this character to your Localizable.strings file. One way is to use OS X’s built in characters input (CMD + ctrl + space) and simply search for soft hyphen. The problem with this approach is that the soft hyphen is invisible. Which means it will be very difficult to know it’s there and people using VCS might get very confused as to what’s going on. What I prefer to do instead is to add it as a unicode escape character. That’s simply done by typing \U00AD in your Localizable.strings file. So now our exmaple word Rückenstrecken would look like Rücken\U00ADstrecken.

This technique is most probably available on other platforms as well as on the web too.

--

--