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

Сен 24

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

Получится примерно вот так.

При помощи этого способа можно строить также множество базовых фигур – квадраты, эллипсы, круги и т.п, изменять им пропорции, вращать, добавлять цвет, заливать градиентом и даже делать анимацию. Также присутствует свой язык. Эдакий мини-флеш. Ложка дегтя – поддерживается только прогрессивными браузерами, с осликом подружить наврядли получится.

На почитать

Возможно, это будет интересно…

Tweet this

Web

11 Comments

Add your comment

  1. Alex Volkov » Архив » Карта сайта – какая у вас?
    Сен 24 at 10:40

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

  2. progg.ru
    Сен 24 at 10:47

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

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

  3. Boroda
    Сен 24 at 22:08

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

  4. В поисках вдохновения и необычного « Митрич Борода – уютный бложик на wordpress
    Сен 24 at 22:12

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

  5. Alex Volkov
    Сен 24 at 23:54

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

  6. Интересно почитать – часть 10 | Блог Терехова - продвижение сайтов, ведение блогов, заработок в интернет
    Сен 25 at 17:19

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

  7. Boroda
    Сен 25 at 19:55

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

  8. Alex Volkov
    Сен 25 at 21:11

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

  9. Хозяйке на заметку - elz.su -Web 2.0 на марше
    Окт 02 at 08:44

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

  10. Search Bot
    Окт 29 at 21:22

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

  11. Alex Volkov
    Окт 30 at 10:23

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

Post a comment