Foros del Web » Creando para Internet » HTML »

Texto Vertical

Estas en el tema de Texto Vertical en el foro de HTML en Foros del Web. ¿Es posible mostrar un texto verticalmente? Gracias....
  #1 (permalink)  
Antiguo 17/01/2003, 10:03
 
Fecha de Ingreso: enero-2002
Mensajes: 97
Antigüedad: 15 años, 11 meses
Puntos: 0
Texto Vertical

¿Es posible mostrar un texto verticalmente?


Gracias.
  #2 (permalink)  
Antiguo 17/01/2003, 10:45
Avatar de rickoe
Colaborador
 
Fecha de Ingreso: abril-2001
Mensajes: 353
Antigüedad: 16 años, 7 meses
Puntos: 2
pues no

no hay forma, ya le busque por CSS y nada

mejor busca otra forma

Saludos

Rickoe
__________________
Mejor Jeep Imposible
  #3 (permalink)  
Antiguo 17/01/2003, 10:57
Avatar de ztikma  
Fecha de Ingreso: diciembre-2001
Ubicación: Viña del Mar
Mensajes: 1.144
Antigüedad: 16 años
Puntos: 1
sólo con imágenes o flash o un poderoso java, no existe en lenguaje normal una forma...
  #4 (permalink)  
Antiguo 17/01/2003, 13:12
Avatar de Carlitos
Colaborador
 
Fecha de Ingreso: mayo-2001
Ubicación: Zaragoza
Mensajes: 1.302
Antigüedad: 16 años, 7 meses
Puntos: 24
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>
__________________
Carlos - Zaragoza
  #5 (permalink)  
Antiguo 19/01/2003, 19:16
(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 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.
  #6 (permalink)  
Antiguo 20/01/2003, 12:47
Avatar de Carlitos
Colaborador
 
Fecha de Ingreso: mayo-2001
Ubicación: Zaragoza
Mensajes: 1.302
Antigüedad: 16 años, 7 meses
Puntos: 24
Oye, furoya. Qué buen truco.
  #7 (permalink)  
Antiguo 17/01/2007, 09:16
 
Fecha de Ingreso: octubre-2006
Mensajes: 18
Antigüedad: 11 años, 1 mes
Puntos: 0
Re: Texto Vertical

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.
  #8 (permalink)  
Antiguo 18/01/2007, 14:31
(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 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?
  #9 (permalink)  
Antiguo 18/01/2007, 16:30
Avatar de CrepitantE  
Fecha de Ingreso: octubre-2006
Ubicación: Colombia
Mensajes: 420
Antigüedad: 11 años, 1 mes
Puntos: 7
Re: Texto Vertical

Se puede en Javascript (configurandolo como quieras) pero en HTML no tengo conocimiento.
  #10 (permalink)  
Antiguo 29/01/2007, 11:02
(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: Texto Vertical

(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. !
  #11 (permalink)  
Antiguo 20/02/2007, 12:19
Avatar de Carlitos
Colaborador
 
Fecha de Ingreso: mayo-2001
Ubicación: Zaragoza
Mensajes: 1.302
Antigüedad: 16 años, 7 meses
Puntos: 24
Re: Texto Vertical

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.
__________________
Carlos - Zaragoza
  #12 (permalink)  
Antiguo 04/11/2007, 01:09
 
Fecha de Ingreso: octubre-2007
Mensajes: 267
Antigüedad: 10 años, 1 mes
Puntos: 1
Re: Texto Vertical

Funciona bien en la pantalla del monitor, pero tengo el inconveniente q al imprimirlo cambia la orientación vertical. Agradeceré ayuda.
  #13 (permalink)  
Antiguo 05/11/2007, 06:23
(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: Texto Vertical

¿Cuál de todos?. Hay muchos ejemplos y algunos son sólo para ver en la pantalla.
  #14 (permalink)  
Antiguo 05/11/2007, 15:36
 
Fecha de Ingreso: octubre-2007
Mensajes: 267
Antigüedad: 10 años, 1 mes
Puntos: 1
Re: Texto Vertical

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.
  #15 (permalink)  
Antiguo 05/11/2007, 15:43
 
Fecha de Ingreso: octubre-2007
Mensajes: 267
Antigüedad: 10 años, 1 mes
Puntos: 1
Re: Texto Vertical

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)'">
  #16 (permalink)  
Antiguo 14/11/2007, 07:07
(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: Texto Vertical

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.
  #17 (permalink)  
Antiguo 14/11/2007, 20:05
 
Fecha de Ingreso: octubre-2007
Mensajes: 267
Antigüedad: 10 años, 1 mes
Puntos: 1
Re: Texto Vertical

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
  #18 (permalink)  
Antiguo 20/11/2010, 13:06
 
Fecha de Ingreso: octubre-2010
Mensajes: 189
Antigüedad: 7 años, 2 meses
Puntos: 0
Respuesta: Texto Vertical

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.
  #19 (permalink)  
Antiguo 23/11/2010, 08:35
(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: Texto Vertical

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
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

SíEste tema le ha gustado a 3 personas (incluyéndote)




La zona horaria es GMT -6. Ahora son las 07:21.