Wobbly words in Tweetbot

If you’re using Tweetbot 4 and have the font set to San Francisco, you may have noticed that text in the Compose screen sometimes reformats itself in ways that don’t make sense. Before last night, I thought I was imagining this, but it happened so often as I was tweeting during the Cubs wildcard win over the Pirates1 I knew it was real.

We’re all used to certain types of reformatting as we type. When we get near the end of a line and start typing a long word, that word will jump to the next line when it gets long enough to hit the right edge of the text field and force a word wrap. What I’m talking about in Tweetbot is seeing words jump back and forth from line to line as I add text after them. Let me show you a couple of examples.

Here’s me typing a reply to noted Yankee fan John Gruber:

Tweetbot text jump 1

The last word, the, starts out on the third line of the reply, but when I type the C it suddenly jumps back to the second line. Later on, a similar thing happened:

Tweetbot text jump 2

When I typed the s onto the end of Cardinals, the the jumped back down to the third line again.

This all seemed very weird to me, so I asked (on Twitter, of course) if anyone knew why. Paul Haddad of Tapbots—a pretty authoritative source, I’d say—answered:

@drdrang the counter is using San Francisco and it defaults to proportional numbers.
Paul Haddad (@tapbot_paul) Oct 7 2015 10:29 PM

The right margin of the composition field is defined by the width of the countdown field in the upper right corner. When the counter gets narrower, so does the margin, and more text can fit on every line of the tweet. But in both of my examples, the count is two digits long, which suggests an unchanging width.

That’s the point of Paul’s tweet. While most fonts—even fonts that are otherwise proportional—use monospaced characters for the numerals, San Francisco is different. It has both monospaced and proportional numerals and it’s the proportional ones that happen to be used by default. So the margin width changes a little bit every time the countdown value changes, and that’s what’s causing the text to jump around.

It probably doesn’t help that I use a relatively large font in Tweetbot. That magnifies the small differences in the widths of the numerals and means only a few words can fit on every line of the composition field. These two things will tend to cause more text jumps than if I were using a smaller font. But I need to see what I’m typing, so reducing the font size isn’t in the cards.

According to Paul, the next revision to Tweetbot will use monospaced numerals in the countdown, which will eliminate the jumpiness except when the number of digits changes. This’ll be much better, although personally I’d prefer either a right margin with a fixed width large enough to accommodate a three-digit count or to have the counter moved from the right margin to the otherwise unused space under the user’s avatar.

As tweets about this situation went back and forth between me, Paul, and the Egg McMuffinless Casey Liss, I got a tweet from Ian Bjorhovde directing me to this portion of the WWDC session on San Francisco, which talks about how to use the proportional and monospaced numerals.2 It’s an interesting subtopic and lasts only about three minutes. Well worth your time.

David Loehr mentioned that he uses Avenir, the other font that Tweetbot allows. It doesn’t have the proportional numeral problem, but I find it a little too thin and “gray” for comfortable reading. I’ll stick with San Francisco and hope the Tweetbot revision makes it through Apple’s approval process quickly. The revision is also going to fix the chart labeling bug I talked about a few days ago.

  1. I mention this as a way of preserving a record of this rare Cub playoff appearance and victory for future skeptical generations. 

  2. I always pay attention when Ian tweets at me. He’s a bright guy in his own right, and he’s also the son of a pretty famous structural engineer whose publications I’ve used countless times.