CODEWITHSUNDEEP
javascript
Pravallika
Pravallika

Reputation: 57

How to display text vertically from bottom to top using JavaScript?

I would like to display the given word vertically from bottom to top and each letter in the word must be one below the other. (just like the below image.) I would like to achieve above mentioned scenario using JavaScript.

enter image description here

Thanks.

Upvotes: 0

Views: 2166

Answers (5)

vsync
vsync

Reputation: 130065

JS + CSS solution:

// reverse the element's string order
var elm = document.querySelector('p');
elm.textContent = elm.textContent.split("").reverse().join("");
p{
  font: 20px monospace; /* monospace fonts are best since each character has the same width */
  width: 20px; /* same as font-size */
  word-break: break-all; /* enabling the non-spaced text to break */
}
<p>TEXT GOES FROM BOTTOM</p>

Upvotes: 0

ChiragMM
ChiragMM

Reputation: 347

function display() {
var i = 0;
var str="YourString";
var temp = str.split("");
var reversestr = temp.reverse();

for (var i = 0, len = reversestr .length; i < len; i++) {
  document.write(reversestr [i] + "<br />");
}
};
<!DOCTYPE html>
<html>
<body>

<h2>My Vertical Display</h2>

<button type="button"
onclick="display()">
Click me to display.</button>


</body>
</html>

Upvotes: 1

caramba
caramba

Reputation: 22480

Something like this:

var element = document.querySelector('.blubb');
var stringToArray = element.innerHTML.split('');
var reveresedArray = stringToArray.reverse();

element.innerHTML = '';  // empty contents from .blubb
reveresedArray.forEach(function(letter){
    element.innerHTML += '<p>' + letter + '</p>';  // add letter with <p> tag
});
<div class="blubb">Ineedtodisplay</div>

Upvotes: 1

Deepak Kumar
Deepak Kumar

Reputation: 51

<script>
    var str = "ineedtodisplay";
    document.getElementById('a').innerHTML = str.split('').join('<br/>');
</script>

Upvotes: 0

FrontTheMachine
FrontTheMachine

Reputation: 526

write it from top to bottom but reverting it first

document.write(str.split('').reverse().join('<br>'));

Upvotes: 0

Related Questions