What is going on here?

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.

How it works

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.

Why is it called zalgo?

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.

How do we stop it with css?

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.