Вертикальный текст CSS

writing-mode CSS

writing-mode поддерживает Internet Explorer и Гугл Хром.

<div style="-webkit-writing-mode: vertical-rl; writing-mode:tb-rl;">пример</div>
пример

transform CSS

Для остальных браузеров, чтобы написать текст вертикально, понадобиться transform

<div style="-webkit-transform: rotate(90deg); transform: rotate(90deg);">пример</div>
пример

Моноширинный вертикальный текст

ch поддерживается IE и Mozilla Firefox, поэтому присутствует em.

<div style="width: .7em; width: 1ch; text-align: center; font: Consolas, Monaco, monospace; word-wrap: break-word;">пример</div>
пример
в f t
наверх ↑

9 комментариев:

Николай Иванов
Клсааная панелька в сайдбаре)))
Николай Иванов
Нет, ну я тащусь от дизайна, все так классно и ничего лишнего, прямо взору услада. Хотя, может у меня глаз уже "замылен" от количества рекламы на блогах, на на вашем просто отдохнуть можно))
NMitra
Спасибо! С меня статейка что хотела добиться и что получилось реализовать. Хотя я постепенно раскрываю все моменты.

Анонимный
ey
Tatamico
Моноширинный
NMitra
Спасибо большое! Исправила.
Анонимный
Наталья здравствуйте. Подскажите а можно ли для IE текст отобразить вертикально, но чтобы читался он не с верху, а с низу? В общем зеркальный пример writing-mode CSS?
NMitra
Здравствуйте, IE тоже понимает свойство transform. Для поздних же версий есть фильтры, которые в последних версиях браузера уже не работают http://shpargalkablog.ru/2011/03/css-povorot.html (тут есть ссылки)
Анонимный
Спасибо сейчас буду смотреть!