<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'));
});
This Pen doesn't use any external CSS resources.