2 min read
By Tobias Skjelvik
December 10, 2022
What is up with the title of this page? Why is the text floating everywhere?!
Short answer: because it is zalgo text or cursed text.
Unicode encoding of text supports combining characters. These lets you add diacritics above a regular letter. An example is adding a
~ over an
o producing an
õ. With unicode you can stack all the different diacritics over and under a letter, producing a really tall character. These will overflow if not handled correctly.
According to wikipedia in 2004 there were images posted to a forum of distorted cartoons with characters bleeding distorted text from their eyes. They often exclaimed "Zalgo!". As a result, there now exists multiple zalgo text generators like this zalgo.org
Many wild theories were created, trying to find out where the word zalgo came from. In 2009 the creator of the first zalgo cartoon issued a statement saying: I'll tell you where it came from. From me. I just made it up.
Simply make sure your HTML element has
overflow: auto. This will keep all zalgo characters within the normal line height. It will not prevent the zalgo from floating over other text in the same element. A potential downside of
overflow: auto is that any fixed height / width elements will receive a scroll bar if the text content is too big. The element will NOT consider the diacritics when creating the scrollbar - thus it is quite safe to use. See it in action in this gif:
Now you know how to prevent annoying users like me from floating all over lists of usernames after entering zalgo into the username field.