Tags:
create new tag
, view all tags

Generate Fun Text for Social Media: Strike Out, Mirror, Flipped & Upside Down Text

2012-11-20 - 05:42:15 by PeterThoeny in Deployment
What is TWiki?
A leading open source enterprise wiki and web application platform used by 50,000 small businesses, many Fortune 500 companies, and millions of people.
MOVED TO... Learn more.
This text tool is for fun and to learn Javascript. If you want strike out text, mirrored text, flipped text or upside down text, then this is it. You can copy and paste from this tool into Facebook, Twitter, Google Plus, and other sites.
How does this work? The text appears to be stuck out, mirrored, flipped, or upside down, and it is possible to paste it into text boxes on Facebook and other websites, even though there is no such thing as an strike out or upside down character set. Some drawing programs offer text rotation, but that is handled at the application level. So how does odd text work in normal text input fields? Most websites nowadays support Unicode, which is a universal standard to represent text in computers. Unicode consists of tens of thousands of characters. The first 127 characters of Unicode are ASCII.

Type text:
Arrow down Arrow down
Strike: G̶e̶t̶ ̶s̶t̶r̶i̶k̶e̶ ̶o̶u̶t̶ ̶t̶e̶x̶t̶   — copy & paste it into Facebook Facebook, Twitter Twitter, Google Plus G+
Mirror: ƚxɘƚ bɘɿoɿɿim ƚɘᎮ   — copy & paste it into Facebook Facebook, Twitter Twitter, Google Plus G+
Flipped: ⅁өʇ ʈl!bbөq ʇөxʇ   — copy & paste it into Facebook Facebook, Twitter Twitter, Google Plus G+
Upside-down: ʇxǝʇ uʍop-ǝpısdn — copy & paste it into Facebook Facebook, Twitter Twitter, Google Plus G+

How does this work?

The text appears to be stuck out, mirrored, flipped, or upside down, and it is possible to paste it into text boxes on Facebook and other websites, even though there is no such thing as an strike out or upside down character set. Some drawing programs offer text rotation, but that is handled at the application level. So how does this odd text work in normal text input fields?

Most websites nowadays support Unicode, which is a universal standard to represent text in computers. Unicode consists of tens of thousands of characters. The first 127 characters of Unicode are ASCII. It is possible to create text that appears to be upside down by converting character by character to a Unicode sign that looks like the upside down version of the character. For example "b" becomes "q", and "6" becomes "9". For some characters there is no common character to represent the upside down version. Thankfully Unicode has many characters and it is possible to find one that is a pretty good fit. For example, the flipped version of "f" is "ɟ", which is a Latin character with Unicode number 607 (hex code 025F).

Now for the technical part: How does that work technically? This blog article is a TWiki page and contains some Javascript code and several textarea boxes, one for the original text, the other ones for converted text. We use the onkeyup Javascript hook in the first text box to call a convertText() function each time a key is released:

<textarea rows="5" cols="70" id="src" onkeyup="convertText()"></textarea>

We do the text processing in the convertText() Javascript function:

<script type="text/javascript">
function convertText() {
  var srcText = document.getElementById( 'src' ).value;
  var out = '';
  var chArray = srcText.split('');
  // strike text:
  for( var i in chArray ) {
    out += chArray[i] + '\u0336';
  }
  document.getElementById( 'strike' ).value = out;
  // ....more conversion for other textarea boxes follow...
</script>

First we get the content of the text box identified by id="src". Then we split the text string into an array of characters. We loop through the array, character by character and compose the output string as pairs of original character, followed by the Unicode character 0336, which strikes out the previous character. Finally we push the converted string into the text box identified by id="strike", which is the second text box.

Other conversions follow for the remaining text boxes. That's it, all can be done in TWiki pages (or any system that accepts HTML). View the raw TWiki page to see the complete HTML and Javascript.

-- Peter Thoeny, founder of TWiki.org

Comments

Java script seems to still have a few issues with perfect Mirror image fonts that are in the all Caps

-- Stephen Waner - 2014-11-01

Backwards Example : Ƹ Y X W V U T Ƨ Я Ọ ꟼ O И M ⅃ ᐴ Ⴑ I H Ꭾ ᖷ Ǝ ᗡ Ɔ ᙠ A ( The All Cap fonts that don't show as the true fonts are ) G - K - L - P - Q & Z ( instead they appear as ) Ꭾ - ᐴ - ⅃ - O - ꟼ & Ƹ ( All six are in error ) , I spotted these with ease as I am Mirror sighted

-- Stephen Waner - 2014-11-01

Stephen: It is not possible to create 100% accurate mirror characters with the Unicode character set. You'd need to create a bitmap image, but then it would not be possible to copy & paste as social media comments.

-- Peter Thoeny - 2014-12-10

Check out http://www.zalgotextgenerator.com/ for another text effect which is quite crazy. Like the other effects posted in this article, this one uses Unicode - but it uses combining characters.

-- Vivian Lee - 2016-01-11

To create zalgo text like on that website takes a little more than just a converstion table like for upside down text... it looks like that site adds a random number of combining characters onto each character of text.

-- Vivian Lee - 2016-01-11

.

Edit | Attach | Watch | Print version | History: r3 < r2 < r1 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r3 - 2014-12-10 - PeterThoeny
 

Twitter Delicious Facebook Digg Google Bookmarks E-mail LinkedIn Reddit StumbleUpon    
  • Help
  • Learn about TWiki  
  • Download TWiki
This site is powered by the TWiki collaboration platform Powered by Perl Hosted by OICcam.com Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2017 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.