Using the glitch text generator and text art canvas

last updated: November 06, 2019

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 browser that supports HTML5, and you must not have JavaScript disabled. In particular, the generator uses the HTML5 color input, and range (slider) input which are not fully supported in some older browsers.

"Extra-glitchy" browsers

Some older browsers have a bug that can result in artifacts being left onscreen when using the text art canvas. Specifically, stacked diacritics can cause text to be more wide or tall than the browser expects it to be. Then if the text moves, the browser fails to redraw these parts of the text, resulting in "trails" or glitch artifacts.

Most contemporary browsers have fixed this bug. The only browser on my machine that still has this bug is Internet Explorer 10. (Note that you must use the slider-free version with Internet Explorer.) Webkit browsers (Chrome and Safari) used to have this bug in older versions, but haven't for years.

If you do have an older browser like Internet Explorer, you will get particularly glitchy results when using glitch text with the motion animations as well as animations with lots of shadows.

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: Works in Chrome and will therefore work in most current Android phones, especially when using the touch-friendly glitch text generator. Older Android phones had a built-in browser called "Browser"—it doesn't work in this browser.

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 eight collapsible formatting panels:

• The random panel is visible by default. It contains three buttons for generating random glitch text:
  • The á button adds a random diacritic to one character in the source text.
  • ãa̙a̿ adds a different random diacritic after every character in the source text (including other diacritics, so these add up fast!).
  • ááá picks one random diacritic and adds it after every character in the source text (including other diacritics).
• The precise panel lets the user select a diacritic and add it after either one random character or every character in the source text. It is collapsed by default.
• The scramble panel lets you "randomize" the text by replacing every character in the source text (including diacritics) with a different character. It has a drop-down menu that lets you choose different character ranges:
  • §œՔ generates a very broad range of characters. Output is likely to include some characters that are undisplayable on your system and may occasionally output undefined/nonexistent characters.
  • Latin generates only characters in the Latin script (specifically the first six Unicode blocks).
  • Options Greek, Cyrillic, etc on through CJK generate characters only from that specific script.
  • Options such as Letterlike, IPA, Shapes, etc generate various types of "fun" characters.
  This panel is collapsed by default.
• The font panel lets the user set a font color, change the font, set the text to bold and/or italics, and set whether the text is left-aligned, centered, or right-aligned. It is collapsed by default.
• The shadow panel has a check box to turn shadows on/off, choose the shadow color, set the shadow's x/y position relative to the text, and set how blurry or crisp the shadow is. It is collapsed by default.
• The rotate panel has controls to rotate the output text, as well as move the x/y position of the rotation axis. These controls may not work as you expect — or rotated elements may end up in front of controls, making them unclickable — so Recenter and Reset buttons are also provided. This panel is collapsed by default.
• The pos panel has x and y controls for moving the text around the screen. It is collapsed by default.
• The animate panel has a large number of prebuilt CSS animations. There are six drop-down menus full of animations, with a duration setting for each drop-down. You can choose one animation from each. Click Start to start the animations, Pause to stop them, or Pause All to stop all animations on all lines of text. The animate panel also has an advanced subpanel, with three controls:
  • The timing is set to ease by default. Go here for more on animation timing.
  • The direction is set to alternate by default, meaning animations will move forward, then backward.
  • The repeat is set to infinite by default, so that animations will keep repeating until you turn them off.

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

• The FreeFonts button changes the font on some controls to make it easier to work with characters that aren't in the basic fonts:
  • Changes the font on the "type something" boxes to Symbola, which is great for working with Pictographs and such.
  • Changes the font of the "choose diacritic" drop-downs to FreeSans, so you can work with diacritics that aren't in the base fonts (like Combining Diacritical Marks for Symbols).
  (You must download and install the Symbola and Free* fonts for this mode to work. The fonts are free, and are highly recommended.)
• The Redraw button redraws the entire screen. You might want to use this if some of your diacritics aren't visible, or if your screen is full of glitch artifacts from resizing or rotating things, and you want to clear them away.
• The Hide controls button hides all controls (except for an Unhide button) so that you can take prettier screenshots.
• The Hide and redraw button both hides all controls and redraws the screen. Click this if the Hide controls button created glitch artifacts that you don't want, or if some of your diacritics aren't showing up onscreen and you want to take a screenshot.

Tips for using the text art canvas

The text art canvas can display a wide range of text, thanks to the Unicode character set, which contains hundreds of thousands of characters. But most fonts only support a small range of those characters. If you don't have any fonts that support a given character, you won't be able to see it. So your experience will be greatly enhanced by installing fonts that have large numbers of characters. I highly recommend these Unicode fonts, particularly Symbola. Other good fonts to have are Segoe UI Symbol, Arial MS Unicode, and Google Noto.

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 old browsers such as Internet Explorer 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:

• Glitch text can be easily copied and pasted to other environments — Facebook, Tumblr, Twitter, etc all support this beautifully. If you find a site where pasting glitch text doesn't seem to work (for example, Google Plus), then try using a base script opther than Latin (Letterlike, IPA, and Thai are good choices) and adding diacritics to that. (Usually, the problem is the font the site is using. Google Plus uses its own custom font, for example. Using non-Latin characters can "trick" the site into using a different font to display those characters.)
• Keep work you've created using the text art canvas by taking a screenshot. Then consider submitting your screenshots (or gifs made using them, etc) to the glitch text tumblr

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.