In my Right To Left div, I want to display the following sentence with the words in reverse order:
https://i.sstatic.net/VkPjc.png
I am struggling to achieve this formatting.
So starting from the Right to Left:
- שלום1
- English Words
- 9000
- עולם2
Here is the HTML code:
<div class="rtl_div">
<p>
שלום1 English Words 9000 עולם2
</p>
<p>
<span class="position_1">שלום1</span>
<span class="position_2">English Words</span>
<span class="position_3">9000</span>
<span class="position_4">עולם2</span>
</p>
</div>
And here is the CSS styling:
.rtl_div{
direction: rtl; /* This must remain right to left */
}
Check it out on jsfiddle: https://jsfiddle.net/pf8g2o6w/
Note: As suggested by Tushar, you can resolve any issues by changing elements' display from inline to block, but if you prefer to stick with display inline, use this CSS:
span { display: inline-block;}