Когда я делал карту сайта, захотелось отобразить заголовки категорий вертикально. Но ни html, css пока сделать такого не позволяют. Хотя нет, css позволяет задать порядок расположения слов для языков, у которых порядок написания справа налево и сверху вниз (китайский например), но для кирилицы это не пойдет.
Как еще можно сделать текст вертикальным? Можно обрезать слово по буквам и разместить их в столбик. Можно применить javascript.
Есть еще один способ — создать картинку на лету из svg.
SVG (Scalable Vector Graphics) — это язык разметки масштабируемой векторной графики. При помощи него можно создавать на лету разные изображения, что я и использовал.
Делается это вот так:
<object style="float:left; height:200px" type="image/svg+xml" data="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'> <text x='-135' y='25' fill='#7a1249' font-family='Arial' font-size='25' transform='rotate(-90)'>Наш текст</text></svg>"> </object>
[raw]
