Comments 115
о, госпади! я не знал, data: можно использовать без base64
при этом я поражён, что вы используете «
вместо «
position:absolute; left:-9999px; top:-9999px;»вместо «
display:none;»
попробуйте заменить position:absolute; left:-9999px; top:-9999px; на display:none;
и посмотреть в safari и chrome. текст сгенеренный через svg не скрывается
и посмотреть в safari и chrome. текст сгенеренный через svg не скрывается
UFO just landed and posted this here
Для IE можно без фильтров обойтись (фильтры плохо, потому что жрут память, отключают сглаживание (если текст будет на неизвестном фоне это не исправить), и, порой, непредсказуемо себя ведут при анимации). layout-flow: vertical-ideographic (для IE7 и ниже) и -ms-layout-flow: vertical-ideographic (для IE8 в стандартном режиме).
не смотря на отказ от js Noscript в Firefox 3 заблокировал отображение вертикального текста
В данном случае по поддержка CSS3 IE обошел всех :) (это я о writing-mode).
Флипнутый текст некорректно выделяется (оно и ясно флип чисто визуальный эффект), хотя если учесть, что svg вообще не выделяется как текст то все ок.
Флипнутый текст некорректно выделяется (оно и ясно флип чисто визуальный эффект), хотя если учесть, что svg вообще не выделяется как текст то все ок.
Вроде не новый способ, года два назад использовал
Почему тогда на хабре о нем не написали? ;)
Для многих, думаю он новый.
Для многих, думаю он новый.
может быть раньше и было что то похожее,(точно не на хабре) не знаю, но конкретно под этот список браузеров ничего не было
Сейчас посмотрел, в моем коде почему то в хроме вместо вертикального текста кракозябры, разбираюсь.
потому что web-kit не поддерживает кирилицу в svg, я как раз писал об этом
Вот только хотя бы за это скажу большое спасибо! =)
UFO just landed and posted this here
UFO just landed and posted this here
может быть дело в том что там используется чистый xml.
я пробовал ставить различные кодировки, в xhtml svg текст отображается кракозябрами
я пробовал ставить различные кодировки, в xhtml svg текст отображается кракозябрами
UFO just landed and posted this here
большое спасибо, за столь существенную доработку!
А вы не подскажете, как заставать сафари рисовать на прозрачном фоне?
UFO just landed and posted this here
В том то и беда, что в safari она почему-то белая.
Указываю только параметры текста и заливку fill (но она определяет цвет текста).
Если вам несложно, поменяйте цвет фона в вашем примере на любой, отличный от белого и посмотрите в safari — текст будет размещен в белых прямоугольниках.
Указываю только параметры текста и заливку fill (но она определяет цвет текста).
Если вам несложно, поменяйте цвет фона в вашем примере на любой, отличный от белого и посмотрите в safari — текст будет размещен в белых прямоугольниках.
UFO just landed and posted this here
Видимо эту проблему уже не решить?
Попробовал подложить прозрачный бекграунд, задать background-color: transparent; (на сколько я понимаю у тега object вообще нет свойства background).
Попробовал подложить прозрачный бекграунд, задать background-color: transparent; (на сколько я понимаю у тега object вообще нет свойства background).
UFO just landed and posted this here
Тогда я еще не знал о хабре =)
Я SVG использовал лет 5 назад, но тогда его напрямую не поддерживал ни один браузер. Он работал средствами плагина SVG Viewer, который я нечаянно установил вместе с Namo Web Editor. Мне тогда понравилось, что он может изменять не только направление текста, но и наклон картинок на стороне клиента, а так же создание градиентов.
Ок, а к чему это всё? Китайцами мы всё равно завтра все не станем.
Ндя, вёрстка это один большой велосипед. Такое ощущение, что делают не для себя, а для тёщи.
Очень круто, спасибо.
Реализацию уже давно видел в болкноте. (даты слева от пстов)
В Опере 9.64 (и Opera 10 alpha), если при выделении вертикального текста выйти за пределы блока, во всём браузере перестаёт работать выделение текста на страницах.
Буква `В` не выделяется. Opera 9.64, FreeBSD
Я не так давно тоже искал, как это делается и нашел эту статью: Cult-foo — Vertical text in HTML
спасибочки =)
Писать «web-kit» это примерно как «internet ex-plorer» )
Почему только вертикальный текст? Этим же способом можно поворачивать на любой угол.
в IE 6, 7, 8 нельзя
Для ИЕ больше, чем 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.это уже js
Не увидел в способе никакого JS.
не знаю даже как указать на очевидные вещи…
script type=«text/javascript» и
onclick='Spin(this.filters.item(0), 0, 1)'
— это что?
script type=«text/javascript» и
onclick='Spin(this.filters.item(0), 0, 1)'
— это что?
Это функция анимации слоя, который плавно поворачивается на заданный угол.
У вас странный способ мышления. Если пачку чипсов покупает миллионер, это не значить что чтобы купить пачку чипсов, нужно быть миллионером. То, что здесь используется JS не значить что способ основан на js. Все фильтры доступны через CSS.
UFO just landed and posted this here
вообще-то фильтры это и есть js
Офигеть можно)) даже и не думал что такое возможно.
Правда есть и недостаток: в Опере 9 шрифт мерзко сглажен, напоминает Линукс :(
Правда есть и недостаток: в Опере 9 шрифт мерзко сглажен, напоминает Линукс :(
вертикальный текст реализованный тут — 5+ но таких вот дизайнеров я в жизни своей проклинаю до глубины души…
Вы просто повернули моё сознание на 90 градусов!
Статья в большей степени оказалась полезна тем, что теперь когда я буду продумывать дизайн, я буду задумываться о том что можно пару строчек текста пустить под углом! т.е. несколько шире мыслить.
Статья в большей степени оказалась полезна тем, что теперь когда я буду продумывать дизайн, я буду задумываться о том что можно пару строчек текста пустить под углом! т.е. несколько шире мыслить.
У меня на сайте подсмотрели?
нет, ваш сайт я не видел. к тому же попробуйте ввести русский текст заместо цифр. + у меня есть возможность сделать текст под углом.
«к тому же попробуйте ввести русский текст заместо цифр. + у меня есть возможность сделать текст под углом.»
про цифры не понял, вторую часть тоже не расшифровал.
про цифры не понял, вторую часть тоже не расшифровал.
1) я имею ввиду что если ввести русский текст заместо дат то он будет отображаться иероглифами.
2) а что непонятно? я говорю что в моем примере можно пустить текст под любым углом. именно такого нигде нет
2) а что непонятно? я говорю что в моем примере можно пустить текст под любым углом. именно такого нигде нет
1) не будет, с чего вдруг он должен так отображаться? тем более, что пример в этой статье почти в точности повторяет то, что у меня на сайте
2) единственное, чего у меня нет — фильтра матричного преобразования для IE. Это, действительно, хорошо придумано. Я бы сделал через VML, но фильтр лучше.
2) единственное, чего у меня нет — фильтра матричного преобразования для IE. Это, действительно, хорошо придумано. Я бы сделал через VML, но фильтр лучше.
1) а в Safari и Google Chrome смотрели?
Не смотрел. Я написал «пример в этой статье почти в точности повторяет то, что у меня на сайте». Из чего я делаю вывод, что если вы смотрели и у вас работает, то и у меня должно работать.
пример не повторяет в точности то что у вас на сайте. попробуйте ввести русский текст и посмотреть в сафари и хроме — будут отображаться кракозябры.
ваш сайт я раньше не видел, и в качестве вдохновления брал эту статью — www.cult-f.net/2008/05/19/vertical-text-in-html/
переработал полностью ее и внес новые возможности
ваш сайт я раньше не видел, и в качестве вдохновления брал эту статью — www.cult-f.net/2008/05/19/vertical-text-in-html/
переработал полностью ее и внес новые возможности
«writing-mode» — это CSS3.
В konqueror вместе с KHTML несчадно глючит, вместе с webkit — нормально отображает. К тому же в нем и в опере можно скопировать текст куда-нибудь (в FF нельзя).
i004.radikal.ru/0905/47/8b404d44ef0f.png
i004.radikal.ru/0905/47/8b404d44ef0f.png
UFO just landed and posted this here
Каждый раз, когда читаю про верстку, убеждаюсь что те, кто ей занимаются — это люди со стальными нервами. Потому что делать такие финты ушами, выполнять такие танцы с бубнами, при этом постоянно меняя костыли — это очень сильное колдунство.
Но все же — не надо вертикального текста — это очень неудобно.
Но все же — не надо вертикального текста — это очень неудобно.
в FF сглаживание отвратное :(
супер! спасибо, а есть идеи как сделать не просто тест по вертикали, а чтоб он был ссылкой?:)
в ФФ текст выглядит просто ужасно :( и не дает его выделить
Спасибо, очень полезно.
Вот этим повеселили.
Отрицательные значения не берем! если нам надо повернуть на -45 градусов то значения тригонометрических функций берем от угла 315 градусов.
Вот этим повеселили.
Очень во время! Спасибо вам!
Наложение фильтра filter в IE приводит к отключению clear-type шрифта, нет ли другого способа зазеркалить текст?
А в IE6 текст выглядит как каша-малаша, если убрать filter:flipv() fliph(); то нормально
Sign up to leave a comment.
текст под произвольным углом без флеш и js