CSS text-orientation — орієнтація літер у рядку

HTML

<p class="mixed">Vertical 2026 текст</p>
<p class="up">Vertical 2026 текст</p>

CSS

p {
    display: inline-block;
    writing-mode: vertical-rl;
    height: 200px;
    margin-right: 32px;
}

.mixed { text-orientation: mixed; }
.up    { text-orientation: upright; }

HTML

<p class="a">Abc 123 без writing-mode</p>
<p class="b">Abc 123 vertical-rl</p>

CSS

p {
    display: inline-block;
    height: 170px;
    margin-right: 20px;
    padding: 6px;
    background: #eef2f7;
    text-orientation: upright;
}
.b {
    writing-mode: vertical-rl;
}

HTML

<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>

CSS

* {
  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;
}

JS

const message = document.querySelector('#message');

document.querySelectorAll('.inputs input').forEach((el) => el.addEventListener('change', function () {

  var messageText = document.querySelector("message[for='" + this.id + "']");
  message.textContent = messageText?.textContent ?? '';

  document.querySelectorAll('#block').forEach((n) => n.style.setProperty('text-orientation', this.id));

}));

HTML

<h3>text-orientation : mixed | upright | sideways</h3>
<div class="table">
	<div>
		<span class="to-mixed">Lorem ipsum dolor sit, amet consectetur adipisicing.</span>
		<p>text-orientation : mixed</p>
	</div>
	<div>
		<span class="to-upright">Lorem ipsum dolor sit, amet consectetur adipisicing.</span>
		<p>text-orientation : upright</p>
	</div>
	<div>
		<span class="to-sideways">Lorem ipsum dolor sit, amet consectetur adipisicing.</span>
		<p>text-orientation : sideways</p>
	</div>
</div>

CSS

body{
	position: relative;
	margin: 0px;
	padding: 20px;
	font-family: "Arial";
	font-size: 18px;
}
h3{margin-top: 0px; color: #555; text-align: center;}
.table{
	display: table;
	width: 100%;
	height: 100%;
	min-height: 200px;
	position: relative;
	box-shadow: 0px 0px 2px #999;
}
.table div{
	display: table-cell;
	position: relative;
	background: white;
	vertical-align: middle;
	height: 300px;
	box-sizing: border-box;
	padding: 20px;
	text-align: center;
	box-shadow: inset 0px 0px 2px #999;
}
span{
	writing-mode: vertical-rl;
  unicode-bidi: bidi-override;
  direction: ltr;

  display: inline-block;
  background: white;
  padding: 20px 15px;
  color: black;
  border: 1px dashed blue;
}
/*1*/
.to-mixed{
	text-orientation: mixed;
}
.to-upright{
	text-orientation: upright;
}
.to-sideways{
   -webkit-text-orientation: sideways;
	text-orientation: sideways;
}