|
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 |
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 |
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>Código: <html> Una última opción sería 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. :-) |
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: Using a Matrix Transform Matrix filter. Todos siguen siendo para IExplorer y Windows. |
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"> |
Re: Rotar Texto Viene del mensaje anterior. Código: <span class="bl">  </span><span class="ng"> </span><span class="bl">              </span><br>Código: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">Impresionante uso de CSS. |
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 :arriba: !) 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">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. :-( |
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">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= |
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"> |
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. |
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. |
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!! |
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!! :stress: ) 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. :-D Un saludo furoya. |
Respuesta: Rotar Texto Jajaja ok, gracias!! |
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: Luego usarla: Código HTML: <span class="rotar">Texto de prueba </span> |
Respuesta: Rotar Texto Y faltaría el de la recomendación:
Código CSS:
Ver original 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. :arriba: 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. |
| La zona horaria es GMT -6. Ahora son las 20:24. |
Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.