Search code examples
csssemantic-uiright-to-left

Semantic UI RTL setup issue?

I've hard time installing RTL with Semantic UI, I used npm to insall semantic then edited the semantic.json file "rtl": false, to true then followed this question (Existing Installation) but neved worked does semantic ui framework support rtl languages?

I also tried this with CDN https://rtlcss.com/cdn/css-frameworks/semantic-ui/index.html didn't work either! enter image description here What is the problem ?

semantic.json

permission": false,
  "autoInstall": false,
  "rtl": true,
  "version": "2.3.3"
}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Homepage</title>
    <!-- Semanti UI -->
    <link rel="stylesheet" type="text/css" href="semantic/dist/semantic.rtl.css">

    <!-- Semanti UI -->
    <link rel="stylesheet" href="index.css">


    </head>
    <body>

    <!-- nav -->
    <div class="ui stackable menu">
            <div class="item">
              <img src="https://en.facebookbrand.com/wp-content/uploads/2016/05/flogo_rgb_hex-brc-site-250.png">
            </div>
            <a class="item">Features</a>
            <a class="item">Testimonials</a>
            <div class="right menu">
                    <a class="item ">Sign-in</a>
                    <a class="item ">Sign-up</a>
            </div>

          </div>
    <!-- nav -->
    <div class="commentsContainer">

            <h2 class="ui center aligned icon header">
                    SMLE
                  </h2>

            <div class="ui stacked segment">
                    <p> بسم الله الرحمن الرحيم
                    </p>


                  </div>

                 <div class="bu">
                        <div class="RorL">
                                <button class="ui blue right labeled icon button">
                                        <i class="right arrow icon"></i>
                                        التالي
                                      </button>

                        </div>



                        <button class="ui blue left labeled icon button">
                                <i class="left arrow icon"></i>
                                السابق
                              </button>


                 </div>



    <div class="ui small comments">
            <h3 class="ui dividing header">Comments</h3>
            <div class="comment">
              <a class="avatar">
                <img src="https://semantic-ui.com/images/avatar2/large/molly.png">
              </a>
              <div class="content">
                <a class="author">Matt</a>
                <div class="metadata">
                  <span class="date">Today at 5:42PM</span>
                </div>
                <div class="text">
                  How artistic!
                </div>
                <div class="actions">
                        <a class="reply"><span> 22</span> UpVote</a>
                        <a class="reply">DownVote</a>

                  <a class="reply">Reply</a>

                </div>
              </div>
            </div>
            <div class="comment">
              <a class="avatar">
                <img src="https://semantic-ui.com/images/avatar2/large/matthew.png">
              </a>
              <div class="content">
                <a class="author">Elliot Fu</a>
                <div class="metadata">
                  <span class="date">Yesterday at 12:30AM</span>
                </div>
                <div class="text">
                  <p>This has been very useful for my research. Thanks as well!</p>
                </div>
                <div class="actions">
                  <a class="reply">Reply</a>
                </div>
              </div>
              <div class="comments">
                <div class="comment">
                  <a class="avatar">
                    <img src="https://semantic-ui.com/images/avatar2/large/kristy.png">
                  </a>
                  <div class="content">
                    <a class="author">Jenny Hess</a>
                    <div class="metadata">
                      <span class="date">Just now</span>
                    </div>
                    <div class="text">
                      Elliot you are always so right :)
                    </div>
                    <div class="actions">
                      <a class="reply">Reply</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="comment">
              <a class="avatar">
                <img src="https://semantic-ui.com/images/avatar2/large/kristy.png">
              </a>
              <div class="content">
                <a class="author">Joe Henderson</a>
                <div class="metadata">
                  <span class="date">5 days ago</span>
                </div>
                <div class="text">
                  Dude, this is awesome. Thanks so much
                </div>
                <div class="actions">
                  <a class="reply">Reply</a>
                </div>
              </div>
            </div>
            <form class="ui reply form">
              <div class="field">
                <textarea></textarea>
              </div>
              <div class="ui blue labeled submit icon button">
                <i class="icon edit"></i> Add Reply
              </div>
            </form>
          </div>
    <!-- Comments -->
    </div>



    <!-- Semanti UI -->
    <script
      src="https://code.jquery.com/jquery-3.1.1.min.js"
      integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
      crossorigin="anonymous"></script>
    <script src="semantic/dist/semantic.min.js"></script>
    <!-- Semanti UI -->

    </body>
    </html>
Solution

  • Fixed it , It's a simple mistake.

    The code was missing this.

    <html dir="rtl" lang="ar">