<p>Цей приклад показує як працює властивість <code>unicode-bidi</code>. Спробуйте вимкнути/ввімкнути перемикач, щоб змінити відображення тексту нижче.</p>

<p>У цьому прикладі, ми можемо змінювати напрямок тексту та символів.</p>

<div class="inputs">
  <input id="normal" checked name="unicode-bidi" type="radio"/>
  <label for="normal">normal</label>
  <message for="normal">Браузер самостійно визначає, як йому слід відображати текст на основі символів Unicode.</message>
  
  <input id="bidi-override" name="unicode-bidi" type="radio"/>
  <label for="bidi-override">bidi-override</label>
  <message for="bidi-override">Змінюється порядок символів в тексті на зворотній.</message>
</div>

<p id="message">Браузер самостійно визначає, як йому слід відображати текст на основі символів Unicode.</p>

<hr>

<p id="block">Це текст. <br> Просто текст для прикладу.</p>
* {
  box-sizing: border-box;
  padding: 0;
}

body {
  font-family: sans-serif;
}

#block {
  font-size: 1.75em; 
  direction: rtl;
  unicode-bidi: normal;
}

message {
  display: none;
}
var $message = $('#message');

$('.inputs').find('input').on('change', function() {
  
  var $messageText = $("message[for='"+$(this).attr('id')+"']")
  $message.text($messageText.text());
  
  $('#block').css('unicode-bidi', $(this).attr('id'));
  
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js