Schreibe Texte auf den Kopf
Code
<html>
<head>
<style>
*{
text-align:center;
}
body{
padding:0 50px;
}
textarea{
width:80%;
border-radius:10px;
border:3px solid lightgrey;
resize:none;
min-height:100px;
height:auto;
}
input{
width:30px;
height:30px;
}
label{
font-size:25px;
}
p{
font-size:20px;
}
h1{
font-size:30px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<section>
<h1>Rotate Your Text 180°</h1>
<p>Geben Sie etwas Text in das obere Feld ein und lassen Sie diesen Text im unteren Feld auf den Kopf stellen.
Der Trick ist, dass die auf dem Kopf stehenden Buchstaben nur lateinisch sind und andere Buchstaben,
die wie auf dem Kopf stehende englische Buchstaben aussehen. Trotzdem irgendwie ordentlich.</p>
<p><textarea id="upsidedown_input" class="input_class">type your text here.</textarea>
<div><label><input type="checkbox" id="upsidedown_reverse" value="yes" class="input_class"> Reverse</label></div>
<textarea id="upsidedown_output" class="input_class" readonly></textarea>
</section>
</body>
<script>
$(function(){
$("#udt").addClass("this_page");
TextFlipper();
$('#upsidedown_reverse').change(TextFlipper);
$("#upsidedown_input").on("input",TextFlipper);
});
function TextFlipper(){
var $upsidedownkey = {
a : '\u0250', b : 'q', c : '\u0254', d : 'p', e : '\u01DD', f : '\u025F', g : '\u0183', h : '\u0265', i : '\u0131', j : '\u027E',
k : '\u029E', l : '\u05DF', m : '\u026F', n : 'u', p : 'd', q : 'b', r : '\u0279', t : '\u0287', u : 'n', v : '\u028C', w : '\u028D', y : '\u028E',
'.' : '\u02D9', '?' : '\u00BF', '!' : '\u00A1', '\'' : ',',
'[' : ']', '(' : ')', '{' : '}', ']' : '[', ')' : '(', '}' : '{', '<' : '>', '>' : '<',
'_' : '\u203E', ';' : '\u061B', '\u203F' : '\u2040', '\u2045' : '\u2046', '\u2234' : '\u2235', '&' : '\u214b', '\"' : '\u201e',',' : '\''};
var $input = $("#upsidedown_input").val().toLowerCase().split("");
var $output = [];
$("#upsidedown_input").val($input.join(""));
$input.forEach(function($letter){
var $char = $upsidedownkey[$letter];
if ( $char === undefined )
{ $output.unshift($letter); }
else
{ $output.unshift($char); }
});
$input = [];
if ( $('#upsidedown_reverse').is(':checked') )
{ $("#upsidedown_output").val($output.reverse().join("")); }
else
{ $("#upsidedown_output").val($output.join("")); }
$output = [];
}
</script>
</body>
</html>