CODEWITHSUNDEEP
javascripthtmlcss
Arippe
Arippe

Reputation: 21

How to change input text direction from right to left

How can I reverse text in HTML? If I write "apple" I want to change it to "elppa". Here is what I have tried. But it only changes the text direction!

enter image description here

Upvotes: 0

Views: 4705

Answers (4)

Abhishek Singh
Abhishek Singh

Reputation: 1

you can do it like this

if you want to use for every input attribute in your page.

.input {
  text-align:right;
  unicode-bidi:bidi-override;
  direction:rtl;
}

OR

If you want to affect one input.

First name: <input type="text" style="text-align:right;unicode-bidi:bidi-override; direction:rtl;"/>

Upvotes: 0

Gaurav Chaudhary
Gaurav Chaudhary

Reputation: 1501

You can use javascript for it like this

function reverseString(str) {
    return str.split("").reverse().join("");
}

var rstring = reverseString("apple");
console.log(rstring)

or you can do it in html like this

<p>
  &#x202e; apple
</p>

Upvotes: 3

Denis Tsoi
Denis Tsoi

Reputation: 10404

Taken from css tricks

.rtl {
  unicode-bidi:bidi-override;
  direction:rtl;
}
<div>apple</div>
<div class="rtl">apple</div>

Upvotes: -1

Leguest
Leguest

Reputation: 2137

You can rotate text container

CSS

.text-rotated {
   transform: rotate(180deg)
}

Or another way in JS

var p = document.querySelector('p');

var reversed = p.innerText.split('').reverse().join('');

p.innerText = reversed;

Example JSFiddle

Upvotes: 0

Related Questions