Using the glitch text generator and text art canvas

last updated: December 01, 2013

About this project

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.

The HTML5 glitch text generator can be used to rapidly generate this type of glitch text for copy-pasting to social media or elsewhere, and also functions as a canvas for creating text art.

Browser requirements/recommendations

The glitch text generator and text art canvas is built using HTML5 and JavaScript. As such, you must be using a newer browser, and you must not have JavaScript disabled.

The generator uses the HTML5 color input, which is not fully supported in all browsers. Chrome and Opera provide a color picker tool, where other browsers will only show a text box that accepts hex color values.

Webkit browsers (Chrome and Safari) have an optimization bug that can result in artifacts being left onscreen when glitch text is resized or rotated. As such, you will get the more unpredictable and "glitchier" results if using one of these browsers.

Mobile and tablet devices

iOS: Works well in Safari, particularly if you're using the touch-friendly glitch text generator, which has larger controls that are easier to use with a touch interface than the small controls in the baseline version.

Android: Does not work in the built-in browesr. Users report it does work in other browsers like Chrome. There is probably a minimum version of Android required. I don't currently know what it is :/

Chrome OS: Works great in Chrome and thus should work on any Chrome tablets.

Other: Might or might not work on Windows phones or other OSes. If you have one, try it out and let me know if/how it works.

The controls

The glitch text canvas can display up to four lines of glitched text, with user-selectable type formatting including shadow and rotation. Each line has a size control and five collapsible formatting panels:

In addition to controls for choosing the number and background color, there are also three buttons that affect the whole screen:

Tips for using the text art canvas

Your experience will probably be greatly enhanced by installing these Unicode fonts.

When you add diacritics to existing text, you end up with text that is taller than the "box" it's in. Diacritics outside this box may not appear onscreen right away. You can force them to appear using one of the Redraw buttons, but this also clears the screen of artifacts that you might want to keep. In this case, try resizing the text.

The "box" holding each line of text runs to the edge of the screen, no matter how short your text is. So if you rotate any text, part of this box could end up "in front of" some of the controls, making them unclickable. The rotate panel has Recenter and Reset buttons, but these too can be blocked. If this happens, try resizing the text or expanding/collapsing panels to move things around until you can click them.

Leaving spaces in your source text allows the text to wrap to multiple lines. This can give interesting results, particularly if the font size is large.

Using Chrome or Safari adds extra glitchy behaviors that you may find desirable, due to the aforementioned optimization bug.

The most diacritic-friendly fonts are Helvetica/Arial, Times, and Tahoma. Courier displays diacritics but doesn't stack them vertically, instead placing them in a grid that you might or might not find useful.

Empty squares/rectangles represent undisplayable characters. Choosing a different font may help, but Unicode is massive, and you likely don't have fonts installed for all every Unicode character, unless you installed those extra fonts.

There are different blocks of diacritical marks, and some characters are picky about which ones they take: Arabic diacritics work on Latin characters, but Latin diacritics don't work on Arabic letters. The buttons that generate random diacritics attempt to pick the "right" type to generate, but you can deliberately try to apply the "wrong" ones using the precise panel. It might work, or you might just get a bunch of empty squares.

Diacritics do not stack well in all types of text. When they don't stack correctly, they may appear as dotted circles, so repeatedly trying to add diacritics can result in large numbers of these circles.

Saving your work

The glitch text generator and text art canvas does not have a "save" function, but:

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

Send your questions, comments, and suggestions to stallio@animalswithinanimals.com. Tumblr users can also submit questions to the glitch text tumblr.