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

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

<div class="inputs">
  <input id="mixed" checked name="text-orientation" type="radio"/>
  <label for="mixed">mixed</label>
  <message for="mixed">​Поворот символів на 90°. Без задання.</message>
  
  <input id="upright" name="text-orientation" type="radio"/>
  <label for="upright">upright</label>
  <message for="upright">Показує горизонтальні символи природно (вертикально), а також гліфи для них.</message>
  
  <input id="sideways" name="text-orientation" type="radio"/>
  <label for="sideways">sideways</label>
  <message for="sideways">Весь текст буде накладено в бік (повернутий на 90° за годинниковою стрілкою), як у горизонтальному розташуванні.</message>
</div>

<p id="message">​Поворот символів на 90°. Без задання.</p>

<hr>

<p id="block">Це текст. Просто текст для прикладу.</p>

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  font-family: sans-serif;
}

#block {
  font-size: 1.75em; 
  writing-mode: vertical-lr;
  text-orientation: mixed;
}

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('text-orientation', $(this).attr('id'));
  
});