CODEWITHSUNDEEP
htmlcssright-to-left
Reza
Reza

Reputation: 51

I have a problem about rtl my page in css, can anyone help me?

I face the problem of creating a rtl(right to left) stylesheet when I want to rtl Elements include <i> tag beside any texts or spans. For example, there is something like this: There are three elements inside this tag:

<li><a href="#"><i class="sl sl-icon-docs"></i>Requests<span>2</span></a></li>

First image: this is showing my theme before rtl: First image: this is showing my theme before rtl

  1. An icon located before the main button title

  2. Button title

  3. a tag for showing number of new requests as a label.

an order should reverse and show all items inside <a> tag from the right, it means from the right we will have 1.icon 2.title 3.label

Second image: rtl by using flex-direction: row-reverse; on main content: Second image: rtl by using flex-direction: row-reverse; on main content

I applied direction: rtl; to the <li> element but nothing works, you can see the changes on second image.

Upvotes: 2

Views: 1086

Answers (2)

Manon
Manon

Reputation: 389

You can reverse the content of the link <a> by using flex-direction: row-reverse on it :

.reverse{
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}
<ul>
    <li><a href="#"><i class="sl sl-icon-docs">Icon</i>Requests<span>2</span></a></li> 
     <li><a href="#" class="reverse"><i class="sl sl-icon-docs">Icon</i>Requests<span>2</span></a></li> 
</ul>

<!-- Other examples -->

<a class="reverse">(1) Click me<i class="sl sl-icon-docs">(2) icon</i></a>
<h3 class="reverse">(1) Title example<i class="sl sl-icon-docs">(2) icon</i></h3>

Upvotes: 2

YourPalNurav
YourPalNurav

Reputation: 1310

RTL works but not on the <span> part. If you can change span into a division then it'll work.

Else you can use flex-direction: row-reverse after making <li> a display:flex

Here's my code:

#rtl {
  direction: rtl;
}

#flex>a {
  display: flex;
  flex-direction: row-reverse;
}

li {
  background: red;
  padding: 1em;
  border-radius: 3em;
  margin: 1em;
  text-decoration: none;
  width: 200px;
  text-align: center;
}

span {
  background: white;
  border-radius: 10em;
  padding: 0 0.7em;
}

ul {
  list-style-type: none;
}
<ul>
  <li id="normal">
    <a href="#">
      <img src="https://picsum.photos/30/30?image=0" />Normal <span>1</span>
    </a>
  </li>
  <li id="rtl">
    <a href="#">
      <img src="https://picsum.photos/30/30?image=0" />RTL <span>2</span>
    </a>
  </li>
  <li id="flex">
    <a href="#">
      <img src="https://picsum.photos/30/30?image=0" />Row-Reverse <span>3</span>
    </a>
  </li>
</ul>

The code needs some polishing but I think you've got what you were looking for.

I hope this helps.

Peace 🖖

Upvotes: 1

Related Questions