Texto Vertical

sanchezl · #1 (**permalink**) 17/01/2003, 10:03

¿Es posible mostrar un texto verticalmente?

Gracias.

rickoe · #2 (**permalink**) 17/01/2003, 10:45

no hay forma, ya le busque por CSS y nada

mejor busca otra forma

Saludos

Rickoe

ztikma · #3 (**permalink**) 17/01/2003, 10:57

sólo con imágenes o flash o un poderoso java, no existe en lenguaje normal una forma...

Carlitos · #4 (**permalink**) 17/01/2003, 13:12

Hola.

Prueba esto a ver si te sirve:

<div style="position:absolute;background:white;top:102p x;right:100px;width:20px;writing-mode:tb-rl;filter:flipH() flipV()">
De abajo a arriba
</div>

furoya · #5 (**permalink**) 19/01/2003, 19:16

Hola sanchezl!

Imagino que ya habrás probado Q<br>W<br>E<br>R<br>T<br>Y<br>, y no te sirvió.

Alguna vez tuve que hacer un título vertical (encolumnado), pero no sé si será tu caso. Empecé poniéndolo en una tabla ( width=1 ) y separando cada caracter con un espacio para que derraparan hacia abajo; pero como el texto lo traía desde otro documento, terminé cambiando la tabla por un textarea que me ahorraba insertar los espacios.

Código:

<html> 
<head> 
<title>TEXTO VERTICAL.</title> 
<SCRIPT>
<!-- 
function limp(){
document.all.form1.txver1.value=""}
// --> 
</SCRIPT> 
</head> 
<body bgcolor=aliceblue>

<center>
<table><tr><td>
<form name=form1>
<TEXTAREA style="overflow:hidden; font:20pt; 
font-weight:bold; color:blue; 
font-family:'times new roman'; border=none; 
width:3ex; letter-spacing:1ex; text-align:center; 
background:snow; " name="txver1" cols="1" 
rows="11" wrap="physical" /*readonly*/>
QWERTYUIOP 
</TEXTAREA> <input type="button" 
value="RESET" onclick="limp()">
</form>
</td><td valign=top>
<h2>Texto vertical.</h2>
El texto queda encolumnado de arriba hacia abajo 
dentro de un <i>textarea</i>.<br>El fondo puede 
ser transparente; y para ajustar la alineación 
conviene terminar el texto con un espacio.
</td></tr></table>
</center>

</body> 
</html>

Sabía que el título no superaba los doce caracteres, por eso no le puse ningún script que ajustara el tamaño del textarea al contenido, ni que saltara a otro si superaba cierto límite; pero son opciones para textos de más de una línea.

NOTA: readonly es opcional, lo anulé para que pudieras usar el área de texto para hacer pruebas.

Carlitos · #6 (**permalink**) 20/01/2003, 12:47

Oye, furoya. Qué buen truco.

el_dekano · #7 (**permalink**) 17/01/2007, 09:16

Mirad esto:

#textovertical {writing-mode: tb-rl; filter: flipv fliph}

Ya se puede poner el texto en vertical con CSS, pero tiene la limitacion de que solo funciona en ie.

furoya · #8 (**permalink**) 18/01/2007, 14:31

Hola el_dekano :

Si lees el tema, verás que se podía desde hace mucho, y que ya lo posteó Carlitos. Además a tu ejemplo le faltan los paréntesis de las funciones.

Estaba a punto de preguntarte cómo llegaste a este tema, ya que uno de los problemas que tiene el buscador de este foro es que no encuentra mensajes viejos.

Hasta que recordé que estaba en las FAQs.

Te cuento que el código que puse arriba también es sólo para IE, no porque use código propietario, sino por la diferente interpretación que hacen los navegadores del funcionamiento de un textarea. Lo que hace CSS es "rotar" el párrafo 90° y después "voltearlo" vertical y horizontalmente; en realidad no "encolumna" los caracteres.

Aprovecho para dejar un enlace con otras formas de hacerlo.

Rotar Texto

Tengo que agradecerte que hayas revivido este tema. Me estás dando la oportunidad de aclarar algo que -no sé si será necesario, pero...- tenía ganas de hacer desde hace mucho.

Hola Carlitos :

Recuerdo cuando pusiste ese código en las FAQs. Para mí sigue teniendo más de curiosidad que de utilidad, pero si tú lo consideraste digno de destacar, para mí es un honor; máxime teniendo en cuenta los ejemplos que tú mismo aportaste a estos foros.

En ese momento te envié un mensaje privado pidiendo que hicieras algunas aclaraciones, ya que para hacer un "texto vertical" alcanza con escribir un carácter abajo del otro; y este engendro se justifica solamente cuando no tipeamos la cadena en el código fuente ni podemos "cortarla" con javascript.

Siempre me quedó la espina de no haber sido lo suficientemente claro; y de que hubieses entendido que estaba recriminándote por postear mi código cuando yo no quise hacerlo. Por supuesto que no fue así, pero en aquellos años yo era muy nuevo en el foro y demasiado bestia para escribir los mensajes (por suerte hoy ya ustedes me han pulido bastante, y sólo soy "medio bestia") y la mayoría de las veces, seguramente, no me sabía hacer entender.

Si fue el caso, valga este mensaje como aclaración (porque como nos enseñó Tito Livio "Mejor tarde que nunca."). Y si no, pues no me hagas caso, a mi edad ya escribo muchas güevadas.

P.D.: y encima, ahora que lo pienso, esto lo debí mandar por mensaje privado, ¿a quién más le importan supuestos malenendidos que tienen casi cuatro años?

CrepitantE · #9 (**permalink**) 18/01/2007, 16:30

Se puede en Javascript (configurandolo como quieras) pero en HTML no tengo conocimiento.

furoya · #10 (**permalink**) 29/01/2007, 11:02

(Otro más y van...)

No te ofendas, pero ... para conocer el texto vertical en HTML sólo basta con leer el tema. Está asistido por CSS, sí, porque es difícil pensar en formatos sin el uso de hojas de estilo, aunque algún ejemplo es puro HTML.

Lo del javascript también se mencionó. Ya que lo repetiste, al menos hubieses puesto un enlace!; no digo un ejemplo, porque no es el foro adecuado, pero si buscas vas a encontrar un escript que colgó Carlitos en alguna FAQ.

No me queda muy claro lo de "configurar". No hay mucho para configurar en un texto encolumnado; a menos que te refieras a un cambio en la dirección del texto con "top botton" y "left right"... que no se puede hacer con javascript.

O sí. Yo lo intenté hace varios años con un

QWERTYUIOP

y técnicas de ASCII-Art, pero el consumo de recursos, solamente para reconstruir los caracteres, me dejó al micro con la lengua colgando afuera del mother; así que desistí antes del primer intento.

Y esperemos que el próximo que escriba un mensaje al menos se tome el trabajo de leer el tema. O voy a pensar que lo están haciendo a propósito.

!

Carlitos · #11 (**permalink**) 20/02/2007, 12:19

Hola Furoya.

Aclarado queda. La verdad es que hace tanto que no recuerdo el mensaje privado que comentas.

Lo puse en las FAQ's porque me pareció un 'truco' muy simple.

De todas formas, también puse un código en las FAQ's de javascript para mostrar texto vertical.

FAQ nº 176

Alguien puede sacarle utilidad a esto.

Un saludo.

marianoggg · #12 (**permalink**) 04/11/2007, 00:09

Funciona bien en la pantalla del monitor, pero tengo el inconveniente q al imprimirlo cambia la orientación vertical. Agradeceré ayuda.

furoya · #13 (**permalink**) 05/11/2007, 06:23

¿Cuál de todos?. Hay muchos ejemplos y algunos son sólo para ver en la pantalla.

marianoggg · #14 (**permalink**) 05/11/2007, 15:36

Probé CSS, con {writing-mode: tb-rl; filter: flipv fliph} y con un obj y propiedad de microsoft para ie y hace exactamente lo mismo.

marianoggg · #15 (**permalink**) 05/11/2007, 15:43

Perdón, no lo encontraba, la otra forma con la que probé era:
style="layout-flow:'vertical-ideographic'; filter='progid:DXImageTransform.Microsoft.BasicIma ge(rotation=2)'">

furoya · #16 (**permalink**) 14/11/2007, 07:07

Supongo que no cambia la orientación sino que la ignora al imprimir.

Estos efectos son visuales. Quizá escribiéndolos dentro de un media print en el CSS. Pero la verdad no creo; prueba y si encuentras alguna manera nos avisas. Gracias.

marianoggg · #17 (**permalink**) 14/11/2007, 20:05

Funcionó colocando rotation=3 y posición absoluta. Fue un laburo bárbaro pero lo mejor fue ponerlo en una tabla espacio de celda grande y menejar la posición de la tabla después, copiando y pegando dicha tabla en el lugar q se necesite el texto vertical. Tener en cuenta además q el texto será como una imagen cuyo punto de control está en la esquina inferior derecha del texto. Muy incómodo ja!. Si alquien conoce otra manera sería bueno q nos lo comente. Saludos

breaststroke · #18 (**permalink**) 20/11/2010, 13:06

Hola.

Oye, pues yo he tenido que escribir texto verticalmente para una pestaña vertical, y se me ha ocurrido el utilizar las <br /> y poner un line-height de aprox. 0.7em.
div #vertical ul li a {.......;line-height:0.7em;}

Esto en la hoja de estilos. Pongo paddings y margenes que necesite.Todo incluído en un bloque, claro. Yo lo he hecho para una pestaña, pero no tiene porqué, por supuesto.

Y en el documento html, las <br /> separando cada letra, dentro del elemento 'a'(en mi caso claro..).

Debe ser de los más rudimentario, jeje, pero parece que funciona.:P.
¿Alguien sabe otra forma, utilizando solo CSS y HTML?

Saludos.

furoya · #19 (**permalink**) 23/11/2010, 08:35

Tengo la impresión, muy personal, de que no hay mucho más para agregar en este tema.
Los ejemplos que son obvios (como separar letra por letra en bloques o con break) ya los conocemos todos. Además, viene soportando mensajes desubicados, disculpas tardías ("¡yo!, ¡presente!") y tiene códigos que ya no andan; porque el textarea no se comporta igual en todos los navegadores, ni es el 'único' elemento que ajusta el texto : hoy con CSS podemos hacer un wrapping "letra por letra" en cualquier bloque.

Y aún así, no lo cerraron.

Una suerte parecida tuvo el tema -casi hijo de éste— sobre rotación de texto (aquí en realidad terminamos hablando mejor de 'encolumnado'), que tampoco cerraron.

Por eso no es que haya venido a aportar algo nuevo, pero quería agradecer que a pesar de todo, los temas sigan abiertos. Uno nunca sabe, quizá algún día se nos caiga una nueva idea que salga de alguno de estos mensajes, y aunque termine en otro tema siempre podemos poner el enlace acá para seguirla. La esperanza es lo último que se pierde.

texto que sobrepasa div #16