Create a Vertical Label or Input

Navigation
8

I need to create a LABEL or an Input so that the typed text is Vertical, as follows: 

M
E
U 

T
E
X
T
O

Would It Be Possible Anyway? This is required for the printing of banners in this format.

    
asked by anonymous 19.07.2016 / 18:11

2 answers

6

Here is an example of how to put vertical text in another element: 

var ele_input = document.getElementById('vert');
var ele_text = document.getElementById('put-text');
ele_input.addEventListener('keyup', function(){
    // vamos tranformar o conteudo (texto) num array com todos os caracteres, colocar um <br> entre cada caracter e voltar a transformar em texto
    ele_text.innerHTML = ele_input.value.split('').join('<br>');
})
<input id="vert">
<div id="put-text"></div>

EXAMPLE in jsfiddle

    
19.07.2016 / 18:31
0

Now with CSS you get the same result, and even with good support from browsers like you can see here: link (does not work on IE or Edge)

With the text-orientation: upright property you set whether the text starts vertically from lr left to right or rl right to left . Now with text-orientation you put the "one on the other" characters vertically Here you can read the Mozilla documentation on the subject:

See how it looks in the example: 

p {
  -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
          writing-mode: vertical-lr;
  text-orientation: upright;

  height:135px;
  border:1px solid
}
<p>texto na vertical</p>
    
18.09.2018 / 16:46
Save image link as file in local storage Download image from server memory