Home |  Electronics |  Toolbox |  Gini and Karl's world |  E-cards |  Photos |  Online-Shop


story time | science club | math blog | computer corner  |  penguin page | home

html/css/jquery: writing upside down

Some time ago a twitter friend posted a message that was written upside down. Of course I was very curious to find out how he did it. A short search and I came across several sites that let you write text and convert it. You can then paste it into twitter, identi.ca, ... (Just remember to enable javascript.) Here are two of them:

http://www.sevenwires.com/play/UpsideDownLetters.html
and
http://www.en.fliptext.net/

In fact it is quite easy to bring this effect to your own webpages: you simply need to rotate the text in css.

Here is the whole code:
<!DOCTYPE html>
<html>
<head>

<style>
.rotatetext {
	-moz-transform: rotate(180deg); 
	-o-transform: rotate(180deg); 
	-webkit-transform: rotate(180deg); 
	-ms-transform: rotate(180deg); 
	position: absolute;
	left: 15px;
	 

}

</style>
<script  src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	$('input#upsidedownbutton').click(function() {
		var text = $('textarea#yourupsidedowntext').val();
		$(".upsidedowntext").addClass("rotatetext");
		$(".upsidedowntext").text(text);

	});
});
</script>
</head>
<body>
Write your text upside down: 
<br><br>
<form name="upsidedownform" onsubmit="return false;"><!-- needed for safari to not submit the form -->
<textarea name="yourupsidedowntext" id="yourupsidedowntext" cols="10" rows="2" id="yourupsidedowntext"></textarea><br><br>
<input  id="upsidedownbutton" value="make your text upside down"   type="button"> 
</form>
<br>
Here's your text now upside down: <br><br>
<div class="upsidedowntext"></div>
<br>

</body>
</html>
I just added some css to make the textarea and the button a bit more fancy.

Write your text upside down. Try it out:




Here's your text now upside down:




Have fun trying it yourself!





Copyright © 2004-2017 Katja Socher, tuxgraphics.org