CODEWITHSUNDEEP
javascriptunicodecharacteralertsuperscript
George
George

Reputation: 1466

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

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.

Upvotes: 8

Views: 20382

Answers (5)

fkleedorfer
fkleedorfer

Reputation: 596

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.

Upvotes: 0

fkleedorfer
fkleedorfer

Reputation: 596

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

Might be an option here.

Upvotes: -1

Robert K
Robert K

Reputation: 30328

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.

Upvotes: 2

Shog9
Shog9

Reputation: 159678

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.

Upvotes: 22

VoteyDisciple
VoteyDisciple

Reputation: 37813

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.

Upvotes: 4

Related Questions