Create a vertical Label or Input

Asked

Viewed 154 times

8

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

M
E
U 

T
E
X
T
O

Would that be possible in any way? This is required for printing banners in this format.

php javascript jquery html

  • Will the text always be in this format with one letter per line? Or will it depend on some width?

2 answers

6


Here is an example of how to put the 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

0

Currently with CSS you get the same result, and even with a good support of browsers as you can see here: https://caniuse.com/#feat=css-text-orientation (does not work in IE or Edge)

With the property text-orientation: upright vc defines whether the text starts vertically from lr left for right or of rl right for left. Already with the text-orientation you put the characters "on each other" vertically Here you can read the Mozilla documentation on the subject: https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation#Values

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>

Browser other questions tagged php javascript jquery html

You are not signed in. Login or sign up in order to post.