glitch text scripts documentation

last revised: may 31, 2015

In recent years, artists such as Glitchr have helped popularize a certain style of "glitch text" that revolves around the use of combining diacritical marks. These marks are highly stackable, and stacking large numbers of them can lead to interesting/unexpected results.

These scripts use (pseudo)random numbers to rapidly generate this type of glitch text. The accompanying HTML5 glitch text generator can be used to generate glitch text for copy-pasting to social media, or as an art canvas for creating text art.

Update: for stripped-down versions of these scripts designed for online mouseovers, go here.

glitch-text-scripts.js currently contains three scripts for adding random diacritical marks to text:

• glitchText() picks one character at random from the source text and adds a random diacritic after it.
• glitchAll() adds a different random diacritic after every character in the source text. Note that this includes diacritics you already added, so these add up fast!
• glitchAllSame() picks one random diacritic and adds it after every character in the source text.

Each of these scripts takes up to four arguments:

1. id1 is the ID of the element containing the text you want to glitch. This can be an <input> or a standard HTML element such as <p>, <a>, <span>, etc. This argument is required.
2. id2 is the ID of the element where you want to output the glitched text. If this is left blank, then is is assumed that you want to replace the source text with the glitched text, and id1 is used.
3. Pass true to the isInput argument to tell the script that the source text is coming from an <input> element (or I guess <select>). For example, my glitch text generator uses form inputs like these to print to the screen in real-time. Leaving this argument blank (or passing any value that doesn't resolve true) indicates that the source text is coming from a standard HTML element.
4. Pass true to the copyBack argument if you're using different source and output elements, and you want the glitched text to be "copied back" into the source element and replace its content. This could be important if working with form inputs, for example (it's crucial to my HTML5 glitch text generator). Leaving this blank (or passing any value that doesn't resolve true) means you don't want or need this.

There are also two "precise" scripts, which allow the user to choose which diacritic to use instead of picking one at random.

• glitchTextPrecise() picks one character at random from the source text and inserts the specified diacritic after it. Functions the same as glitchText() except it has two more arguments. The fifth, diacritic, is obviously required. This should either hold a numeric value between 768 and 879 (the combining diacritics block; I suppose you could send it other values if you wanted to insert some other random character for some reason), or the ID of a select/input element holding a number in this range. If passing an ID, then you must also pass true to the sixth argument, isInput2.
• glitchAllPrecise() inserts the specified diacritic after every character in the source text. Functions the same as glitchAll() except for the fifth and sixth arguments, diacritic and isInput2 (see previous bullet for how to use these).

There are also "scramble" scripts that replace each character in the source text with a different random character:

• randomizeText() replaces every character in the source text with a random character. It takes the same four arguments as the glitch scripts listed above.
• randomizeTextInRange() is the same as randomizeText() except it allows you to specify the range of characters to be generated using the fifth and sixth arguments, startRange and endRange. Values for these arguments must be numbers, and the numbers should represent HTML entities for Unicode characters. For example, the HTML entity for uppercase A is &#65;, so if you wanted to start with A, you would pass the value "65" to startRange.
• randomizeBlock() is a shortcut to randomizeTextInRange(). Instead of supplying specific start and end values, this script allows you to supply a name for a predefined block of characters. Check the source code for the full list of acceptable values.

Update: the glitchAll and Randomize scripts have a new attribute. This optional attribute (last in attribute list) is skipSpace; pass it true to make these scripts recognize and skip space characters (). This is handy for maintaining word wrap.

glitch-text-scripts.js also contains four helper scripts that the base scripts rely upon:

• Some types of text are picky about which diacritical marks they accept, so randomNumFromLetter() accepts one character as input, and tries to pick a random diacritic from the appropriate range based on that character.
• String.prototype.splice() is used to insert content into the middle of the string. Thanks to stackoverflow user 113716 for the code.
• String.prototype.removeAt() is used to replace characters in the middle of the string.
• randomFromInterval() is used to generate a (pseudo)random number within a given range. Thanks to stackoverflow user Franscisc for the code.

Terms of [mis]use

You may use glitch text and text art that you create using the HTML5 glitch text generator in any way. It's your art; I just made the tool. If you choose to publish your art, it would be great if you could include a link to animalswithinanimals.com/generator/. Also, I'd love it if you submitted your screenshots, animated gifs, etc to the glitch text tumblr at glitchtext.tumblr.com/submit.

You may use the glitch text scripts in your own projects. If you do, it's better for me if you upload the file to your own server than if you link to my server. You may alter the scripts if your project requires it, but don't try to pass it all off as your own work, because that would be a total jerk move. Also, don't try to make money off these scripts without cutting me in on the deal, because that's not cool, either.

If you use the scripts in a project, it would be great if you could include a link to animalswithinanimals.com/generator/. If you do something interesting with these scripts or expand them in some cool way, I'd love if you let me know by emailing me at stallio@animalswithinanimals.com or submitting a link to the glitch text tumblr at glitchtext.tumblr.com/submit.

Questions/comments/feedback

I'm not a professional programmer and my code is probably lousy with bugs and unintended errors (the bad kind, I mean). Likewise, there are probably some amazing features that I could add to the scripts or the HTML5 generator that I haven't thought of. Shoot me an email at stallio@animalswithinanimals.com with your comments, code suggestions, questions, kudos, or other laudations. Hate mail should be sent directly to the trash.