The official guidelines indicate a defined method for handling the tabs when there is not enough room to show them fully. This is how it works.

Below are a set of tabs with plenty of room to draw fully. As you can see there is alot of space between each tab which makes it easy to scan and find what you’re looking for.

Once you shrink the space smaller than this the guidelines indicate you can reduce the spacing between each tab until you reach the minimum needed to draw the text without clipping. Here is the width reduced to just before clipping would occur…

From this point onwards any shrinkage is going to cause some of the text to be truncated. So now the guidelines say you must show separators between the tabs so that the user can see this is happening. It also indicates that space be taken from the widest tab until it is equal in width to the second widest, and so forth. Here is the result…

Now we have reached the point where each tab is exactly as wide as the minimum allowed (approx enough for 3 characters). After this point you need to show scrolling buttons so the user and scroll back and forth along the tabs. Like this…

In practice you should rarely see the need for scrolling buttons because unless you are using a large number of tabs and have a slim application window. But the ribbon can handle the scenario should it happen.

And you thought that drawing the tabs was a trivial process!

Leave a Reply