Tags:
create new tag
, view all tags

How to: Turn Text Upside Down

2011-10-19 - 08:23:36 by PeterThoeny in Development
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.
Want to surprise your friends on Facebook, Twitter or Google Plus?
How does this work? The text appears to be upside down (flipped), and it is possible to paste it into text boxes on Facebook and other websites, even though there is no such thing as an upside down character set. Some drawing programs offer text rotation, but that is handled at the application level. So how does upside 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: Ħuʍop ǝpısdn ɹɐǝddɐ ןןıʍ ʇı


Arrow down


Copy upside down text (flipped text) into a Facebook/Twitter/G+ status update

Get Involved!
TWiki is an open source project with 10+ years of history, built by a team of volunteers from around the world, and used by millions of people in over 100 countries. The community is focusing on building the best collaboration platform for the workplace. We invite you to get involved!
How does this work?

The text appears to be upside down (flipped), and it is possible to paste it into text boxes on Facebook and other websites, even though there is no such thing as an upside down character set. Some drawing programs offer text rotation, but that is handled at the application level. So how does upside 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 flipped 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 geek part: How does that work technically? This article is a TWiki page and contains some Javascript code and two textarea boxes, one for the original text, one for the flipped text. We use the onkeyup Javascript hook in the first text box to call an upsideDownText() function each time a key is released:

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

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

<script type="text/javascript">
function upsideDownText() {
  var srcText = document.getElementById( 'src' ).value.toLowerCase();
  var out = '';
  for( var i = srcText.length - 1; i >= 0; --i ) {
    var ch = srcText.charAt( i );
    if( ch == 'a' ) {
      out += '\u0250' }
    } else if( ch == 'b' ) {
      out += 'q' }
    } else if( ch == 'c' ) {
      out += '\u0254'
    // etc....
    } else {
      out += ch
    }
  }
  document.getElementById( 'dest' ).value = out;
}
</script>

First we get the content of the text box identified by id="src". We only process lower case letters, so we convert the string to lowercase using the toLowerCase() method. We could try to convert upper and lowercase characters; that is an exercise left to the interested reader.

Then we loop through the string, character by character, starting from the end of the string. A big if-then-else-if block handles the character conversion. Finally we push the converted string into the text box identified by id="dest", which is the lower text box.

That's it, pretty simple code. View the raw TWiki page to see the complete HTML and Javascript.

Comments

.

Edit | Attach | Watch | Print version | History: r3 < r2 < r1 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r3 - 2011-10-20 - 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.