¿Se puede rotar un input?

Wasper · #1 (**permalink**) 08/09/2011, 13:47

Buenas a todos, hoy vengo a preguntar una cosa que casi se la respuesta, pero como siempre, me gusta dar el beneficio de la duda.

Resulta que por las circunstancias que sean me han pedido algo que hasta ahora nunca se me habia dado al caso, el colocar un input con la trayectoria del texto en vertical adjunto imagen es justamente lo que señala la flechita.

Entonces, no sabia muy bien donde preguntarlo, asi que lo he dejado caer aqui.
¿Conoceis alguna manera o lenguaje o tecnica (CSS, Javascript, HTML5, Canvas... sin uso de flash) de hacer girar dicho campo?

Muchas gracias atodos

cuervo699 · #2 (**permalink**) 08/09/2011, 16:10

Yo lo hice de la siguiente manera, pero no se si es lo que buscas, por que es algo super poco comun que te pidan

Mira, aqui te dejo un ejemplo de lo q hice...

Código HTML:

<html> 
<head> 
<title>Texto Vertical</title> 
<style media="screen">
textarea {
	overflow: hidden;
	font-size: 15px;
	font-family: 'Verdana', Geneva, sans-serif;
	color:#333;
	width: 3ex;
	letter-spacing: 1ex;
	text-align: center;
}
</style>
<script>
<!-- Borrar Textarea
function limp(){
document.all.form1.txtvertical.value=""}
// --> 
<!-- Enviar Textarea
function submit(){
   document.form1.txtvertical.submit()
}
// --> 
</script> 
</head> 

<body>
<form name="form1" method="post" action="www.google.cl">
  <label for="textarea"></label>
  <textarea name="txtvertical" wrap="physical" id="textarea" cols="1" 
rows="11">VERTICAL</textarea>
  <input type="button" value="Enviar" onclick="submit()">
  <input type="button" value="Borrar" onclick="limp()">
</form>
</body> 
</html>

Solamente que para este truco se utiliza un textarea en vez de un input y es necesario el javascript para darle funcion de enviar y borrar a los botones

alexk · #3 (**permalink**) 08/09/2011, 16:57

Haz probado con transform?

Código HTML:

Ver original<style type="text/css">
.botonvertical{
    background-color:#000;
    color:#FFF;
    width:120px;
    height:20px;
    -o-transform: translateX(-100%) rotate(-90deg);
    -o-transform-origin: right top;
    -moz-transform: translateX(-100%) rotate(-90deg); 
    -moz-transform-origin: right top; 
    -ms-transform: translateX(-100%) rotate(-90deg);
    -ms-transform-origin: right top; transform: translateX(-100%) rotate(-90deg); 
    -webkit-transform: translateX(-100%) rotate(-90deg);
    -webkit-transform-origin: right top;    
    transform-origin: right top;    
}
</style>
<!--[if lt IE 9]>
<style type="text/css">
.botonvertical{
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
<![endif]-->

cuervo699 · #4 (**permalink**) 08/09/2011, 22:22

Exelente aporte de @alexk, lo probe en los principales navegadores (firefox, opera, safari, explorer, Chrome) y funciona todo bien, el unico problema se produce con Internet explorer, que al principio muestra el input de manera horizontal hasta q se permite el contenido bloqueado, ademas tiene un error permanente al escribir, el puntero se va moviendo horizontalmente y el texto va vertical, no se si a todos les pasa...

En todo caso esta perfecto...

Wasper · #5 (**permalink**) 09/09/2011, 13:09

Bueno, bueno, bueno y bueno.... Vaya tela lo que acabo de aprender aqui...

AlexK he cogido el ejemplo lo he implementado lo he visto en los navegadores y no se como expresar la cara que se me ha quedado asi que me he hecho una captura con la cam y me ha salido esto...

Magnifica respuesta.

Cuervo, muchisimas gracias tambien por tu aporte...

alexk · #6 (**permalink**) 09/09/2011, 13:11

que bien que te haya funcionado

furoya · #7 (**permalink**) 10/09/2011, 15:43

Había un tema muy viejo pero que centralizaba las rotaciones de texto. Les dejo el enlace al final.

El bug de IE es lamentable, pero comprensible. Usa DX.

Acá hay una versión que usa los viejos filtros y al menos el cursor queda dentro de la caja. Si lo apuntas haci abajo, funciona bien.

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>

<body>

<div>
Abajo hacia arriba. (cursor con bug)<br>
<input style="layout-flow:vertical-ideographic; 
filter: flipv() fliph()" value=qwertyuiop>
</div>

<br><br><br>

<div>
Arriba hacia abajo. (cursor sin bug)<br>
<input style="layout-flow:vertical-ideographic; 
fil ter: flipv()" value=qwertyuiop>
</div>

</body>
</html>

También puedes probar con

Código:

style="-ms-writing-mode : bt-lr ;

Rotar Texto