Dot dot dot…

Let’s talk text truncation! This is from our internal documentation, and I thought it would be interesting to share.

In Sketch, you can name your layers and Symbols and so on. Those names can be short, or they can be long. But we wanted to make sure we deal with long text strings consistently and correctly. When it comes to truncating text (shortening it and adding `…`) there are three available options.

We use 1, and 2. End, and middle truncation.

We truncate text at the end when the text is on a view that can be resized (to reveal more characters) such as the Layer List, or where you can double-click the text to edit it as you can scrub horizontally. To use start or middle truncation here would make the text ‘jump’ when trying to edit it.

However, we do truncate text in the middle when the text is a label in a view that cannot be resized, such as the Inspector or a popover. This is because the end of your layer or Symbol’s, etc name can just as important as the beginning, which is why we rule out option 3. When Sketch users name their Symbols for example, they’re typically named with slashes to help organise them.

To round things off, we’re sure to use the horizontal ellipsis special character (…) rather than three full stops.

Oh, and you might also notice that we use a trailing ellipsis on some of our buttons. This doesn’t mean that there is some text cut off, but rather part of the macOS standards to signify that clicking on the button might open an additional sheet or dialog. https://developer.apple.com/design/human-interface-guidelines/macos/buttons/push-buttons/