Вертикальное выравнивание текста в html

Иногда, возникает необходимость применить вертикальное выравнивание текста в html. О том, как это сделать, плюс чтобы результат был кросс-браузерным я расскажу в этом посте.
Есть куча способов сделать вертикальный текст, включая использование javascript, но мне больше всего понравились эти 2. Они просты в реализации и кросс-браузерны.
Первый способ — использование em.
Как известно, “em” это масштабируемая единица, которая равно текущему значению размера шрифта. Помня, это, создаем такой css код для элемента, где будет вертикальный текст.
.someBlock{
width: 1em;
font-size: 14px;
letter-spacing: 40px; /* для безопасности */
}
Теперь текст в любом элемент, отформатированном этим стилем будет отображаться вертикально.
Второй способ – использование whitespace.
Сss код:
.someBlock{
white-space: pre;
}
Устанавливая значение white-space в pre мы добились того же самого, если бы поставили текст, который хотим выровнять вертикально внутри тега pre, который отображает свое содержимое так как оно есть.