--- title: "S̷̡̛̼̳̘͖͙̲͔̭͖̫̟̭̘͇̘̖̳͓̻̻͕̖̦̠̽͗̂̅̓̊͆̃̑̍̀́̀͒̇̋T̸̢̧̯̝͍̜̱̱͙͓̹̞̘̱͓̭̮̖͚͇͙͚͎͓́̃̉̍̑͆͜͝Ơ̴̡̧̧̧̢̡̢̢̧̠̜͍̩̣̰͙̹̜̜͉͔̞̺̪̠̟̪͉͖̗̱̥̞̇̃̃̋̃̆̌̐̐͒͒̎͗̂͐̓̄̐̓̿̈́͆͋͑́̈́͊̀̋̓̊̌̌̉̆̈́̓̿͘͘͜͠͝P̶̳̫̼̘̮̠̹̻͎̠̗͚̰̳̠̜̗̞̫͖̳̼͓̤̠̤͍͕͈̭̈́̍͌͗͂̋͒̒̾̈̅̃̒͐̓̋͊͛̾̽́̐̒͑͗̀̓̈́̔̕͜͠͝ͅ ̴̧̢̡̝̟̟͉̱̣̳̖͕̠̙̺̹̹̟̺̳̱̼̫̻͔̜̄̈ z̸̯̗͇͙̖̬̻̐̌a̷̲͍̦̫͔̦͑̂́͑͂̏̚l̷̬͈͈͗́̀͒͛̒͌g̷̨̣͑́͛o̸̡̯̠̝̣͊͋̃͑͜ ̷̧̢͇̪̩͕̎̏̈́ủ̶̢̢͖͔͔͚̘͠s̴̲̭͖̳͖͑͗̋̒͊́̃ě̴̗̺̝͊̒̐͐͐͜r̵̤͗̐̃̈͘s̴̳͚͌̚" url: "https://www.bekk.christmas/post/2022/10/zalgo" authors: ["Tobias Skjelvik"] published: "2022-12-10" updated: "2024-11-07T13:05:28Z" language: "en-US" type: "article" --- # S̷̡̛̼̳̘͖͙̲͔̭͖̫̟̭̘͇̘̖̳͓̻̻͕̖̦̠̽͗̂̅̓̊͆̃̑̍̀́̀͒̇̋T̸̢̧̯̝͍̜̱̱͙͓̹̞̘̱͓̭̮̖͚͇͙͚͎͓́̃̉̍̑͆͜͝Ơ̴̡̧̧̧̢̡̢̢̧̠̜͍̩̣̰͙̹̜̜͉͔̞̺̪̠̟̪͉͖̗̱̥̞̇̃̃̋̃̆̌̐̐͒͒̎͗̂͐̓̄̐̓̿̈́͆͋͑́̈́͊̀̋̓̊̌̌̉̆̈́̓̿͘͘͜͠͝P̶̳̫̼̘̮̠̹̻͎̠̗͚̰̳̠̜̗̞̫͖̳̼͓̤̠̤͍͕͈̭̈́̍͌͗͂̋͒̒̾̈̅̃̒͐̓̋͊͛̾̽́̐̒͑͗̀̓̈́̔̕͜͠͝ͅ ̴̧̢̡̝̟̟͉̱̣̳̖͕̠̙̺̹̹̟̺̳̱̼̫̻͔̜̄̈ z̸̯̗͇͙̖̬̻̐̌a̷̲͍̦̫͔̦͑̂́͑͂̏̚l̷̬͈͈͗́̀͒͛̒͌g̷̨̣͑́͛o̸̡̯̠̝̣͊͋̃͑͜ ̷̧̢͇̪̩͕̎̏̈́ủ̶̢̢͖͔͔͚̘͠s̴̲̭͖̳͖͑͗̋̒͊́̃ě̴̗̺̝͊̒̐͐͐͜r̵̤͗̐̃̈͘s̴̳͚͌̚ ## 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](https://en.wikipedia.org/wiki/Zalgo_text) 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](https://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_](https://knowyourmeme.com/memes/zalgo)_._ ### 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: ![A gif image showing how css contains the zalgo text.](https://cdn.sanity.io/images/ah2n1vfr/bekk-blogg-prod/29ff5a974b127d2ac1e3846698905966854514c1-650x536.gif) _CSS will rule over zalgo_ Now you know how to prevent annoying users like me from floating all over lists of usernames after entering zalgo into the username field.