текст под произвольным углом без флеш и js

[arestov]

о, госпади! я не знал, data: можно использовать без base64

[arestov]

при этом я поражён, что вы используете «position:absolute; left:-9999px; top:-9999px;»
вместо «display:none;»

[sitecreator]

попробуйте заменить position:absolute; left:-9999px; top:-9999px; на display:none;
и посмотреть в safari и chrome. текст сгенеренный через svg не скрывается

[sitecreator]

спасибо visibility:hidden помог. забыл испытать

[arestov]

для надёжности можно ещё height:0; width:0;
поскольку элемент с visibility:hidden по прежнему может влиять на расположение элементов (в общих случаях, но в данном у span стоит position:absolute; так что не важно)

[sitecreator]

верно. можно еще задать .vertical { overflow:hidden; } для надежности и скрывания лишнего текста

[Panya]

Для IE можно без фильтров обойтись (фильтры плохо, потому что жрут память, отключают сглаживание (если текст будет на неизвестном фоне это не исправить), и, порой, непредсказуемо себя ведут при анимации). layout-flow: vertical-ideographic (для IE7 и ниже) и -ms-layout-flow: vertical-ideographic (для IE8 в стандартном режиме).

[sitecreator]

это свойство позволит сделать отображение только как во втором блоке в примере, где как раз фильтр и не используется.

[Serafim]

не смотря на отказ от js Noscript в Firefox 3 заблокировал отображение вертикального текста

[sitecreator]

странно у меня без js работает

[Serafim]

linkme.ufanet.ru/images/12/128354cd2f2ffdae55e2602cd53e292b.png

[Devgru]

Он просто и SVG блочит тоже

[egorinsk]

Это к разработчикам noscript претензия а не к автору я думаю

[Jenek]

В данном случае по поддержка CSS3 IE обошел всех :) (это я о writing-mode).
Флипнутый текст некорректно выделяется (оно и ясно флип чисто визуальный эффект), хотя если учесть, что svg вообще не выделяется как текст то все ок.

[Panya]

Это смотря где смотреть. В опере svg выделяется как текст. В Safari сделано через -webkit-transform там тоже выделяется, скоро выйдет FF3.5 в нем можно будет сделать через -moz-transform и там тоже будет выделяться.

[Lico]

Вроде не новый способ, года два назад использовал

[meako]

Почему тогда на хабре о нем не написали? ;)
Для многих, думаю он новый.

[sitecreator]

может быть раньше и было что то похожее,(точно не на хабре) не знаю, но конкретно под этот список браузеров ничего не было

[Lico]

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

[sitecreator]

потому что web-kit не поддерживает кирилицу в svg, я как раз писал об этом

[Lico]

Вот только хотя бы за это скажу большое спасибо! =)

[sitecreator]

может быть дело в том что там используется чистый xml.
я пробовал ставить различные кодировки, в xhtml svg текст отображается кракозябрами

[sitecreator]

большое спасибо, за столь существенную доработку!

[Loengreen]

А вы не подскажете, как заставать сафари рисовать на прозрачном фоне?

[Loengreen]

В том то и беда, что в safari она почему-то белая.
Указываю только параметры текста и заливку fill (но она определяет цвет текста).
Если вам несложно, поменяйте цвет фона в вашем примере на любой, отличный от белого и посмотрите в safari — текст будет размещен в белых прямоугольниках.

[Loengreen]

Видимо эту проблему уже не решить?
Попробовал подложить прозрачный бекграунд, задать background-color: transparent; (на сколько я понимаю у тега object вообще нет свойства background).

[Loengreen]

Спасибо за совет. Поищу решение на js. Но проблема не в IE. Работает везде кроме Safari.

[Loengreen]

Очень странно. А под какой платформой?
Под windows все ок, только safari барагозит.

[serpeika]

Под Safari нашел решение по этой ссылке: 
http://osdir.com/ml/GoogleMapsAPI/2009-07/msg00273.html

Суть в использовании для Safari элемента типа IMG вместо OBJECT.

[serpeika]

Не за что!

[Lico]

Тогда я еще не знал о хабре =)

[Pingwin32]

Я SVG использовал лет 5 назад, но тогда его напрямую не поддерживал ни один браузер. Он работал средствами плагина SVG Viewer, который я нечаянно установил вместе с Namo Web Editor. Мне тогда понравилось, что он может изменять не только направление текста, но и наклон картинок на стороне клиента, а так же создание градиентов.

[DIDJER]

Ок, а к чему это всё? Китайцами мы всё равно завтра все не станем.

[sitecreator]

в конце статьи я написал зачем понадобился мне этот способ. не известно для каких целей он может понадобится еще кому то

[Stmf]

Ндя, вёрстка это один большой велосипед. Такое ощущение, что делают не для себя, а для тёщи.

[homm]

Вы не правы, верстка — это большой гараж с огромным числом маленьких велосипедов.

[Gero]

Очень круто, спасибо.

[homm]

Реализацию уже давно видел в болкноте. (даты слева от пстов)

[sitecreator]

попробуйте ввести там русский текст и посмотреть в сафари и хроме

[mefix]

В Опере 9.64 (и Opera 10 alpha), если при выделении вертикального текста выйти за пределы блока, во всём браузере перестаёт работать выделение текста на страницах.

[sitecreator]

можно наложить блок поверх object для запрета выделения:
.vertical div { position:absolute; left:0; width:0; width:30px; height:200px; background-color:#fff; opacity:0 }

но этого уже не будет в моем примере, это уже каждый сам для себя решит, надо ему это или нет

[kolpeex]

Буква `В` не выделяется. Opera 9.64, FreeBSD

[svoloshyn]

Я не так давно тоже искал, как это делается и нашел эту статью: Cult-foo — Vertical text in HTML

[panlancelot]

спасибочки =)

[pepelsbey]

Писать «web-kit» это примерно как «internet ex-plorer» )

[nobr]

Почему только вертикальный текст? Этим же способом можно поворачивать на любой угол.

[sitecreator]

в IE 6, 7, 8 нельзя

[nobr]

Для ИЕ больше, чем 5.5 есть фильтры. Я делал это свосем недавно. Вот кусок кода:

<script type="text/javascript">
function Spin(aFilter, aDeg, aInc) {
  aDeg += aInc;
  var rad = aDeg * Math.PI * 2 / 360,
    costheta = Math.cos(rad),
    sintheta = Math.sin(rad);
  aFilter.M11 = costheta;
  aFilter.M12 = -sintheta;
  aFilter.M21 = sintheta;
  aFilter.M22 = costheta;
  if (aDeg < 30) {
    window.setTimeout(function () {
            Spin(aFilter, aDeg, aInc);
          }, 100);
  }
}
</script>
<div onclick='Spin(this.filters.item(0), 0, 1)'>Some text</div>

* This source code was highlighted with Source Code Highlighter.

[sitecreator]

это уже js

[homm]

Не увидел в способе никакого JS.

[sitecreator]

не знаю даже как указать на очевидные вещи…
script type=«text/javascript» и
onclick='Spin(this.filters.item(0), 0, 1)'
— это что?

[nobr]

Это функция анимации слоя, который плавно поворачивается на заданный угол.

[sitecreator]

это понятно. но это ведь js. или возможно применение нужного фильтра в css? если так то было бы неполохо узнать название фильтра

[nobr]

studio.bashnet.ru/rukovodstvo/css/filter/static.php#Matrix

[Panya]

msdn.microsoft.com/en-us/library/ms533014(VS.85).aspx

[homm]

У вас странный способ мышления. Если пачку чипсов покупает миллионер, это не значить что чтобы купить пачку чипсов, нужно быть миллионером. То, что здесь используется JS не значить что способ основан на js. Все фильтры доступны через CSS.

[Panya]

Фильтры работают БЕЗ JS, фильтры не используют JS они работают на ActiveX с использованием возможностей DirectX (из-за этого, кстати, фильтры не работают в разных эмуляторах IE под linux и mac os). Это частое заблуждение насчет фильтров.

[homm]

Что такое динамичесике фильтры?

[crwin]

вообще-то фильтры это и есть js

[homm]

Вообще-то вы ошибаетесь. Вообще-то об этом уже написали 2 дня назад и я как-бы знал это до этого. Fail.

[crwin]

в чём это я ошибаюсь?
написали вам про конкретный пример, где как раз таки и юзается директХ через активХ (ибо там даже написано — DX)
в остальном это js. и писать его лучше как раз так, как и все js, а не через фильтры, ибо тормоза, за счёт рандомного выполнения.

[egorinsk]

Офигеть можно)) даже и не думал что такое возможно.

Правда есть и недостаток: в Опере 9 шрифт мерзко сглажен, напоминает Линукс :(

[Indamix]

Ваш коммент огорчает линуксоидов :)

[1amer]

Какой из них? или вы думаете что шрифты для графического режима встроены в ядро?

[egorinsk]

На странице с демонстрацией (http://www.site-creator.info/html/vertical-text.php) текст плохо сглажен (точно как на картинке в посте). думаю Опера для рендеринга шрифтов в SVG использует какую-то линуксовую библиотеку. Так-то мелочь, но на небольших размерах шрифта смотрится плохо, грязно.

[Consul]

вертикальный текст реализованный тут — 5+ но таких вот дизайнеров я в жизни своей проклинаю до глубины души…

[nobr]

Иногда просят сверстать таблицы шириной в сотню колонок, где значения состоят из одного символа, а заголовки к колонкам — из десятка. Вот тогда-то и нужны вертикальные подписи. В печатной типографике этот способ иногда используется.

[kellas]

Вы просто повернули моё сознание на 90 градусов!

Статья в большей степени оказалась полезна тем, что теперь когда я буду продумывать дизайн, я буду задумываться о том что можно пару строчек текста пустить под углом! т.е. несколько шире мыслить.

[svoloshyn]

Думаю верстальщики будут вам благодарны :)

[sitecreator]

реализуются, уже сделал. посмотрите пример

[ambientos]

О боже… Пора искать веревку и мыло(

[kellas]

к чему вы это? возможно у меня плохо с чувством юмора.

[ambientos]

Ну я про то, что у верстальщика и без этого хватает работы. Хотя когда хорошо платят, почему бы и не делать такие фичи.

[bolk]

У меня на сайте подсмотрели?

[sitecreator]

нет, ваш сайт я не видел. к тому же попробуйте ввести русский текст заместо цифр. + у меня есть возможность сделать текст под углом.

[bolk]

«к тому же попробуйте ввести русский текст заместо цифр. + у меня есть возможность сделать текст под углом.»

про цифры не понял, вторую часть тоже не расшифровал.

[sitecreator]

1) я имею ввиду что если ввести русский текст заместо дат то он будет отображаться иероглифами.
2) а что непонятно? я говорю что в моем примере можно пустить текст под любым углом. именно такого нигде нет

[bolk]

1) не будет, с чего вдруг он должен так отображаться? тем более, что пример в этой статье почти в точности повторяет то, что у меня на сайте
2) единственное, чего у меня нет — фильтра матричного преобразования для IE. Это, действительно, хорошо придумано. Я бы сделал через VML, но фильтр лучше.

[sitecreator]

1) а в Safari и Google Chrome смотрели?

[bolk]

Не смотрел. Я написал «пример в этой статье почти в точности повторяет то, что у меня на сайте». Из чего я делаю вывод, что если вы смотрели и у вас работает, то и у меня должно работать.

[sitecreator]

пример не повторяет в точности то что у вас на сайте. попробуйте ввести русский текст и посмотреть в сафари и хроме — будут отображаться кракозябры.
ваш сайт я раньше не видел, и в качестве вдохновления брал эту статью — www.cult-f.net/2008/05/19/vertical-text-in-html/
переработал полностью ее и внес новые возможности

[bolk]

«writing-mode» — это CSS3.

[sitecreator]

да. все ie его поддерживают

[bolk]

я знаю, Кэп!

[Fragster]

В konqueror вместе с KHTML несчадно глючит, вместе с webkit — нормально отображает. К тому же в нем и в опере можно скопировать текст куда-нибудь (в FF нельзя).
i004.radikal.ru/0905/47/8b404d44ef0f.png

[sitecreator]

у меня в ff2, ff3 грузится мгновенно

[avz]

Каждый раз, когда читаю про верстку, убеждаюсь что те, кто ей занимаются — это люди со стальными нервами. Потому что делать такие финты ушами, выполнять такие танцы с бубнами, при этом постоянно меняя костыли — это очень сильное колдунство.

Но все же — не надо вертикального текста — это очень неудобно.

[nicothin]

в FF сглаживание отвратное :(

[Grady]

супер! спасибо, а есть идеи как сделать не просто тест по вертикали, а чтоб он был ссылкой?:)

[sitecreator]

т.к. вертикальный текст можно сделать только в блоке с фиксированными размерами то можно поместить ссылку в блок .vertical, задать для нее display:block; position:absolute; left:0; top;0; и размеры

[grimskin]

в ФФ текст выглядит просто ужасно :( и не дает его выделить

[Stormix]

Спасибо, очень полезно.

Отрицательные значения не берем! если нам надо повернуть на -45 градусов то значения тригонометрических функций берем от угла 315 градусов.

Вот этим повеселили.

[kersh]

Очень во время! Спасибо вам!

[bdiang]

Наложение фильтра filter в IE приводит к отключению clear-type шрифта, нет ли другого способа зазеркалить текст?

[bdiang]

А в IE6 текст выглядит как каша-малаша, если убрать filter:flipv() fliph(); то нормально