CSS writing-mode — вертикальний напрямок тексту

HTML

<p class="v">Вертикальний рядок: згори донизу.</p>
<p>Звичайний горизонтальний абзац для порівняння.</p>

CSS

.v {
    writing-mode: vertical-rl;
    height: 200px;
}

HTML

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

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

<div class="inputs">
  <input id="horizontal-tb" checked name="writing-mode" type="radio"/>
  <label for="horizontal-tb">horizontal-tb</label>
  <message for="horizontal-tb">Вміст блоку розташований горизонтально зліва направо, вертикально зверху вниз. Наступна горизонтальна лінія розташована під попередньою лінією.</message>
  
  <input id="vertical-rl" name="writing-mode" type="radio"/>
  <label for="vertical-rl">vertical-rl</label>
  <message for="vertical-rl">Вміст блоку розташований вертикально зверху вниз, горизонтально справа наліво. Наступна вертикальна лінія розташована ліворуч від попереднього рядка.</message>
  
  <input id="vertical-lr" name="writing-mode" type="radio"/>
  <label for="vertical-lr">vertical-lr</label>
  <message for="vertical-lr">Вміст блоку розташований вертикально зверху вниз, горизонтально зліва направо. Наступна вертикальна лінія розташована праворуч від попереднього рядка.</message>
</div>

<p id="message">Вміст блоку розташований горизонтально зліва направо, вертикально зверху вниз. Наступна горизонтальна лінія розташована під попередньою лінією.</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: horizontal-tb;
}

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('writing-mode', this.id));

}));

HTML

<div class="row">
  <div class="cell v">Вертикально</div>
  <div class="cell v up">Вертикально</div>
  <div class="cell rot"><span>Вертикально</span></div>
</div>
<p>сірим показано справжні коробки елементів</p>

CSS

body {
  font-family: sans-serif;
  font-size: 15px;
  padding: 12px;
}

p {
  margin-top: 18px;
  font-family: monospace;
  color: #444;
}

.row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.cell {
  height: 170px;
  padding: 8px;
  background-color: #dde4ef;
  border: 1px solid #4a6fa5;
}

.v {
  writing-mode: vertical-rl;
}

.up {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.rot span {
  display: inline-block;
  transform: rotate(90deg);
  transform-origin: left top;
}

HTML

<h3>writing-mode: horizontal-tb | vertical-rl | vertical-lr;</h3>
<div class="table">
    <div>
        <span class="horizontal-tb">Зразок<br> тексту.</span>
        <p>writing-mode: horizontal-tb</p>
    </div>
    <div>
        <span class="vertical-rl">Зразок<br> тексту.</span>
        <p>writing-mode: vertical-rl</p>
    </div>
    <div>
        <span class="vertical-lr">Зразок<br> тексту.</span>
        <p>writing-mode: vertical-lr</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{
  display: inline-block;
  background: white;
  padding: 20px 15px;
  color: black;
  border: 1px dashed blue;
}

.horizontal-tb{
    riting-mode: horizontal-tb
}
.vertical-rl{
    writing-mode: vertical-rl;
}
.vertical-lr{
   writing-mode: vertical-lr;
}