Поворот текста вертикально при помощи css

#html #css #html5

Нужно повернуть текст вертикально и расположить справа/слева возле изображения/текста.
Реализовал при помощи следующего кода:

.vertical_text{
    transform: rotate(-90deg);
    transform-origin: left top 0;
    position: absolute;
    right: -320px;
    bottom: 0;
}


Возникает проблема, необходимо абсолютно позиционировать этот блок текста по отношению
к блоку с изображением и величина смещения зависит от длинны строки текста. Я так понимаю
что браузер считает что текст остался в прежнем горизонтальном состоянии и берет отсчет
от этого положения. Сама проблема заключается в том что под каждый блок текста приходится
добавлять свой стиль со своим горизонтальным смещением чтобы подогнать его к изображению/тексту,
пытаюсь найти универсальное решение для всех случаев. Пример на фото:
    

Ответы

Ответ 1

p{
   writing-mode: tb-rl;
   transform:rotate(180deg);
   font-size:40px;
}
 lorem ipsum




support : http://caniuse.com/#search=writing-mode