Cracking the mystery of the unicode horizontal lines

The problem of special characters appearing as horizontal lines or blank boxes

Sometimes people will use cute unicode characters as their Twitter name or Linkedin name. But then the text appears as a bunch of horizontal lines. Here’s a Linkedin user’s name as it appears in Chrome:

What are those horizontal lines? Whenever I scroll by someone’s name like this, I always feel like the name is blacked out. Like, the name is redacted. Maybe there’s some sort of trick where if you roll over black bars, the text will then get revealed. Nope. It’s just mysterious black text.

The same thing happens in the Tweetdeck app on MacOS:

These horizontal lines follow me around everywhere! How about Firefox? I take this particular tweet, and load it up in Firefox, and now the text displays as boxes. Inside each box is tiny bitmap text. Super tiny. Here’s a closer look.

What a mysterious code! These boxes are highlightable, like normal text.

Decoding the mystery

I copied the funky text, starting with the “R” and pasted it into Google.

The text in the Google Search box appears as plain boxes. But then the search results give the name “Ramsey”.

Which yup, that matches with this Twitter user’s last name, Ramsey.

But that doesn’t answer the question of how do I made these boxes appear as normal text. Sure, I can now decode the text in Google. But man. I just want the text to appear normal in my browser.

Since the Firefox boxes were giving a good lead, let’s take one of the boxes, the one right after the “R”.

It looks like it says “01D 552”. Googling that, but nothing comes up. Let’s try the next letter.

Googling “01D 55E”, results in this decode unicode page.

This is the letter “M” as a special unicode character called “U-1D55E” also known as a “Mathematical Double-struck Small M”

Make note that this is a “Mathematical” letter form. We’ll need that piece of knowledge in the fix.

Figuring out which font is being used in the “Unicode as black bars” problem

It looks like the font in your Mac doesn’t have the full unicode library of characters. These fancy letters simply get displayed as a default black bars (in Tweetdeck and Chrome) or as boxes with the Unicode ID (in Firefox).

Using Firefox’s Developer Tools, I can see what font is being used in the Twitter webpage for this name.

The font is:

-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif

Hrmmmm. The Apple System font for Mac OS 10.14 is San Francisco. Font in the System font folder at:

Macintosh HD⁩ ▸ ⁨System⁩ ▸ ⁨Library⁩ ▸ ⁨Fonts⁩ ⁩ ▸ ⁨SFNSText.ttf

Notice how Apple is tricky. They don’t name the font “San Francisco”, instead they code it as “SFNS”. When I run this font in my Font management program, FontExplorer X Pro, the text comes up simply as boxes.

According to this lengthy article, “Font Management in macOS, by Kurt Lang“, to remove the system fonts these days, you have to do a lot of dancing and configuring. Uh. No thanks.

Instead, let’s change the font preferences in Firefox.

How to fix the “Text as Unicode bitmap font box” problem in Firefox

1. Go to your Firefox preferences (Firefox > Preferences)

2. Scroll down to “Fonts and Colors”

3. Click the “Advanced…” button

4. Set the “Fonts for” drop-down to select “Mathematics”

We are using a Math font, because that’s the type of text this is. Math text. Yeah, weird isn’t it? Math has these letters. The whole thing is weird, frankly.

5. Set the “Sans-serif” to a font with “Math” in the name, like “Cambria Math”

6. Click OK. Now you can view the fonts!

Before:

After:

How are people making these crazy customized text strings with mathematical fonts?

There are a bunch of unicode font changer keyboard generation tool things:

• A Unicode Toy
• Cool Symbol Font Keyboard
• Lingo Jam Font Changer
• Mess Letters
• Small Text Generator
• Unicode Character Table
• YayText

Tips on using special Unicode characters

These tools are fun, but when the text doesn’t display on someone’s browser, then they are no fun at all. Please limit using these special Unicode characters to special one-off situations, like specific tweets. Try to avoid using these unique characters in places where they will appear constantly like your name or tagline.