Superscript asterisk in Unicode

4 min read Original article ↗

If you’re having fun ⃰  messing around with Unicode, but want to put an asterisk after fun, there are a couple of choices.

First, use the regular typewriter asterisk, like fun*.

Doesn’t look right. I’m going for a pro asterisk, like an asterisk in a book, here.

Second, use superscript tags like <sup>*</sup> so it comes out as fun*. That’s a little better, but watch it mess up the line height.

fun
fun*
fun

It’s possible to fix that with CSS on the sup element, like <sup style="line-height: 0;">*</sup>

fun
fun*
fun

Much better. And if you cut and paste from a browser into a text editor, you should get the regular typewriter asterisk back. Not bad. And the CSS can go in a stylesheet so it doesn’t have to be on every sup element. Still, though, the tags are something extra to type.

There’s another option. Unicode has, in the Combining Diacritical Marks for Symbols, a “Unicode Character ‘COMBINING ASTERISK ABOVE’ (U+20F0)”

Looks good:  ⃰

And does it mess up the line spacing?

fun
fun⃰
fun

Nice. But when adding it to a word, looks like it combined with the “n” at the end of “fun” which looks wrong. Even worse in a text editor.

fun

fun⃰

fun

So we need to put a non-breaking space before the COMBINING ASTERISK ABOVE to give it something to combine with but still stick to the word. But now it’s combined with some of the space between two words, so we need a little extra space.

Or do we? I’m going to make a div with big text to look at five characters: the letter a, a non-breaking space, COMBINING ASTERISK ABOVE, a regular space, then the letter b. And see how it looks in several browsers.

a ⃰ b

I’m going to try three browsers: Firefox, Chromium, and GNOME Web (Epiphany). This is a rare-ish browser if I look at the logs, but it’s WebKit-based, so handy for a first check at spotting inconsistencies between Firefox and Safari. (Update: it turns out that Safari on Apple iOS behaves the same way.)

Thinking about the above div for a minute, it seems like logically there should be a non-breaking space combined with the asterisk, followed by a normal space, so there should be space between the asterisk and the b. And that’s how GNOME Web does it:

Superscript asterisk test in GNOME Web

But in Firefox and Chromium it looks like some of the space gets eaten.

Superscript asterisk test in Firefox

To pad it out on those two browsers, we can check Unicode spaces and it looks like a U+2008 PUNCTUATION SPACE should work. That means for a superscript asterisk we would need to do:

  1. a non-breaking space for the combining asterisk to combine with

  2. the COMBINING ASTERISK ABOVE character

  3. punctuation space to make the spacing come out right.

But then it’s too much space for Webkit. The combining asterisk might only work cross-browser if it’s at the end of a paragraph where it would have a period after it, not a space ⃰.

Maybe this is enough Unicode fun ⃰  for today.

 ⃰  Yes, I filed Issue #203230 on webcompat.com.