КодSEOБлогИное

Варианты вертикального направления текста CSS

Текст сверху вниз с поворотом символов по часовой стрелке

Пример
<style>
div {
  min-inline-size: 10em; /* вместо min-height: 10em; */
  border: 1px solid red;
  text-align: center; /* перевёрнутый текст по середине высоты */
  writing-mode: vertical-lr;
}
</style>

<div>Пример</div>
Образец применения: описание слева от картинки.

Текст снизу вверх с поворотом символов против часовой стрелке

Пример
<style>
div {
  min-inline-size: 10em;
  border: 1px solid red;
  text-align: center;
  /* вместо writing-mode: sideways-lr; */
  writing-mode: vertical-rl;
  transform: scale(-1); /* зеркальное отображение по вертикали и по горизонтали */
}
</style>

<div>Пример</div>

Вертикальные заголовки HTML-таблицы

Климат Самары
Показатель Январь Февраль Март Апрель Май Июнь Июль Август Сентябрь Октябрь Ноябрь Декабрь Год
Абсолютный максимум, °C 5,2 6,8 16,5 31,1 32,6 39,5 43,9 40,4 34,0 26,0 14,7 8,2 43,9
Средняя температура, °C −9,9 −9,6 −3,4 7,0 16,9 19,7 23,5 19,4 13,4 6,0 −2,4 −8,2 5,7
Абсолютный минимум, °C −43 −36,9 −31,4 −20,9 −4,9 −0,4 8,1 3,5 −3,4 −15,7 −28,1 −41,3 −43,3 
<style>
table {
  border-collapse: collapse;
}
table td,
table th {
  padding: 0 .3em;
  border: 1px solid #999;
}
table tbody th {
  text-align: left;
}
table thead th:not(:first-child):not(:last-child) {
  vertical-align: bottom;
  line-height: normal;
}
table thead b {
  writing-mode: vertical-rl; /* поворачивает всю таблицу, но не содержимое отдельной ячейки, поэтому нужен вложенный элемент */
  transform: scale(-1);
}
</style>

<table>
  <caption>Климат Самары</caption>
  <thead>
    <tr>
       <th>Показатель
       <th><b>Январь</b>
       <th><b>Февраль</b>
       <th><b>Март</b>

▶ Посмотреть весь код       <th><b>Апрель</b>
       <th><b>Май</b>
       <th><b>Июнь</b>
       <th><b>Июль</b>
       <th><b>Август</b>
       <th><b>Сентябрь</b>
       <th><b>Октябрь</b>
       <th><b>Ноябрь</b>
       <th><b>Декабрь</b>
       <th>Год
  <tbody>
    <tr>
       <th>Абсолютный максимум, °C
       <td>5,2
       <td>6,8
       <td>16,5
       <td>31,1
       <td>32,6
       <td>39,5
       <td>43,9
       <td>40,4
       <td>34,0
       <td>26,0
       <td>14,7
       <td>8,2
       <td>43,9
    <tr>
       <th>Средняя температура, °C
       <td>−9,9	 	 	 	 
       <td>−9,6
       <td>−3,4
       <td>7,0
       <td>16,9
       <td>19,7
       <td>23,5
       <td>19,4
       <td>13,4
       <td>6,0
       <td>−2,4
       <td>−8,2
       <td>5,7
    <tr>
       <th>Абсолютный минимум, °C
       <td>−43
       <td>−36,9
       <td>−31,4
       <td>−20,9
       <td>−4,9
       <td>−0,4
       <td>8,1
       <td>3,5
       <td>−3,4
       <td>−15,7
       <td>−28,1
       <td>−41,3
       <td>−43,3
</table>

writing-mode

содержимое элемента (сам элеменет не поворачивается!) располагается
горизонтально
слева направо справа налево
сверху вниз
вертикально
сверху вниз снизу вверх
справа налево слева направо
вертикально
сверху вниз снизу вверх
слева направо справа налево
horizontal-tb
наследует значение родителя
наследует значение родителя
Первая строка Смайлик зевает
Вторая строка
Ячейка 1_1 Ячейка 1_2
Ячейка 2_1 Ячейка 2_2 
<style>
div {
  height: 20em;
  border: 1px solid red;
  direction: ltr;
  writing-mode: horizontal-tb; /* свойство writing-mode наследуется, применяется ко всем элементам, кроме th и td таблицы (изображения не поворачиваются, есть разночтения у браузеров с заполняемыми пользователем элементами) */
}
</style>

<div>
  Первая строка <img alt="Смайлик зевает" src="//2.bp.blogspot.com/_ebKrCj8TLPk/TMnm_8ZLDwI/AAAAAAAAA3A/2xIw0CS57JE/s1600/zevota-smailik.gif" width="20" height="20" />
  <div>Вторая строка <input value="Текстовое поле"/></div>
  <table>
    <tr>
      <td>Ячейка 1_1
      <td>Ячейка 1_2
    <tr>
      <td>Ячейка 2_1
      <td>Ячейка 2_2
  </table>
</div>

<!-- Экспериментальные значения sideways-rl и sideways-lr без реализации в Google Chrome уже более 7 лет. -->

Важно: специально для writing-mode были разработаны такие свойства, как inline-size, block-size, padding-inline-start, margin-block-start, border-block-end и т. п.

Текст сверху вниз без разворота символов

Пример
<style>
div {
  min-inline-size: 10em;
  border: 1px solid red;
  text-align: center;
  writing-mode: vertical-lr;
  text-orientation: upright;
}
</style>

<div>Пример</div>

text-orientation

работает только совместно с
каждый символ повёрнут на 90° по часовой стрелке
каждый символ как при direction: ltr; writing-mode: horizontal-tb;
строка с символами повёрнута на 90° по часовой стрелке
mixed
наследует значение родителя
наследует значение родителя
Первая строка Смайлик зевает
Вторая строка
Ячейка 1_1 Ячейка 1_2
Ячейка 2_1 Ячейка 2_2 
<style>
div {
  height: 20em;
  border: 1px solid red;
  writing-mode: vertical-rl;
  text-orientation: mixed; /* свойство text-orientation наследуется, применяется ко всем элементам, у которых writing-mode имеет значения horizontal-tb или vertical-rl */ 
}
</style>

<div>
  Первая строка <img alt="Смайлик зевает" src="//2.bp.blogspot.com/_ebKrCj8TLPk/TMnm_8ZLDwI/AAAAAAAAA3A/2xIw0CS57JE/s1600/zevota-smailik.gif" width="20" height="20" />
  <div>Вторая строка <input value="Текстовое поле"/></div>
  <table>
    <tr>
      <td>Ячейка 1_1
      <td>Ячейка 1_2
    <tr>
      <td>Ячейка 2_1
      <td>Ячейка 2_2
  </table>
</div>

Объединить несколько символов в пространстве одного символа

Вотпример10
<style>
div {
  min-inline-size: 10em;
  border: 1px solid red;
  text-align: center;
  writing-mode: vertical-lr;
  text-orientation: upright;
}
div span {
  text-orientation: mixed;  /* по умолчанию, иначе в Google Chrome происходить дисбаланс */ 
  text-combine-upright: all;
}
</style>

<div><span>Вот</span>пример<span>10</span></div>
Вотпример10
<style>
div {
  border: 1px solid red;
}
div span {
  vertical-align: text-bottom;
  writing-mode: vertical-lr;
  text-combine-upright: all;
}
</style>

<div><span>Вот</span>пример<span>10</span></div>

text-combine-upright

работает только совместно с
пространство одного символа занимает один символ
пространство одного символа делят на равные части все заявленные символы и отображаются горизонтально
пространство одного символа делят на равные части два символа и отображаются горизонтально <!-- на момент написания статьи не поддерживается браузерами -->
none
наследует значение родителя
наследует значение родителя
Первая строка Смайлик зевает
Вторая строка
Ячейка 1_1 Ячейка 1_2
Ячейка 2_1 Ячейка 2_2 
<style>
div {
  height: 20em;
  border: 1px solid red;
  writing-mode: vertical-rl;
}
span {
  text-combine-upright: none; /* свойство text-combine-upright наследуется, применяется к элементам, у которых writing-mode имеет значения horizontal-tb или vertical-rl */ 
}
</style>

<div>
  Первая строка <img alt="Смайлик зевает" src="//2.bp.blogspot.com/_ebKrCj8TLPk/TMnm_8ZLDwI/AAAAAAAAA3A/2xIw0CS57JE/s1600/zevota-smailik.gif" width="20" height="20" />
  <div>Вторая строка <input value="Текстовое поле"/></div>
  <table>
    <tr>
      <td>Ячейка <span>1_1</span>
      <td>Ячейка <span>1_2</span>
    <tr>
      <td>Ячейка <span>2_1</span>
      <td>Ячейка <span>2_2</span>
  </table>  
</div>
◄▲►
Все комментарии