Когда я делал карту сайта, захотелось отобразить заголовки категорий вертикально. Но ни 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]
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, хотя метод используется один в один описанный тут.