Foros del Web » Creando para Internet » CSS »

Rotar Texto

Estas en el tema de Rotar Texto en el foro de CSS en Foros del Web. hola a todos, espero me puedan ayudar lo que pasa es que necesito que el texto de un td se voltie verticalmente <html> <head> <title>Untitled</title> ...
  #1 (permalink)  
Antiguo 28/04/2006, 14:05
 
Fecha de Ingreso: mayo-2005
Mensajes: 63
Antigüedad: 12 años, 7 meses
Puntos: 1
Rotar Texto

hola a todos, espero me puedan ayudar lo que pasa es que necesito que el texto de un td se voltie verticalmente

<html>
<head>
<title>Untitled</title>

</head>
<body>
<form name="formulario">
<table border="2">
<tr>

<td>prueba</td>

<td style="layout-flow:'vertical-ideographic'">prueba</td>

<td>prueba</td>
<td>prueba</td>
</tr>
<tr>
<td>prueba</td>
<td>prueba</td>
<td>prueba</td>
<td>prueba</td>
</tr>
</table>
</form>
</body>
</html>



lo que necesito es que se voltie pero del otro lado, que las letras empiecen de abajo hacia arriba, ojala me puedan ayudar... gracias
  #2 (permalink)  
Antiguo 02/05/2006, 18:31
 
Fecha de Ingreso: mayo-2005
Mensajes: 63
Antigüedad: 12 años, 7 meses
Puntos: 1
Hola, despues de tiempo de busqueda e intento tras intento encontre la solucion

<html>
<head>
<title>Untitled</title>

</head>
<body>
<form name="formulario">
<table border="2">
<tr>

<td>prueba</td>

<td><b style="position:'absolute';filter='progid:DXImageT ransform.Microsoft.BasicImage(rotation=3)'">prueba </b></td>

<td>prueba</td>
<td>prueba</td>
</tr>
<tr>
<td>prueba</td>
<td>prueba</td>
<td>prueba</td>
<td>prueba</td>
</tr>
</table>
</form>
</body>
</html>

Esta fue la primera solucion que encontre rotando el texto, pero lo malo es que era necesario usar posicion absoluta y eso movia espantoso el texto, teni que encontrar una forma de no usar posicion absoluta

<html>
<head>
<title>Untitled</title>

</head>
<body>
<form name="formulario">
<table border="2">
<tr>

<td>prueba</td>

<td style="layout-flow:'vertical-ideographic'; filter='progid:DXImageTransform.Microsoft.BasicIma ge(rotation=2)'">prueba</td>

<td>prueba</td>
<td>prueba</td>
</tr>
<tr>
<td>prueba</td>
<td>prueba</td>
<td>prueba</td>
<td>prueba</td>
</tr>
</table>
</form>
</body>
</html>

asi no se usa posicion absoluta y se respeta la posicion, espero le sirva a alguien
  #3 (permalink)  
Antiguo 08/05/2006, 12:21
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Hola Davhira :

Había visto tu mensaje, pero no lo respondí porque la verdad es que no tiene una buena solución. La que usaste es solamente para Internet Explorer 5.5+. Me parece que lo mejor es "hacer lo mismo que el filtro" (o más o menos), pero a mano : convertir el texto a imagen y rotalo con un editor.

Lo de usar layout-flow tampoco era necesario, seguramente lo descubriste mientras buscabas y hacías pruebas. El problema es que para aplicar los filtros IE necesita que el objeto tenga un layout, y la posición absoluta se lo da, junto con otras propiedades

filter:Alpha ¿sólo se aplica a imágenes?

Estoy seguro de que en el Foro ya trataron este tema, pero si tú no lo encontraste, yo no lo voy a hacer, así que aprovecho y dejo algún ejemplo más.

Código:
<HTML>
<HEAD>
<TITLE> ROTACIÓN.</TITLE>

<STYLE>
button{font:bold 16px inherit; width:110px}

</STYLE>
</HEAD>
<BODY>
<h2>Rota un elemento 90, 180 y 270 grados.</h2>

Con filtro <tt>rotation</tt>. Para <font face=sans-serif><b>IE 5.5+</b></font>.
<p>
<DIV ID="rotable" STYLE="position:absolute; left:270px;" /*debe tener ancho, alto y/o posición*/>
<h3>QWERTYUIOP</h3>   
<IMG SRC='http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif'>
</DIV>

<BUTTON onclick="rotable.style.filter=''">Rotar 0°</BUTTON> <br>
<BUTTON onclick="rotable.style.filter=
'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)'">
Rotar 90°</BUTTON> <br>
<BUTTON onclick="rotable.style.filter=
'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)'">
Rotar 180°</BUTTON> <br>
<BUTTON onclick="rotable.style.filter=
'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)'">
Rotar 270°</BUTTON> <br>

</BODY>
</HTML>
Otra forma es

Código:
<html> 
<head> 
<title> TEXTO A 45º.</title> 
<SCRIPT>
<!-- 
function giro(){
alfa.style.cssText="position:absolute;height:90%";
bravo.style.display="none";}
// --> 
</SCRIPT> 
<STYLE>
<!--
b{font-weight:900}
// -->
</STYLE>
</head> 
<body ><div id=bravo style="position:absolute;top:0;font:26px wingdings;color:blue;cursor:hand" onclick=giro()><u title="Rotar a 0º.">Æ</u></div>

<!--COMIENZA TEXTO ROTADO-->
<div id=alfa style=" position:absolute; filter:flipH() flipV(); height:90%; writing-mode:tb-rl ">
<h2>Rota el texto a 45º. <br>El efecto "de abajo hacia arriba y de izquierda a derecha" combina <b>CSS</b> y filtros de <b>IE</b>.</h2>
Ver <a href="textovertical1.html">textovertical1.html</a>.
</div>

</body> 
</html>
Son ejemplos muy viejos, seguro habrá que hacerles algunos ajustes.

Una última opción sería

E
N
C
O
L
U
M
N
A
R

L
O
S

C
A
R
A
C
T
E
R
E
S


, que también funciona en todos los navegadores.

Y te felicito. No sólo porque encontraste una respuesta por ti mismo, sino porque la compartiste con nosotros.
  #4 (permalink)  
Antiguo 08/03/2007, 12:08
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Rotar o girar texto e imagen.

Sigo encontrando ejemplos añejos y sigo aprovechando tu tema para postearlos, Davhira.

Éste seguro lo saqué del Foro, pero debe ser anterior a la debacle del 2002 y ya no debe estar disponible.

Código:
<html> 
<head> 
<title> ROTACIÓN DE UN OBJETO DE TEXTO EN SUS TRES EJES.</title> 
<SCRIPT>
<!-- 
function eje1() {
texto.Rotate(15, 0, 0);
}

function eje2() {
texto.Rotate(0, 15, 0);
}

function eje3() {
texto.Rotate(0, 0, 15);
}

// --> 
</SCRIPT> 
<STYLE>
<!--
strong{font-weight:900}
.btn{background:#00dddd; align:center; cursor:default}
// -->
</STYLE>
</head> 
<body >
<h2>Rotación de un objeto de texto en <strong>IE5+</strong>.</h2>
<table><td>
<OBJECT ID="texto" 
 CLASSID="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6"
 STYLE="position:relative; width:300px; height:300 px">
	<PARAM NAME="SourceURL" VALUE="">
	<PARAM NAME="CoordinateSystem" VALUE="0">
	<PARAM NAME="MouseEventsEnabled" VALUE="0">
	<PARAM NAME="HighQuality" VALUE="1">
	<PARAM NAME="PreserveAspectRatio" VALUE="-1">
	<PARAM NAME="Line0001" VALUE="SetLineStyle(1,0)">
	<PARAM NAME="Line0002" VALUE="SetLineColor(0,0,0)">
	<PARAM NAME="Line0003" VALUE="SetFillColor(255,128,0)">
	<PARAM NAME="Line0004" VALUE="SetFont('serif', 24, 0, 0, 1, 0)">
	<PARAM NAME="Line0005" VALUE="Text('QWERTYUIOP', 0, 0, 0)">
</OBJECT>
</td><td style=padding:30px>

<table><tr><td>
<input type=button onClick=eje1(); value="Eje X">
</td><td>
<input type=button onClick=eje2(); value="Eje Y">
</td><td>
<input type=button onClick=eje3(); value="Eje Z">
</td></tr>
<tr class=btn><td 
onmouseover="giro1=setInterval('eje1()',500)" onmouseout="clearInterval(giro1)">Giro X
</td><td 
onmouseover="giro2=setInterval('eje2()',500)" onmouseout="clearInterval(giro2)">Giro Y
</td><td 
onmouseover="giro3=setInterval('eje3()',500)" onmouseout="clearInterval(giro3)">Giro Z
</td></tr></table>

</td></table><p>

Cada botón <b><font style=background:buttonface>Eje</font></b> rota el texto 15º; los <tt>mouseover</tt> <b><font style=background:#00dddd>Giro</font></b> le dan rotación continua.<p>
<fieldset style="padding:0 10px"><legend>código : </legend>
<pre>&lt;OBJECT ID="NOMBRE_ID"
 CLASSID="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6"
 STYLE="position:relative; width:<font color=red>300px</font>; height:<font color=red>300px</font>">
	&lt;PARAM NAME="HighQuality" VALUE="<b><font color=chocolate>1</font></b>">
	&lt;PARAM NAME="Line0001" VALUE="SetLineStyle(<b><font color=blue>1, 0</font></b>)">
	&lt;PARAM NAME="Line0002" VALUE="SetLineColor(<b><font color=magenta>0,0,0</font></b>)">
	&lt;PARAM NAME="Line0003" VALUE="SetFillColor(<b><font color=green>255,128,0</font></b>)">
	&lt;PARAM NAME="Line0004" VALUE="SetFont(<b><font color=orange>'serif', 24, 0, 0, 1, 0</font></b>)">
	&lt;PARAM NAME="Line0005" VALUE="Text(<b><font color=teal>'QWERTYUIOP', 0, 0, 0</font></b>)">
&lt;/OBJECT></pre>
</fieldset><p>
<blockquote>
<font color=red><tt>width:</tt></font> y <font color=red><tt>height:</tt></font> deben ser iguales al doble del tamaño del texto.<p>

HighQuality(<b><font color=chocolate>modo</font></b>)<br>
<b>modo=0</b> => Baja resolusión.<br>
<b>modo=1</b> => Alta resolusión.<p>

SetLineStyle(<b><font color=blue>tipo, grosor</font></b>)<br>
<b>tipo=0</b> => Sin línea de contorno de texto.<br>
<b>tipo=1</b> => Línea continua.<br>
<b>tipo=2</b> => Linea discontinua.<br>
<b>grosor=0-9</b> => Ancho de la línea de borde.<p>

SetLineColor(<b><font color=magenta>R, G, B</font></b>)<br>
Intensidad del color (<b>R</b>=rojo, <b>G</b>=verde, <b>B</b>=azul)
de 0 a 255 de la linea de contorno de texto.<p>

SetFillColor(<b><font color=green>R, G, B</font></b>)<br>
Intensidad del color (<b>R</b>=rojo, <b>G</b>=verde, <b>B</b>=azul)
del relleno del texto.<p>

SetFont(<b><font color=orange>'font', Tam, B, It, Sub, Tach</font></b>)<br>
<b>font</b>: Arial, Verdana, etcétera.<br>
<b>Tam</b>: El tamaño de la letra.<br>
<b>B</b>: 0=> Normal; 1=> Negrita.<br>
<b>It</b>: 0=> Normal; 1=> Cursiva.<br>
<b>Sub</b>: 0=> Normal; 1=> Subrayado.<br>
<b>Tach</b>: 0=> Normal; 1=> Tachado.<p>

Text(<b><font color=teal>'texto', X, Y, Z</font></b>)<br>
<b>texto</b>: El texto que se muestra.<br>
<b>X</b>: Posición X inicial.<br>
<b>Y</b>: Posición Y inicial.<br>
<b>Z</b>: Posición Z inicial.<p>
</blockquote>

</body> 
</html> 
<!--
<PARAM NAME="CoordinateSystem" VALUE="0">
<PARAM NAME="MouseEventsEnabled" VALUE="0">
<PARAM NAME="HighQuality" VALUE="0">
<PARAM NAME="PreserveAspectRatio" VALUE="-1">
<PARAM NAME="Line0001" VALUE="SetLineStyle(1,0)">
<PARAM NAME="Line0002" VALUE="SetLineColor(0,0,0)">
<PARAM NAME="Line0003" VALUE="SetFillColor(255,128,0,255,128,0)">
<PARAM NAME="Line0004" VALUE="SetFont('serif',24,0,0,1,0)">
<PARAM NAME="Line0005" VALUE="Text('QWERTYUIOP',0,0)">
--> 
Otro del que no dejo ejemplo es

Using a Matrix Transform
Matrix filter.

Todos siguen siendo para IExplorer y Windows.

Última edición por furoya; 25/10/2009 a las 10:37 Razón: El ejemplo ya no anda.
  #5 (permalink)  
Antiguo 05/06/2007, 13:18
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Re: Rotar Texto

Quedé con culpa porque en este tema pusimos solamente versiones del efecto para IE, así que empecé a trabajar en algo que funcionara también en Firefox.

Resulta que en

Texto Vertical

hablé de un viejo experimento usando ASCII-Art, y como no tenía nada mejor, empecé a trabajar desde allí.
Ninguno de los 2 próximos ejemplos es exactamente ése, ni tampoco se acercan al rotation, al layout-flow o al writing-mode de MS; pero, como dije, los pongo para lavar culpas.

El primero se podría haber hecho con un escript, pero creo que así se entiende mejor. Está hecho con ASCII-CSS-Art y -por supuesto- no es un texto real sino "dibujado". Aunque no es muy serio, a alguien puede servirle.

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>BTLR ASCII CSS ART. </title>
<style type="text/css">
body {background-color:black; color:white; font-family:default; }
.bl{background-color:white; color:white; font-size:14px; line-height:6px;}
.ng{background-color:black; color:black; font-size:14px; line-height:6px;}
</style>
</head>
<body>
<h2>Texto a 270° dibujado con ASCII / CSS Art.</h2>

<blockquote>
<span class="bl">&#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0;</span><br>
<span class="bl">&#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><br>
<span class="bl">&#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0;</span><br>
<span class="bl">&#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0; </span><span class="ng">&nbsp; &nbsp;</span><span class="bl">&#xa0; </span><br>
<span class="bl">&#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><br>
<span class="bl">&#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><br>
<span class="bl">&#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><br>
<span class="bl">&#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><br>
<span class="bl">&#xa0; </span><span class="ng">&nbsp;</span><span class="bl">&#xa0; </span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0;</span><span class="ng">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="bl">&#xa0;</span><br>
<span class="bl">&#xa0; </span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0; &#xa0; &#xa0; &#xa0; </span><br>
<span class="bl">&#xa0; </span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0; &#xa0;</span><span class="ng">&nbsp; </span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><br>
<span class="bl">&#xa0; </span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0; </span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><br>
<span class="bl">&#xa0; </span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0; </span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><br>
<span class="bl">&#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; </span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0; </span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><br>
<span class="bl">&#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><br>
<span class="bl">&#xa0; &#xa0;</span><span class="ng">&nbsp; &nbsp;</span><span class="bl">&#xa0; &#xa0; &#xa0; </span><span class="ng">&nbsp; &nbsp;</span><span class="bl">&#xa0; </span><br>
<span class="bl">&#xa0; </span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0; &#xa0; &#xa0; &#xa0; </span><br>
<span class="bl">&#xa0; </span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0;</span><span class="ng">&nbsp; &nbsp; &nbsp;</span><span class="bl">&#xa0; </span><br>
<span class="bl">&#xa0; </span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0; &#xa0; &#xa0; </span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><br>
<span class="bl">&#xa0; </span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0; &#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; </span><br>
<span class="bl">&#xa0; &#xa0;</span><span class="ng">&nbsp; &nbsp;</span><span class="bl">&#xa0; &#xa0; &#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0;</span><br>
<span class="bl">&#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0; </span><span class="ng">&nbsp;</span><span class="bl">&#xa0; </span><br>
<span class="bl">&#xa0; </span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0; </span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><br>
<span class="bl">&#xa0; </span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0; &#xa0; &#xa0;</span><span class="ng">&nbsp; &nbsp; &nbsp;</span><span class="bl">&#xa0; </span><br>
Continúa en el mensaje siguiente.
  #6 (permalink)  
Antiguo 05/06/2007, 13:20
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Re: Rotar Texto

Viene del mensaje anterior.

Código:
<span class="bl">&#xa0; </span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0; </span><br>
<span class="bl">&#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0;</span><br>
<span class="bl">&#xa0; </span><span class="ng">&nbsp; &nbsp; &nbsp;</span><span class="bl">&#xa0; &#xa0; &#xa0; &#xa0; &#xa0; </span><br>
<span class="bl">&#xa0; &#xa0; &#xa0; &#xa0; &#xa0;</span><span class="ng">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="bl">&#xa0;</span><br>
<span class="bl">&#xa0; &#xa0;</span><span class="ng">&nbsp; &nbsp;</span><span class="bl">&#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0;</span><br>
<span class="bl">&#xa0; </span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0; &#xa0;</span><span class="ng">&nbsp; </span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><br>
<span class="bl">&#xa0; </span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0; </span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><br>
<span class="bl">&#xa0; </span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0; </span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><br>
<span class="bl">&#xa0; </span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0; </span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><br>
<span class="bl">&#xa0; &#xa0;</span><span class="ng">&nbsp; &nbsp;</span><span class="bl">&#xa0; &#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><br>
<span class="bl">&#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0; </span><span class="ng">&nbsp; &nbsp;</span><span class="bl">&#xa0; </span><br>
<span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0;</span><br>
<span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0; &#xa0;</span><span class="ng">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="bl">&#xa0;</span><br>
<span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0; &#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><br>
<span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0; &#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><br>
<span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0; &#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><br>
<span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0; &#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><br>
<span class="bl">&#xa0;</span><span class="ng">&nbsp; &nbsp; &nbsp; </span><span class="bl">&#xa0; &#xa0; &#xa0;</span><span class="ng">&nbsp; &nbsp;</span><span class="bl">&#xa0; </span><br>
<span class="bl">&#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0;</span><br>
</blockquote>

</body>
</html>
El segundo sí muestra el 'texto' en la fuente que hayamos declarado, pero tampoco es un texto real. Y uso un escript porque sería practicamente imposible escribir el código a mano. Lo pongo solamente como muestra, ya que el tiempo de rendering puede ser enorme, y directamente proporcional a la superficie del párrafo; lo que lo hace más que inútil en una página real.

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>BTLR.</title>
<script type="text/javascript">
function btlr(){
var contFin = "";
var objIni = document.getElementById( "derecho" );
var objFin = document.getElementById( "torcido" );
var alcho = parseInt(objIni.offsetHeight);
var anto = parseInt(objIni.offsetWidth);
var contIni = objIni.innerHTML;
var i , j;
objFin.style.height = anto +"px";
objFin.style.width = alcho +"px";

for(i=0; i<alcho; i++){
for(j=0; j<anto; j++){
contFin += "<div style='position:absolute; top:"+(anto-j-1)+"px; left:"+i+"px; background-color:#ffffff; height:1px; width:1px; overflow:hidden'><div style='white-space:nowrap; cursor:not-allowed; margin-left:"+ (j*-1) +"px; margin-top:"+(i*-1)+"px; background-color:#ffffff; overflow:hidden;'>"+ contIni +"</div></div>"}}

objFin.innerHTML = contFin;
}
//onload = btlr;
</script>
<style type="text/css">
body{color:#ffffff; background-color:#000000; }
#derecho , #torcido {position:relative; font: bold 16px sans-serif;postion:relative; border-collapse:collapse; color:#000000; background-color:#ffffff; overflow:hidden;}
</style>
</head>
<body>
<h2>Simulaci&oacute;n de texto rotado a 270°. ( IE 5.5+, FF )</h2>

<p><span id="derecho">Foros del Web</span></p>

<div id="torcido"> <input type="button" value="270°" onclick="btlr(); return false"> Clic para rotar. ( El efecto puede demorar varios segundos en mostrarse. )</div>

</body>
</html>
Al menos éstos sí funcionan en FF. Y peor es nada.

Impresionante uso de CSS.
  #7 (permalink)  
Antiguo 02/06/2008, 08:59
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Respuesta: Rotar Texto

Acá hay una forma de "rotar" un texto en minúsculas a 180°.

http://www.fliptext.org/

http://www.revfad.com/flip.html

Me los enviaron K3nny y roc2107 (gracias !) y lo que hacen es convertir el texto a su versión "girada" en unicode.

Los problemas son : que no todos los caracteres tienen esa versión (a la "l" todavía no la resolvieron), que los ejemplos no contienen letras del español (como la "ñ") y que nosotros estamos en un foro de desarrolladores web, así que el texto limpio no nos sirve, necesitamos el código para meterlo en la página, porque así es más seguro que lo vean.

Hice esta herramienta para tratar de suplir esas falencias y que a nosotros nos sean más útiles.

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CARACTERES GIRADOS. </title>
<script type="text/javascript">
var gir = new Array();
gir['a'] = 592;
gir['b'] = 113;
gir['c'] = 596;
gir['d'] = 112;
gir['e'] = 477;
gir['f'] = 607;
gir['g'] = 387;
gir['h'] = 613;
gir['i'] = 305;
gir['j'] = 638;
gir['k'] = 670;
gir['l'] = 124; //8402;bien,pero mucho espaciado //108; //639;
gir['m'] = 623;
gir['n'] = 117;
gir['ñ'] = 7797;
gir['o'] = 111;
gir['p'] = 100;
gir['q'] = 98;
gir['r'] = 633;
gir['s'] = 115;
gir['t'] = 647;
gir['u'] = 110;
gir['v'] = 652;
gir['w'] = 653;
gir['x'] = 120;
gir['y'] = 654;
gir['z'] = 122;
gir['.'] = 729;
gir[' '] = 32;
gir['['] = 93;
gir['('] = 41;
gir['{'] = 125;
gir['?'] = 191;
gir['¿'] = 63;
gir['!'] = 161;
gir['¡'] = 33;
gir["\'"] = 44;
gir["\\"] = 92;
gir["/"] = 47;
gir['<'] = 62;
gir['_'] = 8254;
gir[';'] = 1563;
gir[','] = 699;
gir['-'] = 45;
gir['+'] = 43;
gir['|'] = 124;
gir['#'] = 35;
gir['$'] = 36;
gir['='] = 31;
gir[':'] = 58;
gir['ç'] = "596;&#786";
gir['á'] = "592;&#791";
gir['é'] = "477;&#791";
gir['í'] = "305;&#791";
gir['ó'] = "111;&#791";
gir['ú'] = "110;&&35;791";
gir['ü'] = "110;&#804";

//gir['ù'] = "110;&#790";
//gir['û'] = "110;&#812";

function rotar(){
var txtARot = document.getElementById("aRotar").value.toLowerCase();
var tot = txtARot.length;
var rotad = "";

for(c=tot-1; c>=0; --c){
var letra = txtARot.charAt(c);

if(gir[letra]) rotad += "&#" + gir[letra] + ";";
else alert("El caracter \"" + letra + "\" no es valido.")
}
document.getElementById("muestra").innerHTML = document.getElementById("rotados").value = rotad;
}

</script>
<style type="text/css">
body {color:#ffffff; background-color:#000000;}
input , p {width:90%; font-family:"Arial Unicode MS", "Lucida Sans Unicode", Batang; text-transform:lowercase;}
#muestra {font-size: 125%; background-color:#333333; text-align:right;}
</style>
</head>
<body>
<h2>Muestra texto rotado 180° y su c&oacute;digo.</h2>

A rotar <br><input type=text id=aRotar onkeyup="rotar()"> <br>
C&oacute;digo <br><input type=text id=rotados readonly=readonly> <br>

Muestra
<p id=muestra></p>

</body>
</html>
Usé el método de seudoarrays asociativos como uno de los ejemplos anteriores; pero lo escribí de la manera más 'conocida' para que quienes recién empiezan en JS lo pudieran entender mejor.

Van a notar que todos los caracteres se convierten a código, incluyendo a los que no hace falta (como la "o" ó la "b", que es una "q" al revés). Es nada más que para complicarle la vida al que mire nuestro código fuente .

Si se les ocurren más caracteres los agregamos. Y por supuesto, si el navegador no reconoce unicode, o el sistema operativo no tiene instalada ninguna fuente que contenga todos estos caracteres, no se van a ver.

Última edición por furoya; 20/10/2008 a las 17:45 Razón: corregir entities
  #8 (permalink)  
Antiguo 20/10/2008, 17:49
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Respuesta: Rotar Texto

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=
  #9 (permalink)  
Antiguo 22/01/2009, 08:46
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Respuesta: Rotar Texto

Y ya que nombramos a Safari, resulta que también tiene un filtro -webkit-transform: rotate(deg) que funciona en Chrome. La ventaja es que trata al texto como tal, no lo convierte a imagen como hace canvas.

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>ROTAR TEXTO CON WEBKIT.</title>
<style type="text/css">
body {background-color:#000000; color:#ffffff; font-size:100%; }
#girado {background-color:#ffffff; color:#000000; font-size:3em; width:7em; 
margin-top:3em; -webkit-transform: rotate(315deg); text-align:center; 
border:1px solid #ff0000; }
</style>
</head>
<body>
<h2>Texto rotado para Safari, Chrome.</h2>

<div id="girado">Foros del Web.</div>
</body>
</html> 
  #10 (permalink)  
Antiguo 22/01/2009, 09:23
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Rotar Texto

Las CSS transformations por ahora solo son para webkit y para mozilla firefox 3.1 justo ayer estaba investigando sobre esto, FUROYA please, podrías explayarte sobre la rotación de imagenes con canvas?, me parece lo más asequible de momento, por lo menos hasta que salga el FireFox 3.1 de Internet explorer ni me ocupao.
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #11 (permalink)  
Antiguo 22/01/2009, 09:29
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Respuesta: Rotar Texto

Es que ya puse chorrofientosmil pirillones de enlaces. Y Panino5001 puso varios ejemplos. Igual, sigo insistiendo, a menos que sea para una animación ... y encima interactiva, para rotar imágenes se usa un editor. Nuestro problema es el texto.
  #12 (permalink)  
Antiguo 22/01/2009, 09:34
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Rotar Texto

Es que justamente es eso, planeo hacer rotación interactiva de imagenes, se que para eso existe flash, pero no me gusta ni me parece accesible, mi idea es conseguir rotar una imagen y texto para poder crear una página interactiva con puro javascript. Uhmmm, aunque resulte complicado.

Saludos!!
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #13 (permalink)  
Antiguo 26/01/2009, 12:15
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Respuesta: Rotar Texto

Bueno. El problema es que en este tema se habla sólo de texto. Hay varios que mencionan la rotación de imágenes. Yo me acuerdo de éste que es del 2003

rotar una imagen

pero no avanzó porque nunca volvieron para hacer las aclaraciones del caso. Lo pongo como ejemplo de cuan vieja es la pregunta (¡ni se te ocurra revivirlo!! )

En la FAQ que mencioné

Se puede rotar una imagen usando javascript?

hay un enlace a un tema más nuevo. Ése se puede seguir.

Yo no puse un ejemplo de matrix para canvas porque ya están en la web. No lo inventé y no valía la pena explicar lo que ya está explicado en tutoriales.
Para que no busques el enlace, es

http://developer.mozilla.org/en/docs/Canvas_tutorial

El problema es que tú necesitas combinar ambos. Quizá una salida sería meter el texto como imagen y rotar ésta solamente.

Panino5001 (en realidad, él es el experto) hizo uno muy bueno de unos bichos o mariposas, pero no recuerdo si eran interactivas. Habría que buscarlo o preguntarle.

Ahora que me acuerdo, acá hay otro tema que no resolvió nada, pero lo aproveché para tirar un par de ideas.

Boardgame

Allí hay más enlaces que puedes seguir. Así ves otras opciones al canvas.

Supongo que si alguien cae en este tema usando el buscador para "rotar una imagen" estos datos también le van a servir.

Que el rotate() también funciona en FF3.1 es un buen dato. No pude hacer experimentos porque tengo un 3.05 y no lo quiero cambiar ¡A ver si me dejan de andar los complementos!
(Tengo instalado el Flashblock)

Estoy visitando el Foro cada 2 ó 3 meses, por eso no me ofrezco a ayudarte con las animaciones, con los datos que te di seguramente las vas a resolver antes de mi próximo mensaje.

Ahora me sigo preocupando por el texto.

Un saludo

furoya.
  #14 (permalink)  
Antiguo 26/01/2009, 12:29
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Rotar Texto

Jajaja ok, gracias!!
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #15 (permalink)  
Antiguo 04/12/2013, 15:34
 
Fecha de Ingreso: agosto-2008
Mensajes: 4
Antigüedad: 9 años, 4 meses
Puntos: 1
Respuesta: Rotar Texto

Hola, estuve buscando información acerca de hacer girar el texto. Y encontré una solución mucho mejor para aplicar, y sirve para todos los navegadores:

simplemente:

Código HTML:
<style>
.rotar {

    /* Chrome y Safari */
    -webkit-transform: rotate(-90deg);

    /* Firefox */
    -moz-transform: rotate(-90deg);

    /* Opera */
    -o-transform: rotate(-90deg);

    /* IE 9 */
    -ms-transform: rotate(-90deg);

    /* IE 8 */
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}
</style>


Luego usarla:

Código HTML:
<span class="rotar">Texto de prueba </span> 
Saludos, espero les sirva!
  #16 (permalink)  
Antiguo 04/12/2013, 16:03
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.460
Antigüedad: 15 años, 4 meses
Puntos: 2097
Respuesta: Rotar Texto

Y faltaría el de la recomendación:

Código CSS:
Ver original
  1. transform: rotate(-90deg);

Incluso hay funciones para rotación en 3D y un puñado de cosas más chulas.

Aunque si te fijas en la fecha, por aquel entonces no existían estas cosas y gente como furoya le daban vueltas a las cosas para ver si había alguna forma de girarlas.

Normalmente no es bueno revivir temas viejos, pero dado que se aporta una solución más actual, está bien para gente que se tope con el tema.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:31.