Текст сверху вниз с поворотом символов по часовой стрелке
Пример
<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>