Расположение текста вертикально (CSS, HTML)

Выводить на сайте текст вертикально можно в различных целях. Это может быть чисто дизайнерский ход и в таких случаях этот изыск реализуется простой картинкой. Думаю здесь все понятно, и рассматривать эту «технологию» не нужно.

Но вот что делать, если оформление вертикального текста не изыск, а реальная необходимость? Чаще всего такая проблема возникает при необходимости разместить на сайте большую таблицу с кучей полей, содержащих несколько символов, но заголовками из нескольких слов.

В CSS есть свойства transform и transform-origin, которые выполняют такую функцию. В реале же для разных браузеров были добавлены соответствующие стили (-ms-transform, -moz-transform, -ms-transform-origin, -moz-transform-origin).

Применяя эти свойства, мы получим развернутый текст, но его расположение будет смещенным относительно исходного положения контейнера. Располагая одну строку вертикально не сложно настроить ее положение, дорабатывая смещением margin.

Чуть сложнее задача становится, если нужно расположить близко стоящие колонки в таблице. Например, таблица:

При развороте текста, размеры содержащего контейнера по ширине и высоте становятся равными, а из-за ячейки с развернутым текстом не становятся меньше. Чтобы было проще управлять шириной ячеек и в итоге получить таблицу с узкими ячейками, стоит текст заключить во вложенные теги div, к которым и будет применяться стили вертикального текста. Здесь же задаем высоту ячейки с заголовками таблицы и ширину блока. Чтобы текст выводился в одну строку, добавляем запрет на перенос строки (white-space: nowrap).

В зависимости от необходимого положения, смещение тоже придется подгонять вручную свойством margin.

В итоге, получаем следующий код и результат:

<style>
#vert{width:10%;} #vert td{text-align:center;padding:10px 0;} .vert-text {
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);

    -ms-transform-origin: left top 0;
    -moz-transform-origin: left top 0;
    -webkit-transform-origin: left top 0;
    transform-origin: left top 0;

    margin-left: 30px;
    padding: 0;
    float: left;
    height: 80px;
    width: 5px;
    white-space: nowrap;
}
<style>

<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td><div class="vert-text">Заголовок 1</div></td>
<td><div class="vert-text">Заголовок 2</div></td>
<td><div class="vert-text">Заголовок 3</div></td>
<td><div class="vert-text">Заголовок 4</div></td>
<td><div class="vert-text">Заголовок 5</div></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>

Стоит еще отметить, что свойству transform можно задавать произвольный угол наклона текста, а не только 90 градусов, как показано в примере выше.

Данное решение не идеальное, но для конкретной задачи можно использовать. Если у кого-то есть иное решение, более очевидное и простое, делитесь в комментариях.