Is it possible to display superscript characters in the alert() dialog?

Question

Is it possible to display superscripted characters (not only numbers) in the alert(), confirm() or prompt() dialogue boxes in JavaScript?

Due to some reasons I need to insert a text:

2 followed by superscripted 'n' 2^n

Into JavaScript alert, confirm and prompt boxes. Fast google searching did help but not exactly I found a way to display superscripted numbers in dialogue boxes using Unicode \u00B character but it doesn't work with characters

alert('2\u00B2'); shows correctly 2^2
alert('2\u00Bn'); shows 2u00Bn

So the goal is to show a character superscripted not the number.

---

^ is used as Power and to show that next character is superscripted, just in case someone gets confused.

Lighthouse

You can try this tool out and copy and paste any superscript characters into the alert string: lingojam.com/SuperscriptGenerator – Forgery

Answer 1

There's nothing magical about that character code - it just happens to be the one picked for the "Superscript two" character. There's also a "Superscript three" (\u00B3) (³) a "Superscript one" (\00B9) (¹), and a "Superscript Latin Small Letter N" (\u207F) (ⁿ). But if you need some other superscript, you're out of luck - alert() doesn't render HTML, so you're limited to the characters defined by Unicode.

You might be better off abandoning alert() entirely, and simulating a modal dialog within the page itself. Many libraries exist to provide this functionality already, including the excellent jQuery UI Dialog.

Aut

+1 for mentioning the jQuery UI. It's the best alternative to alert() by far - and allows for a consistent look across a site. – Comptroller

Answer 2

No, there's no reliable way of getting superscript text into an alert box. You could certainly do it on the page using the HTML <sup> tag, but in an alert box you're more limited.

The problem is: there is no "Unicode \u00B" character. The character you're using is \u00B2 (defined as "Superscript Two"). The fact that there's a two at the end is essentially coincidental. The code point \u00B1, for example, is unrelated (it's the plus/minus sign).

There are a few other characters that have specific superscript versions in Unicode, which you can find in this search, but there aren't superscript versions of every letter.

Letterpress

Answer 3

Unicode, or UTF-8 requires two pairs of characters, or four hexadecimal digits to make a character; 00B2 is recognized as "superscript 2" whereas 00Bn is an invalid hexadecimal value. The superscript numbers 1-3 are: 00B9, 00B2, and 00B3.

Unfortunately there is no magical superscript-prefix that will make the following character superscript. Only HTML <sup> can do that and, like Shog said, alert renders plain text.

Dais

Answer 4

I ended up writing this code for generating unicode superscript integers:

const unicodeSuperscriptNumbers = [
    "\u2070",
    "\u00B9",
    "\u00B2",
    "\u00B3",
    "\u2074",
    "\u2075",
    "\u2076",
    "\u2077",
    "\u2078",
    "\u2079",
  ];

  function superscript(n: number) {
    if (!n) throw "no number provided";
    if (!Number.isInteger(n)) throw "We don't bother with non-integer superscripts for now";
    if (n < 0) return "\u207B" + superscript(n * -1);
    if (n > 10) return superscript(~~(n / 10)) + superscript(n % 10);
    return unicodeSuperscriptNumbers[n];
  }

If you need other characters as well, this blog post lists most, but not all uppercase and lowercase superscript unicode letters, and it's relatively straightforward to extend the code above so it handles other characters.

Discipline

Answer 5

The npm package numbers-to-superscript converts all numbers in the specified string to superscript.

Might be an option here.

Discipline