Как заставить dir = "rtl" работать с начальной загрузкой 4.3.1? - PullRequest
Новая
       31

Как заставить dir = "rtl" работать с начальной загрузкой 4.3.1?

2 голосов
/ 27 апреля 2019

Я создаю простую страницу html / css с помощью начальной загрузки 4.3.1. В одном абзаце я буду использовать арабский текст, который должен отображаться в формате справа налево.

Я также пытался использовать direction:rtl в css, dir="rtl" в html и bidi-override. Но, похоже, ничего не работает. Я думаю, что это как-то связано с начальной загрузкой 4.3.1, но я могу ошибаться. Я не могу понять, в чем дело, и буду очень признателен за любую помощь.

Это мой HTML 

<div class="row justify-content-center">
  <div class="col-sm-6" style="border:1px solid black">
    <div class="row">
      <div class="ayat_box">
        <div class="ayat_ar">
          <p class="ayat_ar_txt">
            حَتَّى إِذَا جَاءَ أَمْرُنَا وَفَارَ التَّنُّورُ قُلْنَا احْمِلْ فِيهَا مِنْ كُلٍّ زَوْجَيْنِ اثْنَيْنِ وَأَهْلَكَ إِلَّا مَنْ سَبَقَ عَلَيْهِ الْقَوْلُ وَمَنْ آَمَنَ وَمَا آَمَنَ مَعَهُ إِلَّا قَلِيلٌ  <span class="ayat_period">٣</span>
          </p>
        </div>
        <div class="ayat_en">
          <p class="ayat_en_txt">
some content in ltr
          </p>
        </div>
        <div class="ayat_exp">
          <p class="ayat_exp_p">
some content in ltr
          </p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="ayat_box" style="background: pink">
        This is another box
      </div>
    </div>
  </div>
</div>

Это мой css: 

.ayat_box
{
    width: 700px;
    margin:0 auto;
}

.ayat_ar
{
    background: pink;
}

.ayat_ar_txt
{
    direction:rtl;
    font-family: arial;
    font-size:25px;
}

.ayat_period
{
  display:inline-block;
  border-radius:50%;
  border:1px solid black;
  padding-left:5px;
  padding-right:5px;
}

1 Ответ

1 голос
/ 27 апреля 2019

Вы можете сделать это с другой библиотекой: RTL Bootstrap .Он предоставляет CSS для выполнения этой работы.

Этот git-diff отображает разницу между исходной библиотекой Bootstrap и библиотекой RTL Bootstrap.

...