How to Optimize NIB Layouts for Localizations

Read our step-by-step instructions how to optimize NIB layouts for localizations.

Optimize NIB Layouts For Localizations

Abstract:
This page informs about NIB layout issues when it comes to localization. It shows how the One For All NIB layout method can resolve these issues.

We all know and love the fresh dialog styles from Cocoa NIBs. Here is a rather basic example dialog. Looks nice, fresh and clean.

The NIB Layout Copy Problem

Now we create a new language (German) in iLocalize which also copies the NIB layouts from English to German. And here is how the German NIB looks like.

You got the issue? Fine. This is what we're all familiar with. We see this every now and then in various apps (even from Apple!). And this is what we're going to fix now for all our Cocoa applications which use NIBs and localization.

You have been doing your NIB layout in Interface Builder (called IB hereinafter) before, of course. But many of us didn't use the layout rectangle guides before and simply accepted all things like IB adjusted them. – Now let's have a look at the real NIB layout with Layout: Show Layout Rectangles switched on in IB's menu.

Here you see that the object bounds really fit the English texts. IB likes to adjust the size when you create new objects and enter text. This seems to be nice, but it's part of the problem. The next image shows the layout issue for the German localized version much more impressive.

Only Adjust Your (English) Base NIB Layouts To Fit Every Language

This is rather easy, once you know what you have to think about. There is no reason why the dialog title (Saving... / Beim Sichern ...) should not be as wide as possible. The representation (without layout rectangles) is exactly the same. But the text object will fit every language (until you have to do some Finnish or Klingon stuff with much more words – see below for more about this).

For the Cancel button, we have found that a standardized width of 108 pixels works best for all pairs of Cancel / OK buttons. This fits all languages we have localized so far. And it's so easy to remember when you're doing new dialog NIBs: 108 is a nice number, really.

This is all you have to keep in mind, basically:

1. Create text objects as large as possible in the (English) base NIBs.
2. Keep in mind that other languages may use longer wordings.
3. Use Layout Rectangles in IB to check if text objects could be enlarged to the maximum.
4. Use justification attributes of text objects, e.g. right justified text for field description strings left to edit fields.

Here is how the One For All NIB layout fits for both languages in this simple example. (And of course even more complex dialogs would look as good using this method.)

Adjust NIB Layouts After Localizations

When you're done with the NIB layout adjustments in English this way, create your localized versions (best done in iLocalize) and spread the multi-language versions to your localizers. But inform them first, that they MUST NOT adjust NIB layouts themselves, but rather take screenshots of dialogs which don't fit their language. Then they should send back their localization with the screenshots. You will be able and adjust the relevant English base NIBs quickly, so that they fit the localized strings, too.

Updating the localized NIBs from the adjusted English base NIBs is just a piece of cake using iLocalize. Simply update your project in iLocalize and Reset the layout of each localized nib file from its base-language layout in the Update From Bundle process.

Here is a little more complex dialog which can only be cared over time, using the explained method One For All.

Reasons For Using This Method

1. Imagine that your localizers adjust the localized NIBs themselves and damage something (delete objects, resort stuff, delete connections). Who will find it – who will fix it?
2. Imagine you as a developer have changed some connections in a NIB, but didn't change the view of objects. When your localizers update their iLocalize project from your updated application, they may miss the changed NIB layout because there isn't anything changed in the viewable parts. We don't say they WILL miss the changes, but chances are they do.
3. When you create manuals, user guides, brochures, packaging layouts and stuff where you are going to use dialog screenshots, chances are that things are layouted much faster if all localized dialogs have the same size and layout.
4. The face value of your application is much cleaner and more professional for users who use it in various languages.
5. If users are familiar with a complex dialog in their native language, they can even use the app in a foreign language which they don't understand, because the position (!) of objects in the dialog is always the same.
6. ...