Voltear texto verticalmente en Firefox ( sin filter : flipV(); flipH() )

furoya · #1 (**permalink**) 05/06/2007, 12:26

Voltear una imagen vertical u horizontalmente es fácil : se usa un editor y se carga la imagen ya volteada.

El problema aparece en los textos.

Internet Explorer permite usar filtros para crear el efecto, que por supuesto no funcionan en otro navegador.

Aquí dejo un método que puede ser útil en algunos casos y siempre que el texto no sea muy grande.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>REFLEJO.</title>
<script type="text/javascript">

function voltear1(){
var contRefl = "";
var objOrig = document.getElementById( "enves" );
var alto = parseInt(objOrig.offsetHeight);
var contOrig = objOrig.innerHTML;
var capas = alto;

for(c=0; c<capas; c++){
contRefl += "<div style='position:absolute; top:"+c+"px; height:1px; border-collapse:collapse'><div unselectable='on' style='margin-top:"+((alto*-1)+1+c)+"px;'>"+ contOrig +"</div></div>";
}

document.getElementById("reves").style.height = alto +"px";
document.getElementById("reves").innerHTML = contRefl;
}

onload = voltear1;
onresize = voltear1;
</script>
<style type="text/css">
body {color:#ffffff; background-color:#000000; }
#enves , #reves {position:relative; font-weight:900; font-size:46px; font-family:sans-serif; color:#000000; background-color:#ffffff; margin-bottom:20px;}
#reves div {-moz-user-select:none; cursor:not-allowed; overflow:hidden; border-collapse:collapse;}

</style>
</head>
<body>
<h2>Reflejo vertical de texto. (IE, FF)</h2>

<div id="enves">_QWERTYUIOP </div>
<div id="reves"></div>

</body>
</html>

Está probado en FF2 y en Opera9.2 (al igual que los que puse más abajo), pero también anda en IE. Claro que ahí no se justifica usarlo, porque un filtro es más eficiente.

derkenuke · #2 (**permalink**) 05/06/2007, 16:23

Qué bueno furoya, me ha costado pillar porqué funciona así pero quitando el overflow:hidden se ve bastante bien. Son muchas capas las que hay que crear si el texto tiene gran tamaño pero está muy bien. Ahora estoy experimentando un poco más con ello, puede dar resultados muy vistosos.

Gracias por compartirlo!

derkenuke · #3 (**permalink**) 05/06/2007, 16:47

Y luego pasan estas cosas por postear esto (funcion color() cortesía de caricatos

! )

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>REFLEJO.</title>
<script type="text/javascript">


function color(n) {
    return "0123456789ABCDEF".charAt(parseInt(n / 16)) + "0123456789ABCDEF".charAt(parseInt(n &#37; 16));
} 

function voltear1(){
    var contRefl = prueba = "";
    var objOrig = document.getElementById( "enves" );
    var alto = parseInt(objOrig.offsetHeight);
    var contOrig = objOrig.innerHTML;
    var capas = alto;
    
    for(c=0, col=0; c<capas/2; c++, col+=255/(capas/2) ){
        var colHex="#"+color(col)+color(col)+color(col);
        contRefl += "<div style='position:absolute; top:"+c+"px; height:1px;'><div style='margin-top:"+(c+1-alto)+"px; color: "+colHex+";'>"+ contOrig +"</div></div>";
    }

    document.getElementById("reves").style.height = alto +"px";
    document.getElementById("reves").innerHTML = contRefl;
}

onload = voltear1;
onresize = voltear1;
</script>
<style type="text/css">
#enves , #reves {
    position:relative; 
    font-weight:900; 
    font-size:70px; 
    font-family:"arial black"; 
    color:#000000; 
    margin-bottom:-44px;
}
#reves div { 
    overflow:hidden;
}

</style>
</head>
<body>
<h2>Reflejo vertical de texto. (IE, FF)</h2>

<div id="enves"> derkeNuke </div>
<div id="reves"></div>

</body>
</html>

Bonito bonito, me convence el script. También se podría hacer el reflejo de una imágen, intentaré probarlo...

furoya · #4 (**permalink**) 11/06/2007, 17:07

Qué bueno que te haya gustado. Y sí, uno de los principales problemas es la cantidad de capas. Por eso no lo publiqué en CSS, sería mucho código para escribir.

Me la tomé con los filtros porque me parece una buena forma de hacer que -si algunos efectos se ven en Mozilla y quizá en algún otro- los usuarios que vienen de IE no van a tener el clásico argumento de "tal cosa no se ve".

Probé el que pusiste y me tira un error, pero después desaparece y el texto no cambia. Claro que lo estoy probando en un IE6 y en realidad estos inventos son para más FF.

De todas formas, entiendo que hay un coloreado de texto en cada capa. Y me acordé que hace algún tiempo escribí algo así y no recuerdo si lo puse en el foro.

Si está repetido me avisan.

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>COLOREA FUENTE.</title>
<style>
body{background-color:#000000; }
h2{color:#ffffff}
#contieneTexto{position:relative; font:bold 80px 'sans-serif'; color:#ff0000; }
.capas{position:absolute; overflow:hidden;}

</style>
<script language= "JavaScript">
var texto = "DEGRADADO";
var color = 0;
var textoAlto , grado;
var cadaCapa = "";

function inicia(){
document.getElementById('contieneTexto').innerHTML = texto;
textoAlto = document.getElementById('contieneTexto').offsetHeight;
grado = Math.floor(255/(textoAlto*0.5));

if(textoAlto > 4){
for(c=0; c<textoAlto; c++){
cadaCapa += '<span class="capas" style="height:'+textoAlto+'px; color:rgb(255, '+color+', 0); text-align:center">'+texto+'</span>\r\n';

textoAlto -= 2;
color += grado;
}
document.getElementById('contieneTexto').innerHTML = cadaCapa;
}
}

</script>
</head>
<body onload="inicia()">
<h2>Efecto para colorear un texto con degradado vertical. IE / FF.</h2>

<div id="contieneTexto" unselectable="on"></div>

</body>
</html>

No sé qué pasa con el overflow. Creo que no es necesario, me quedó de las pruebas y como soy desprolijo no lo borré.

Te dejo otro. Pero si no tienes una máquina rápida ¡ junta paciencia para verlo !

Rotar Texto

Lo del reflejo de imagen se puede, pero no en IE, allí hay que poner un hack o una discriminación en el escript para aplicarle filtros. El problema es que el navegador de MS extremó sus medidas de seguridad y revisa cada imagen que carga aunque tengan la misma dirección. Y si haces un voltéo horizontal de una imagen de 200px de ancho ... va a cargar la imagen 200 veces para revisarlas una por una.

Pero como falta justo ese ejemplo, te agradezco si pones lo que vayas experimentando.

saludos

furoya

derkenuke · #5 (**permalink**) 12/06/2007, 01:45

Sí, hay un error, pero me lo ha puesto el sistema de foros, jeje. Si te fijas en la función color hay un caracter % que debe ser sustituido por la barra de división /. También lo probé en IE

El código de rotar imágen ya no lo tengo aquí (lástima). Aunque también me funcionaba en IE creo, pero de todas maneras si la imagen era medianamente grande, como dices, son demasiadas capas.

En fin, la solución me ha gustado mucho para reflejos puntuales o botones pequeños, no queda nada mal.

Un saludo furoya.

furoya · #6 (**permalink**) 14/06/2007, 15:08

Ah! Ya lo entendí.

Después de mandar el mensaje vi dónde estaba el problema.
Preparé otra versión con la sombra inclinada que no necesita ajustar a mano el margen. Quizá a alguien le sirva como inspiración para simular un wave y hacer el efecto de "reflejo en agua".

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>SOMBREADO.</title>
<script type="text/javascript">


function color(n) {
	return "0123456789ABCDEF".charAt(parseInt(n / 16)) + "0123456789ABCDEF".charAt(parseInt(n % 16));
} 

function voltear1(){
	var contRefl = prueba = "";
	var objOrig = document.getElementById( "enves" );
	var alto = parseInt(objOrig.offsetHeight);
	var contOrig = objOrig.innerHTML;
	var capas = alto;
	objOrig.style.marginBottom = (alto/2.5)*-1 +"px";

	for(c=0, col=0; c<capas/2; c++, col+=255/(capas/2) ){
		var colHex="#"+color(col)+color(col)+color(col);
		contRefl += "<div style='position:absolute; top:"+c+"px; height:1px;'><div style='margin-top:"+(c-alto)+"px; margin-left:"+(c*2-alto/2.5)+"px; color: "+colHex+";'>"+ contOrig +"</div></div>";
	}
	document.getElementById("reves").style.height = alto +"px";
	document.getElementById("reves").innerHTML = contRefl;
}

onload = voltear1;
onresize = voltear1;
</script>
<style type="text/css">
#enves , #reves {
	position:relative; 
	font-weight:900; 
	font-size:70px; 
	font-family:"arial black"; 
	color:#000000; 
}
#reves div { 
	overflow:hidden;
}

</style>
</head>
<body>
<h2>Efecto sombra de texto inclinada. (IE, FF)</h2>

<div id="enves"> Sombreado </div>

<div id="reves"></div>

</body>
</html>

También se podrían meter los caracteres en span y con letter-spacing simular una inclinación en "y".

Lo de Caricatos, bue ... todos le robamos ideas. Es un experto en el tema gradientes.

derkenuke · #7 (**permalink**) 14/06/2007, 15:57

Muy buen ejemplo. Siguiendo con las variables, y ahora que has dicho lo del efeco de agua se me ha ocurrido ondear el reflejo...

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>REFLEJO.</title>
<script type="text/javascript">


function color(n) {
    return "0123456789ABCDEF".charAt(parseInt(n / 16)) + "0123456789ABCDEF".charAt(parseInt(n &#37; 16));
} 

function voltear1(){
    var contRefl = prueba = "";
    var objOrig = document.getElementById( "enves" );
    var alto = parseInt(objOrig.offsetHeight);
    var contOrig = objOrig.innerHTML;
    var capas = alto;
    
    // si (capas/2) son dos circunferencias de radio r (720º=2*2*PI)
    // c actual será x
    // luego x será c*4*PI/(capas/2)
    // el radio de la curvatura a elegir por el usuario

    for(c=0, col=0, r=2.5; c<capas/2; c++, col+=255/(capas/2) ){
        var ang = c*4*Math.PI/(capas/2);
        var elCos = Math.sin(ang)*r;
        var colHex ="#"+color(col)+color(col)+color(col);
        contRefl += "<div style='position:absolute; top:"+c+"px; height:1px;'><div style='margin-top:"+(c+1-alto)+"px; color: "+colHex+"; margin-left:"+(elCos)+"px;'>"+ contOrig +"</div></div>";
    }

    document.getElementById("reves").style.height = alto +"px";
    document.getElementById("reves").innerHTML = contRefl;
}

onload = voltear1;
onresize = voltear1;
</script>
<style type="text/css">
#enves , #reves {
    position:relative; 
    font-weight:900; 
    font-size:70px; 
    font-family:"arial black"; 
    color:#000000; 
    margin-bottom:-44px;
}
#reves div { 
    overflow:hidden;
}

</style>
</head>
<body>
<h2>Reflejo vertical de texto. (IE, FF)</h2>

<div id="enves"> derkeNuke </div>
<div id="reves"></div>

</body>
</html>

¿cuánto juego da esto no? jeje

Shiryu_Libra · #8 (**permalink**) 14/06/2007, 16:22

buena forma de jugar

amigo derkenuke, no refleja

buena forma de hacer una especie de competencia de "tennis artistico" como en el foro de Diseño Grafico... sino fuera por que estamos en Javascript,

casi casi pensara que estan haciendo eso

saludos

sigan desarrollando esas mentes inquietas

derkenuke · #9 (**permalink**) 17/06/2007, 14:13

Cita:

Iniciado por Shiryu_Libra

amigo derkenuke, no refleja

Sí, eso es por lo que me pasó antes, que la barra de división en la función color() no sale como es.

Lo he probado con imagenes, pero no es lo mismo. Se tiene que hacer con una imagen frontal, porque si utilizamos una imagen que contenga un punto de fuga, ya la cosa cambia. Eso es por la teoria de reflexiones, no sé si sabréis algo de eso. Podéis ver cómo funciona en:
http://etc.usf.edu/clipart/4100/4145...ctive_2_lg.gif
http://www.tpub.com/content/draftsma...4276_295_1.jpg
Como veis el reflejo fuga al mismo punto en el espacio, ya que las aristas del dibujo deben ser paralelas en el reflejo y en la realidad. Cosa que no pasa con el programita este:

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>REFLEJO.</title>
<script type="text/javascript">


function color(n) {
    return "0123456789ABCDEF".charAt(parseInt(n / 16)) + "0123456789ABCDEF".charAt(parseInt(n &#37; 16));
} 

function voltear1(enves,reves){
    var contRefl = "";
    var objOrig = document.getElementById(enves);
    var alto = parseInt(objOrig.offsetHeight);
    var contOrig = objOrig.innerHTML;
    var capas = alto;

    for(var c=0, op=0.75, opp; c<capas; c++, op-=0.75/capas ){
        opp=parseInt(op*100);
        contRefl += "<div style='position:absolute; top:"+c+"px; height:1px;'><div style='margin-top:"+(c+1-alto)+"px; filter: alpha(opacity="+opp+"); -moz-opacity: "+op+";'>"+ contOrig +"</div></div>";
    }
    document.getElementById(reves).style.height = alto +"px";
    document.getElementById(reves).innerHTML = contRefl;
}


onload = Function("voltear1('enves','reves'); voltear1('enves2','reves2'); ");    // voltear2();
//onresize = Function("voltear2();");

// http://www.ubuntu-es.org/files/pictures/picture-7917.gif

</script>
<style type="text/css">
#enves , #reves, #enves2, #reves2 {
    position:relative; 
    font-weight:900; 
    font-size:70px; 
    font-family:"arial black"; 
    color:#000000; 
    margin-bottom:-44px;
}
#enves2, #reves2 {
    margin-bottom:0px;
    top:-100px;
    left:500px;
}
#reves div, #reves2 div { 
    overflow:hidden;
}

</style>
</head>
<body>
<h2>Reflejo vertical de imagen. (IE, FF)</h2>

<div id="enves"><img src="http://www.bocamina.com/images/noticias/mibladem/1.jpg" width="394" height="263" /></div>
<div id="reves"></div>


<div id="enves2"><img src="http://www.ubuntu-es.org/files/pictures/picture-7917.gif" width="43" height="48" /></div>
<div id="reves2"></div>

</body>
</html>

Así que sólo nos valdría para imágenes pequeñas, y que no fuguen, que no sean perspectivas o que sean frontales. Iconos y botoncitos más que nada.

Bueno, pues seguiremos con el tema.

Un saludo.

furoya · #10 (**permalink**) 19/06/2007, 11:46

Gracias Shiryu_Libra. No sé si es una competencia, más bien sería como tirar ideas para que los que recién empiezan con JS las desarmen y así aprendan un poco más.

Dime, derkenuke, ¿no conviene más usar las etiquetas CODE del foro en vez de PHP? Así no te cambiarían el "%" por el "%".

Tu ejemplo es brillante, ya tenemos un "filtro wave". Lo que me recordó que en las FAQs hay un lindo efecto que hasta ahora se podía sólo en IExplorer

52. Un efecto chachi para texto y no muy complicado

y entonces le di otra vuelta más a tu código.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>REFLEJO.</title>
<script type="text/javascript">

function color(n) {
	return "0123456789ABCDEF".charAt(parseInt(n / 16)) + "0123456789ABCDEF".charAt(parseInt(n % 16));
} 


	var contRefl = "";
	var objOrig , alto , contOrig , capas;

function voltear0(){
	objOrig = document.getElementById( "letras" );
	alto = parseInt(objOrig.offsetHeight);
	contOrig = objOrig.innerHTML;
	capas = alto;

}

function voltear1(){
	contRefl = "";
	var onda = Math.floor(Math.random()*8) + 2;

	for(c=0, col=0, r=2.5; c<capas; c++, col += 255/(capas) ){
		var ang = c* onda* Math.PI/ (capas/2);
		var elCos = Math.sin(ang)* r;
		var colHex = "#"+ color(col)+ color(col)+ "ff";
		contRefl += "<div style='position:absolute; top:"+c+"px; height:1px;'><div style='margin-top:"+(c+1-alto)+"px; color: "+colHex+"; margin-left:"+(elCos)+"px;'>"+ contOrig +"</div></div>";
	}

	document.getElementById("charco").style.height = alto +"px";
	document.getElementById("charco").innerHTML = contRefl;

voltear2();
}

function voltear2(){
setTimeout("voltear1()" , 100)
}

onload = voltear0;
onresize = voltear0;
</script>
<style type="text/css">
body {
	background-color:#ccccff;
}
#letras , #charco {
	position:relative; 
	font-weight:900; 
	font-size:70px; 
	font-family:"arial black"; 
	color:#000000; 
	margin-bottom:-44px;
	cursor:pointer;
	cursor:hand;
}
#charco div { 
	overflow:hidden;
}

</style>
</head>
<body>
<h2>Reflejo de texto animado "en agua". (IE, FF)</h2>

<p>Click para ver el efecto.</p>

<div id="letras" onclick= "voltear1()"> TEXTO EN AGUA </div>
<div id="charco"></div>

</body>
</html>

Es muy experimental, y muuuy lento en algunas máquinas. En vez de reescribir el contenido de charco habría que usar nodos, recorriéndolos uno por uno. A ver si de esa forma anda mejor. Pero yo no lo voy a hacer porque con los nodos todavía nos tratamos de 'usted'.

Tu último ejemplo también tiene algún problema ( me cache!, y yo que creí que era desprolijo! ). Voy a ver si hago una versión horizontal y la posteo.

Shiryu_Libra · #11 (**permalink**) 19/06/2007, 12:42

furoya, Derkenuke, es que los miro que les apasiona el Javascript, y pues se estan entreteniendo mucho

por eso digo que es un juego

y si, despierta un poco el sentido de querer realizar "algo", viendo como hacen y deshacen el codigo... muy buen ejemplo motivacional

suerte

derkenuke · #12 (**permalink**) 19/06/2007, 14:15

Cita:

Iniciado por furoya

Dime, derkenuke, ¿no conviene más usar las etiquetas CODE del foro en vez de PHP? Así no te cambiarían el "%" por el "%".

Es que las etiquetas [code] dan menos problemas, pero no me colorean el código y es más interesante colorearlo... No de si [html] colorean.

Un saludo.

furoya · #13 (**permalink**) 21/06/2007, 15:14

Ah, sí, Shiryu_Libra, que nos gusta jugar con JS es seguro.

Hasta hace pocos años había al menos un tema de éstos por quincena. Espero que realmente sea un verdadero ejemplo motivacional y que volvamos a verlos. Gracias de nuevo por tu apoyo.

Aquí está el flipH() para Firefox. ( Todavía tengo la duda sobre si funciona en otros. )

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>REFLEJO.</title>
<script type="text/javascript">

function voltear1(){
var contRefl = "";
var objOrig = document.getElementById( "der" );
var alto = parseInt(objOrig.offsetHeight);
var ancho = parseInt(objOrig.offsetWidth);
var capas = ancho;

var imagen = new Image();
var ruta = imagen.src = "http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif ";

if((navigator.appVersion.indexOf("MSIE")!=-1) && (navigator.appVersion.indexOf("Opera")==-1)){
contRefl = "<img src='"+ ruta +"' style='filter: flipH();'> ";
}
else{
for(c=0; c<capas; c++){
contRefl += "<div style='position:absolute; left:"+c+"px; width:1px; border-collapse:collapse'><div unselectable='on' style='margin-left:"+((ancho*-1)+1+c)+"px;'><img src='"+ ruta +"'></div></div>";
}
}
document.getElementById("izq").style.height = alto +"px";
document.getElementById("izq").style.width = ancho +"px";
document.getElementById("izq").innerHTML = contRefl;
}

onload = voltear1;
onresize = voltear1;
</script>
<style type="text/css">
body {color:#ffffff; background-color:#000000; }
#der , #izq {position:relative; background-color:#ffffff; margin-bottom:20px;}
#izq div {-moz-user-select:none; cursor:not-allowed; overflow:hidden; border-collapse:collapse;}

</style>
</head>
<body>
<h2>Reflejo horizontal de imagen. (IE, FF)</h2>

<table><tbody>
<tr><td><div id="der"><img src = "http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif "> </div></td><td><div id="izq"><img src = "http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif "> </td></div></tr>
</tbody></table>

<b>En <u>Internet Explorer</u> usa filtro y en otros usa capas.</b>

</body>
</html>

Probé HTML, derkenuke . Sí colorea. Me parece que yo también voy a empezar a usarlo.

Suerte

derkenuke · #14 (**permalink**) 03/07/2007, 17:46

Estoy intentando hacer el reflejo vertical de una capa (con o sin contenido) en una posición que no sea relativa y no hay manera! No me sale.

La capa del reflejo me da igual que esté en relative.

¿Me echas un cable?

derkenuke · #15 (**permalink**) 05/07/2007, 18:15

Lo de la capa todavía no he podido seguirlo intentando, pero el próximo proyecto ya lo tengo pensado... a ver si consigo hacer algo como esta imagen ayudándome de las imágenes del fondo y el resto hacerlo con javascript

http://www.flickr.com/photos/tomstardust/247298942/

furoya · #16 (**permalink**) 29/10/2007, 15:15

Disculpa la demora, derkenuke, pero no estuve viniendo por el Foro.
No entiendo muy bien lo de la capa. La original no tiene que ser relativa necesariamente; el reflejo sí, porque todas las capas absolutas que lleva dentro la usan como referencia para acomodarse. De otra forma tomarían como punto de origen el 0:0 del documento.

Por alguna razón no pude ver el sitio de flickr, pero si ya tienes algo hecho me gustaría saber de qué se trata.

saludos

furoya

furoya · #17 (**permalink**) 20/10/2008, 17:19

Y aquí tenemos otra forma de flipV

Cómo logar un efecto espejo con javascript?

Es para imágenes, aunque yo sigo insistiendo en que para voltear una foto lo mejor es editarla. El problema sigue siendo el texto.

La siguiente versión también usa canvas con transform para la familia Mozilla y filtros con matrix para IE y la familia webkit.

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html><head>
<title>EFECTO MATRIX FLIP.</title>
<script type="text/javascript">
function voltea(){

var miTexto = document.getElementById("texto");
var ancho = miTexto.offsetWidth;
var alto = miTexto.offsetHeight;

if(navigator.userAgent.indexOf("Firefox") != -1){
var canvas = document.getElementById("reflejo");
canvas.style.display = "block";

var cadena = miTexto.textContent;
miTexto.style.display = "none";

canvas.width = ancho;
canvas.height = alto;
var ejemplo = canvas.getContext("2d");

var colorFondoTexto = 
document.defaultView.getComputedStyle(miTexto, null).getPropertyValue("background-color");

var colorTexto = 
document.defaultView.getComputedStyle(miTexto, null).getPropertyValue("color");

var grosorTexto = 
document.defaultView.getComputedStyle(miTexto, null).getPropertyValue("font-weight");

var medidaTexto = 
document.defaultView.getComputedStyle(miTexto, null).getPropertyValue("font-size");

var fuenteTexto = 
document.defaultView.getComputedStyle(miTexto, null).getPropertyValue("font-family");

ejemplo.fillStyle = colorFondoTexto;
ejemplo.fillRect(0, 0, ancho, alto);
ejemplo.save();
ejemplo.transform(-1, 0, 0, 1, ancho, 0);
ejemplo.translate(0, alto*0.8);
ejemplo.mozTextStyle = grosorTexto+ " " +medidaTexto+ " " +fuenteTexto;
ejemplo.mozPathText(cadena);
ejemplo.fillStyle = colorTexto;
ejemplo.fill();
ejemplo.restore();
}}
onload = voltea;
</script>
<style>
html{height:100%; width:100%; }
body{color:#ffffff; background-color:#000000; }

#contenedor{background-color:#ffff80; overflow:visible; 
min-width:10px; min-height:10px; float:left; height:1; width:1; 
border:1px solid #ffff00; white-space:nowrap; -webkit-transform: matrix(-1,0,0,1,0,0); }

#texto{font:bold 100px 'verdana' 'arial' 'serif'; 
filter:progid:DXImageTransform.Microsoft.Matrix(M11='-1', M12='0', M21='0', M22='1', SizingMethod='auto expand'); color:#ffffff; 
background-color:#000000; zoom:1; }

#reflejo{display:none; }
</style>
</head><body>
<h2>Voltea texto con filtro <tt>Matrix()</tt> en Internet Explorer 5.5+, con funci&oacute;n <tt>transform CSS</tt> en Safari / Chrome y con funci&oacute;n <tt>transform canvas</tt> en Firefox.</h2>

<div id="contenedor"><span id="texto">Foros del Web</span><canvas 
id="reflejo"></canvas></div>

</body></html>

Un detalle. En el ejemplo de Panino5001 se menciona que canvas funciona en los navegadores estándar, lo que puede inducir a la idea de que es un código válido. No lo es. Sí —creo— está incluído en el borrador de HTML5, y es más de lo que se puede decir del filtro Matrix. Pero hasta que no lo aprueben no será válido.