How to Make Text Reverse Direction in HTML

How do I make text reverse direction in HTML?

Yes, this is possible using the combination of two Unicode control characters. Namely, the

'RIGHT-TO-LEFT OVERRIDE' (U+202E)
'LEFT-TO-RIGHT OVERRIDE' (U+202D)

Each override character makes the text that follows it flow in the corresponding direction.

These can be inserted into an document with the HTML entities ‮ and ‭, or the decimal equivalents, ‮ and ‭.

This allows you to write your example thus:

<p>
  There once was a young lady with pride,<br>
  ‮who ate fourteen green apples and died.<br>
  ‭Within the lamented,<br>
  ‮the apple fermented<br>
  ‭and made cider inside her insides.
</p>

I'm posting this HTML in now so you can see how it appears. You can observe the actual direction change by selecting parts of the text.

There once was a young lady with pride,

‮who ate fourteen green 123 apples and died.

‭Within the lamented,

‮the apple fermented

‭and made cider inside her insides.

If you wanted a true boustrephedon, where the letters forms are also backwards, and if you don't mind using CSS3 features, then you could use a CSS3 transform:

backward {  display: inline-block;  -moz-transform: scale(-1, 1);  -webkit-transform: scale(-1, 1);  transform: scale(-1, 1);}

<p>  There once was a lady with pride,<br>  <backward>who ate fourteen green apples and died.</backward><br> Within the lamented,<br>  <backward>the apple fermented</backward><br> and made cider inside her insides.</p>

How to reverse the text by using Javascript?

The reverse() method only exists on the array prototype. Since you want to reorder them in groups of words (and not by character), you will need to split x by an empty space, and then rejoin it thereafter:

document.getElementById("TextInput2").innerHTML = x.split(' ').reverse().join(' ');

This basically splits your sentence up into individual words, and then rejoins it in a reverse order after that.

See proof-of-concept:

function myFunction() {  var x = document.getElementById("TextInput1").value;
  document.getElementById("TextInput2").innerHTML = x.split(' ').reverse().join(' ');}

<form>
  <textarea autocomplete="off" cols="30" id="TextInput1" name="message" rows="10" style="border: 3px solid #73AD21; width: 40%;">Lorem ipsum dolor sit amet</textarea>
  <textarea autocomplete="off" cols="30" id="TextInput2" name="message" rows="10" style="border: 3px solid #73AD21; width: 40%;"></textarea><br />
  <input id="WhiteSpaceRemove" onclick="myFunction()" style="border: 3px solid #73AD21;" type="button" value="Convert" />
</form>

CSS: How to wrap a line of text backwards, so the final text always fills the entire width of the container?

What you are asking can not be done with CSS alone.

Just for fun, here is a solution that would be awful for SEO and should probably never see the light of day.

Take your text, wrap each word in a span, reverse the order of the words, reattach to the DOM.

From there, you can achieve your desired layout with flex.

const wrapText = document.querySelector('.wrap-text');

wrapText.innerHTML = wrapText.textContent.split(' ').map(function(x) {
    return '<span>' + x + '</span>';
}).reverse().join('');

p {
  display: flex;
  flex-wrap: wrap-reverse;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

p span {
  margin-right: .3em; 
}

p:hover span {
  outline: 1px solid orange;
}

<div style="width:200px;border-bottom:1px solid blue;">
  <p>This text is wider than the container and will flow normally.</p>
</div>

<div style="width:200px;border-bottom:1px solid blue;">
  <p class="wrap-text">This text is wider than the container and will flow in an unnatural manner.</p>
</div>

How to reverse the direction in HTML5 range input?

This might do the trick: setting the direction of the input to be right to left on the CSS

#reversedRange {
  direction: rtl
}

See sample code below:

PS the javascript/jquery code is only to illustrate the values changing and it's not needed. Only the CSS and the id attribute on the input element

Updated: based on comments by @MCTaylor17 (thanks)

$(function() {  $("#rangeValue").text($("#reversedRange").val());    $("#reversedRange").on('change input', function() {    $("#rangeValue").text($(this).val());  });});

#reversedRange {  direction: rtl}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Max<input type="range" min="0" max='5' value="0" step="1" id="reversedRange">Min<div>value: <span id="rangeValue"></span></div>

How to do text-overflow: ellipsis in reverse?

Change the direction if you want the ellipsis.

.box {  overflow: hidden;  white-space: nowrap;  width: 120px;  text-overflow: ellipsis}

<div dir="rtl" class="box">  StartOfLineMiddleOfLineEndOfLine</div>

Can you use CSS to mirror/flip text?

You can use CSS transformations to achieve this. A horizontal flip would involve scaling the div like this:

-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);

And a vertical flip would involve scaling the div like this:

-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);

DEMO:

span{ display: inline-block; margin:1em; } .flip_H{ transform: scale(-1, 1); color:red; }.flip_V{ transform: scale(1, -1); color:green; }

<span class='flip_H'>Demo text ✂</span><span class='flip_V'>Demo text ✂</span>

Reverse order in HTML div element

Setting the a tag as such:

a {
display: flex;
flex-direction: column-reverse;
}

will work. Further explanation is here: https://css-tricks.com/almanac/properties/f/flex-direction/

The flex-direction property is a sub-property of the Flexible Box
Layout module.

It establishes the main-axis, thus defining the direction flex items
are placed in the flex container.

Reminder: the main axis of a flex container is the primary axis along
which flex items are laid out. Beware, it is not necessarily
horizontal; it depends on the flex-direction property.

The flex-direction property accepts 4 different values:

row (default): same as text direction row-reverse: opposite to text > direction column: same as row but top to bottom column-reverse: same as row-reverse top to bottom Note that row and row-reverse are
affected by the directionality of the flex container. If its text
direction is ltr, row represents the horizontal axis oriented from
left to right, and row-reverse from right to left; if the direction is
rtl, it's the opposite.

Reverse sense of a text revealing animation

This could be help

body {  text-align: center;  background: linear-gradient(141deg, #ccc 25%, #eee 40%, #ddd 55%);  color:#555;  font-weight: 300;  font-size: 32px;  padding-top: 40vh;  height: 100vh;  overflow: hidden;  -webkit-backface-visibility: hidden;  backface-visibility: hidden;  -webkit-perspective: 1000;  perspective: 1000;  -webkit-transform: translate3d(0,0,0);  transform: translate3d(0,0,0);}
div {  display: inline-block;  overflow: hidden;  white-space: nowrap;  font-size: 30px;  line-height: 1.5;}

div.lr {  width: 0px;  animation: reveal 7s infinite;}
div.rl {        animation: showup 7s infinite;}
div.rl span {  margin-left: -355px;  animation: slidein 7s infinite;}
@keyframes showup {    0% {opacity:0;}    20% {opacity:1;}    80% {opacity:1;}    100% {opacity:0;}}
@keyframes slidein {    0% { margin-left:-800px; }    20% { margin-left:-800px; }    35% { margin-left:0px; }    100% { margin-left:0px; }}
@keyframes reveal {    0% {opacity:0;width:0px;}    20% {opacity:1;width:0px;}    30% {width: 375px;}    80% {opacity:1;}    100% {opacity:0;width: 375px;}}

<div class="lr">   <span>into amazing experiences</span></div><div class="rl">Escape</div>