Este tema ya está pidiendo a gritos una actualización.
Pero antes que nada quiero agradecer a la persona que me dejó un mensaje exagerando al calificar el efecto del código 'BTLR' (porque cuando descubres cómo funciona produce más gracia que asombro). Todo lo que hace es recrear cada pixel del texto para armar una matriz de puntos, y luego ordenarlos de manera que se vea como el texto rotado.
Algo muy parecido a lo que hacía el objeto del ejemplo en el
mensaje #4. Y digo "hacía" porque estaba en
Windows ME o en
Office 2000, pero ya no viene más y por lo tanto el efecto no se puede ver.
Lo mismo le pasó a
DanielRey, que posteó un código en 2003 —qué raro que no lo vi— para usar con
IE 5.5. Está en la
FAQ #99, pero ni valía la pena enlazarlo.
Ahora se usa un filtro llamado
Matrix que hace más o menos lo mismo y del cual puse 2 links, más arriba. Pero resulta que antes de retirarse,
Bill Gates dejo órdenes expresas de "
mover esas páginas para hacer quedar mal a furoya", y los enlaces hoy están rotos.
En fin. Veamos si esto funciona
http://www.google.com.ar/search?hl=e...G=Buscar&meta=
Volviendo sobre el tema de las compatibilidades, ya se mencionó que hay algunos códigos para crear imágenes vectoriales (aún de un texto) y que permiten una rotación.
VML es un lenguaje que lo hace muy bien, pero seguimos en la misma : anda sólo en
IE.
SVG es una versión más elaborada, pero algunos no la usan porque es propietaria ... de
Adobe.
Y también existe una vieja etiqueta HTML, inventada por
Mac para
Safari, que ahora funciona en casi todos los navegadores ... menos en
IE. Es
canvas, y en el foro hay varios ejemplos.
Panino5001 puso uno en las FAQ
Se puede rotar una imagen usando javascript?
que es para una imagen porque de momento el de texto solamente sería para
Mozilla.
En ese ejemplo se usa para rotar la función
rotation. Pero resulta que
canvas tambien tiene una función
transform que se parece mucho a
matrix, y permite "rotar" sobre los 3 ejes.
De cualquier forma, lo mismo habría que poner en el código una versión para
IE y otra para
FF. Y hasta se podría hacer un editor que genere el código. Pero no lo voy a hacer yo, se lo dejo a quien tenga más neurona.
Lo que sí voy a poner es ooootra forma de inclinar un texto con
canvas, que también es para
Mozilla,
Firefox y familia. Aunque el ejemplo lo hice nada más para
Firefox.
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>TEXTO INCLINADO.</title>
<script type="text/javascript">
function textoInclinado(){
var canvas = document.getElementById('giro');
if (navigator.userAgent.indexOf("Firefox") != -1){
canvas.width = '180';
canvas.height = '180';
var ejemplo = canvas.getContext('2d');
ejemplo.beginPath();
ejemplo.moveTo(15,175);
ejemplo.lineTo(175,15);
ejemplo.stroke();
ejemplo.fill();
ejemplo.fillStyle = 'white';
ejemplo.mozTextStyle = '30px arial';
ejemplo.mozTextAlongPath('Foros del web.', false);
ejemplo.restore();
}
else alert('Para Firefox.')
}
onload = textoInclinado;
</script>
<style type="text/css">
body {color:white; background-color:black; }
#giro {border: 1px solid yellow; }
</style>
</head>
<body>
<h2>Dibuja texto inclinado.</h2>
<canvas id="giro" >Foros del Web.</canvas>
</body>
</html> En este caso se traza una recta entre las coordenadas
15:175,175:15 y se le dice al texto que la use de referencia, como un "renglón". Por supuesto, si en vez de una recta ponemos un arco, una senoidal o hasta un caracter, nuestro texto también le va a seguir el contorno, lo que puede generar efectos muy interesantes.
http://developer.mozilla.org/en/docs/Canvas_tutorial http://msdn.microsoft.com/en-us/libr...26(VS.85).aspx http://microsoft.apress.com/asptoday...arkup-language http://msdn.microsoft.com/en-us/libr...24(VS.85).aspx ¿con que programa abro los archivos SVG? incrustar SVG con HTML Voltear texto verticalmente en Firefox ( sin filter : flipV(); flipH() ) http://www.google.com.ar/search?hl=e...22svg%22&meta=