Автор Тема: CSS - вертикальное написание текста  (Прочитано 8253 раз)

Оффлайн wut

  • Старший
  • ****
  • Сообщений: 531
  • Карма: +0/-0
 Долго искал - как написать текст вертикально) Перерыл все, каких только извращений не заметил, единственное адекватное решение, как всегда, нашел на хабрахабре)
 css
 .vertical { overflow:hidden;
                line-height:30px;
                position:relative;
                white-space:nowrap;
                width:30px;
                height:200px;
                border:1px solid #999;
}                                     
 .vertical object { width:30px;
                height:200px;
                display:block;
}

скрипт - $text это ваша переменная
 <div class='vertical'>
  <object type='image/svg+xml' data=\"data:image/svg+xml; charset=utf-8,&lt;svg xmlns='http://www.w3.org/2000/svg'&gt;&lt;text x='-200' y='18' font-family='Arial' font-size='26' font-weight='bold' fill='#FF5C28' transform='rotate(-90)' text-rendering='optimizeSpeed'&gt;$text&lt;/text&gt;&lt;/svg&gt;\"></object>
 </div>
 
И текст реально переварачивается, а главное - работает везде) Это только пример, извратить и сделать шедевр - дело каждого^^
mb986

Оффлайн Ivan

  • Полноправный
  • ***
  • Сообщений: 169
  • Карма: +0/-0
    • Prilepsky.com
CSS - вертикальное написание текста
« Ответ #1 : 15-10-2009 12:49:51 »
Тоже читаешь хабр?  =)
Вот только не знаю, куда нужен перевернутый текст ?

p.s. на хабре пост был про то как весь текст перевернуть на сайте ( или весь сайт, точно не помню ) - прикольнись над знакомым называется =)

Оффлайн wut

  • Старший
  • ****
  • Сообщений: 531
  • Карма: +0/-0
CSS - вертикальное написание текста
« Ответ #2 : 15-10-2009 12:56:02 »
 Он нужен много везде, не хочу раздувать формочку из-за 1 слова) Увеличил, Перевернул и стало понятно) Там всего-то 3 варианта переменной)
 Да, а вот сайт перевернуть целиком - прикольно наверное) Можно JS какой-нибудь сделать, который текст под мышкой переворачивает) Или как модуль для браузера, который устанавливаешь))) вообще будет) Думаю 1 делом снесут винду)))
mb986

Оффлайн DonElectron

  • Новичок
  • *
  • Сообщений: 25
  • Карма: +0/-0
    • Дон Электрон
CSS - вертикальное написание текста
« Ответ #3 : 24-10-2009 11:47:59 »
Тоже читаешь хабр?  =)
Вот только не знаю, куда нужен перевернутый текст ?

p.s. на хабре пост был про то как весь текст перевернуть на сайте ( или весь сайт, точно не помню ) - прикольнись над знакомым называется =)
У нас на работе 1 апреля внутренний сайт периодически перескакивал с нормального вида на перевернутый. Весело, всем понравилось. :)