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

Когда я делал карту сайта, захотелось отобразить заголовки категорий вертикально. Но ни 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]SVG На википедии
  • Офф. доки по SVG
  • 3.33 avg. rating (70% score) - 3 votes

    11 комментариев

    • […] пришлось немного повозиться. И еще один – это вывод вертикально написанного текста. Это, конечно, не текст а картинка, но все равно, при […]

    • Вертикальный текст в html…

      Thank you for submitting this cool story — Trackback from progg.ru…

    • крякозябры в хроме показывает

      • Кракозябры у меня в блоге показывает или когда себе копируешь и смотришь?

    • […] дядька показал как сделать  вертикальный текст html, но он почему то в виде крякозябр, надеюсь он ответит […]

    • […] Волков рассказал как сделать вертикальный текст в html. Рекомендую подписаться на его блог, таких […]

    • у тебя в блоге, в фф все ок, вообщем с хромом эта фича не работает

      • Ну, под линупс хрома нет, поэтому посмотреть не могу.

    • […] полезный пример спасибо alexvolkov! 5.  Для того что бы поисковики не индексировали ваши JS, […]

    • Вот они крякозябры в Хроме: http://clip2net.com/clip/m9343/1256840379-clip-4kb.png
      А вообще вот как это делается с помощью css http://habrahabr.ru/blogs/css/58732/

      • Незнаю, где там css, в статье написано что при помощи php, хотя метод используется один в один описанный тут.


    Александр Волков, Creative Commons Attribution-ShareAlike 3.0 Unported.
    css.php