For everyone who has struggled in Construct 2 to do scientific notation, this tutorial is for you!
MOTIVATION
Pode's DIV and iFrame plugins are amazingly powerful, but they provide inconsistent font sizes on mobile devices. I needed a way to consistently display physics questions with superscripts<sup>, subscripts<sub>, line breaks <br/>, theta (θ), and degree (°) symbols.
METHOD
1. Create a sprite font that remaps the higher character codes (192-384) to superscripted and subscripted character glyphs.
2. Whenever the a character is superscripted or subscripted it calls the character code assigned to the associated glyph.
DISADVANTAGES OF THIS METHOD
The higher character codes would normally correspond to non-English characters. This means that they are now unavailable for use and the app can't be translated into a language that uses those characters.
CAPX
See the attached .capx for a working version. You might want to adjust the character maps or the sprite fonts to your liking.
MAKING MODIFICATIONS
1. The sprite sheet itself is imported from a .png image file. I used @blackhornet's "GiveYourFontMono" plugin to create the initial character set, then I worked in Adobe Fireworks to replace the higher characters with smaller monospaced fonts.
2. To adjust the character spacing, remember to change the character width and height properties in the Spritefonts property bar.
3. The following script automatically generates the json data for "subscriptmapdictionary" and superscriptmapdictionary". Copy and paste the text into a file called something.html and open it in Chrome. The resulting json scripts can be copied and pasted into Construct 2.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title></head><body>Copy and Paste these JSON scripts into Construct 2 dictionaries<br/><br/>Superscript Dictionary:<br/><br/>{""c2dictionary"":true,""data"":{<span id="superscriptspan"></span>}}<br/><br/>Subscript Dictionary:<br/><br/>{""c2dictionary"":true,""data"":{<span id="subscriptspan"></span>}}<br/><br/><br/><br/>Complete List of special characters: <span id="completelist"></span></body><script>i = 0;for (i = 65; i < 91 ; i++) {document.getElementById("superscriptspan").innerHTML = document.getElementById("superscriptspan").innerHTML + "\"\"&[h2]"+i+";" + "\"\":" + "\"\"&[/h2]"+(i + 153)+";\"\",";}for (i = 97; i < 123 ; i++){document.getElementById("superscriptspan").innerHTML = document.getElementById("superscriptspan").innerHTML + "\"\"&[h2]"+i+";" +"\"\":" + "\"\"&[/h2]"+(i + 95)+";\"\",";}for (i = 48; i < 58 ; i++){document.getElementById("superscriptspan").innerHTML = document.getElementById("superscriptspan").innerHTML + "\"\"&[h2]"+i+";" + "\"\":" + "\"\"&[/h2]"+(i + 196)+";\"\"";if (i < 57) document.getElementById("superscriptspan").innerHTML = document.getElementById("superscriptspan").innerHTML + ",";}for (i = 65; i < 91 ; i++){document.getElementById("subscriptspan").innerHTML = document.getElementById("subscriptspan").innerHTML + "\"\"&[h2]"+i+";" + "\"\":" + "\"\"&[/h2]"+(i + 215)+";\"\",";}for (i = 97; i < 123 ; i++){document.getElementById("subscriptspan").innerHTML = document.getElementById("subscriptspan").innerHTML + "\"\"&[h2]"+i+";" + "\"\":" + "\"\"&[/h2]"+(i + 157)+";\"\",";}for (i = 48; i < 58 ; i++){document.getElementById("subscriptspan").innerHTML = document.getElementById("subscriptspan").innerHTML + "\"\"&[h2]"+i+";" + "\"\":" + "\"\"&[/h2]"+(i + 258)+";\"\"";if (i < 57) document.getElementById("subscriptspan").innerHTML = document.getElementById("subscriptspan").innerHTML + ",";}for (i = 192; i < 320 ; i++){document.getElementById("completelist").innerHTML = document.getElementById("completelist").innerHTML + "&#"+i+";";}</script></html>