Superscript and Subscript Parser with Spritefonts!

  • 3 favourites

Attached Files

The following files have been attached to this tutorial:

.capx

spritefonts.capx

Download now 224 KB

Stats

888 visits, 1,502 views

Translations

This tutorial hasn't been translated.

Tools

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>


DEMO

Spritefont parser demo

.CAPX

spritefonts.capx

Download now 224 KB
  • 0 Comments

  • Order by
Want to leave a comment? Login or Register an account!