I've long been fascinated by the overlap between text and image in the world of digital computing. My first programming experience was using BASIC on the TI-99/4A. On that system, graphics were text. If you wanted to draw a spaceship, you would pick a text character and redefine its appearance using the CALL CHAR command. This meant you had to carefully choose which characters to redraw, or you'd be in for a surprise when you printed text to the screen and it was full of ╝tr⚼nge ╝tu◲◲. (See chapter 5 of the first programming book I ever read, Beginner's BASIC.)
When I moved on to DOS and Windows, I played around with batch files and the box-drawing characters. I made ANSI art and messed around with the DOS system prompt. But for me the real fun was the wingdings and dingbats, preinstalled fonts full of strange characters.
Dingbats were both text and obviously-not-text at the same time. You would type with your keyboard and out would come a pirate, a skull and crossbones, a bomb with a lit fuse. The selection of characters was seemingly random and so was the choice of which dingbat was mapped to which character, which led to surprising results and even conspiracy theories. Writing your name and switching to a symbol font is like translating it into an alien language.
Then came Unicode, a Rosetta stone for electronic text. Unicode aspires to one day include every character from every language, but even that statement doesn't account for the thousands of punctuation marks, mathematical operators, bullets, arrows, shapes, symbols, pictographs, emoji, and other marks therein. (Not to mention the ones that haven't been added yet! Unicode is a work in progress, growing with each new version.)
Unicode was revolutionary for text art. No longer were dingbats separated into their own font: they were absorbed into Microsoft's flagship font, Arial. The once-tedious act of piecing together dingbats from different fonts, or characters from different scripts, became simple. Just as important, Unicode allows us to unleash our text art into the wild: to publish it as text where others may copy and paste it, repost it, remix it. Before Unicode, you would've had to save such work, along with the necessary font information, into some sort of document; with Unicode, it's plain text.
Unicode also brought with it an exciting new type of character, combining diacritical marks. Rather than attempt to index every possible combination of character and diacritical mark, Unicode gives us the tools to build our own.
Combining diacritics can be used by themselves but they're not intended to. They are meant only to combine with other characters. Some of them are depicted with a dotted circle representing the void, the absense of a host for them to attach themselves to. They are full characters and yet they are not; they are incomplete, haunted by their potential.
But for text artists, the magic of combining diacritical marks is that they stack. You can use 2, 4, 8, 16 in a row and with the right font (such as Arial), they just keep stacking up, right off the edge of the container that's meant to hold them. They are space invaders, creepi̗̗n̗̗̗̗g̗̗̗̗̗̗ i̗̗̗̗̗̗n̗̗̗̗̗̗̗̗ where they aren't meant to go. Artists like Glitchr have used this glitch text or zalgo text to great effect on social media.
One thing about contemporary social media networks is they tend to offer few options for text formatting. Facebook and Twitter don't even allow for bold or italics. The text is usually a variation of black on white. Facebook recently added a bigger font size but doesn't let you choose which font size you use. So lots of artists were making text art with combining diacritics online, but it was almost always plain text on an off-white background.
I became interested in exploring glitch text combined with color and other formatting. My first attempts were using BBCode on an online message board. The results were promising, but because the message board was a closed community, I was only able to publish the work to the outside world by taking screenshots. When A. Bill Miller invited me to participate in the pl41nt3xt pavilion for The Wrong, I was ready to take the next step and build my own glitch text tool.
The initial goal of my glitch text generator was to create an easy way to add combining diacritics to prewritten text, and then apply formatting to the result. That was all I planned to do at first. The simplest way to add large numbers of diacritics is by using random number generators, so the tool is built in large part around randomness. (Doing it in a nonrandom way would be complicated because the text becomes longer with each diacritical mark you add.)
Soon I discovered that the code to add a mark after each character was very close to the code to replace each character. I built in that feature too, and called it scramble. (This may have been the wrong name, as people expect it to rearrange characters rather than replace them, but haven't found a better one.) With this feature -- the ability to generate random strings of Unicode characters from within a given range -- the tool began to take shape as more than just a glitch text generator, but a text art canvas. From there it was just a matter of adding features (more Unicode blocks, more formatting options, and finally CSS animations). I also rewrote the scripts to be easier to use for mouseover effects on websites.
click or tap to glitch this text
hover mouse to glitch this text
My glitch text generator does not currently have a save function. It's easy enough to copy and paste the resulting text, but other than taking screenshots, no real way to save the animations or formatting settings. (Someday I may get around to building one, or a new version of the tool with that feature.) I posted a number of screenshots and gifs of work I'd created, but this wasn't always enough. Fortunately, as the tool's creator, the keeper of the code, I had another option: rewrite the code to output exactly what I want.
My text art gallery is a collection of standalone text art works. Each one is essentially a customized version of the glitch text generator. The first works in the gallery show this most clearly: they were designed to take advantage of a bug in the web browsers of the time involving glitch text. This bug has since been fixed in most browsers, though it is still present in Microsoft Edge and Internet Explorer.
Later works like Dancing Shades and Fading Blocks center around more "image-like" Unicode characters, such as Shapes and Block Elements. No image files are used; no "graphics" are drawn to the screen other than Unicode text. The actual sequence of characters is randomly generated for each viewing, and the user can click the text to randomize it again.
Eventually I wanted something with more precision than random number generators could give me. I wanted a tool for picking the exact characters I liked and placing them in the order of my choosing. Eventually I found inspiration in a Twitter meme.
In the course of making the glich text generator I had come to love the slider control (range inputs, in HTML speak). Sliders are tactile. In the physical world, we've been using them for decades. I have similar controls on my refrigerator, my mixing board. They're intuitive to use and fun to fiddle with.
Every Unicode character has an underlying number, an index or code point. My latest tool Type Slider maps a slider directly to this value. Just move the slider until you find a character you like, then click a button to add it to your text. This way, Type Slider allows you to compose text using any text character, including those that are undefined or invalid, using a simple, uncluttered interface.
Type Slider's configuration options can make it highly precise or deliberately sloppy. You can alter the range of characters, even picking specific blocks, making it simple to locate the exact character you want, particularly with a keyboard and arrow keys. Or you can extend the range to all of Unicode. You can also change the slider's width, making it wider (and easier to use) or shrink it all the way down to 0 (unusable). Use a short slider with a broad range on a touch device for maximum imprecision.
Warning: These sliders may make this page hard to read