How to change text direction of every line of text using javascript/jquery?


Tags: javascript,jquery,html,css,text

Problem :

Who can help with text direction change on each new line. Here is example:

text left-to-right
text right-to-left
text left-to-right
text right-to-left... etc.

On each word-wrap: break-word i need text direction change. Please, help! It could be jquery or javascript code.

Example below, but it was made with css and paragraphs. I need change text direction without paragraphs, or which is into the one paragraph on word-wrap.

Unfortuanelly I have no ideas how to make this, really...

.ltr {
  direction: ltr;
  }
.rtl {
  direction: rtl;
  }
<p class="ltr">Some text ltr</p>
<p class="rtl">ltr txet emoS</p>
<p class="ltr">Some text ltr</p>
<p class="rtl">ltr txet emoS</p>
<p class="ltr">Some text ltr</p>
<p class="rtl">ltr txet emoS</p>



Solution :

You can select every line of text by regex and set it in p tag using String.prototype.replace(). Now you can change direction of every line by changing CSS of relevant p.

$("div").html(function(i, text){
    return text.replace(/(.+\n?)/g, "<p>$1</p>");
});

$("div").html(function(i, text){
  return text.replace(/(.+\n?)/g, "<p>$1</p>");
});
div > p:nth-child(odd){
   direction: ltr;
}
div > p:nth-child(even){
   direction: rtl;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
text left-to-right
text right-to-left
text left-to-right
text right-to-left... etc.
</div>


    CSS Howto..

    How to copy only referenced .css to dest with gulp?

    How to design select box using css

    How can I automatically highlight a specific character in link text using JQuery + CSS?

    How to Obtain Contents of HTML Element in CSS

    CSS - How to make if “Firefox, Safari, Opera and IE”?

    How to check if all CSS files have been downloaded to insert HTML using JavaScript?

    How can I limit Bootstrap column to a specific column's height?

    How to get the first letter of each word to be a different size and the rest to be the same size

    How do I line up my textboxes without using a table? html/css

    How to edit the CSS of a div that does not contain a H1 tag?

    How do I get a div to fit to the screen with no overflow in CSS

    how to use css button to post method in a form?

    How to Include Multiple Javascript Files in .NET (Like they do in rails)

    how to convert list item to slider when browser is less than 640px?

    How to get the style value using attr

    CSS: how can I force a long string (without any blank) to be wrapped in XUL and/or HTML

    How to make ul nav fill the entire bottom of page evenly (without table display)

    How to select parents sibling with CSS? [duplicate]

    CSS flexbox: How to get column items to fill height

    How to make text in transparent div opaque? [duplicate]

    CSS help - how to keep my div in place with a responsive design

    jQueryUI tabs mouseover a disabled link, how do I change the cursor so it doesn't appear clickable?

    How to avoid this overlapping in plain CSS?

    CSS transform Scale translates the object, how to avoid this?

    How to not apply a css block?

    How to change text (not font size) according to screen size in CSS?

    How can I skin / theme a windows forms application [closed]

    How to change css rules of external stylesheet [duplicate]

    How to get global selector inside emulated view encapsulation (CSS / Angular2)

    CSS: How to specify table's height such that a vertical scroll bar appears?