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

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

    Теперь я хочу вам рассказать о том как сделать поставленную задачу без картинок, флеш и js, только средствами html и css. К тому же стало возможно сделать текст под произвольным углом. В конце статьи есть готовый пример.

    вертикальный текст и текст под углом

    Кроссбраузерность:
    • Internet Explorer 6, 7, 8
    • Mozilla Firefox 2, 3
    • Opera 9
    • Safari 3, Google Chrome (webkit)

    Ограничения:
    Возможно сделать текст только в одну строку, и в блоке с жестко заданными размерами в пикселях.

    Начнем:

    Итак, нам понадобится обрамляющий блок с заданной шириной и высотой, а также высотой линии равной ширине этого блока(для выравнивания текста по центру):

    css:
    .vertical { overflow:hidden; line-height:30px; position:relative; white-space:nowrap; width:30px; height:200px; border:1px solid #999; }

    html:
    <div class="vertical"></div>

    Для современных браузеров будем использовать svg:

    css:
    .vertical object { width:30px; height:200px; display:block; } - задаем ширину равную высоте и высоту равную ширине обрамляющего блока.

    html:
    <object type="image/svg+xml" data="data:image/svg+xml; charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg'><text x='-200' y='18' font-family='Arial' font-size='12' fill='#000000' transform='rotate(-90)' text-rendering='optimizeSpeed'>вертикальный текст</text></svg>">
    </object>
    — x='-200' - координата начала строки текста от верхней стороны object, y='18' - координата базовой линии строки текста от левой стороны object,
    font-family='Arial' font-size='12' - размер, гарнитура шрифта,
    fill='#000000' - цвет текста,
    transform='rotate(-90)' - поворачиваем текст на -90 градусов. мы можем повернуть текст на любой угол


    Для IE всех версий:

    Так как IE даже 8-й версии не поддерживает svg(разработчики сказали что у них и так было много работы), будем использовать специфические свойства:
    writing-mode:tb-rl; — текст размещаем вертикально сверху вниз и справа налево
    filter:flipv() fliph(); — отражаем по горизонтали и вертикали.

    css:
    .vertical object { display:none; } - скрываем svg.
    .vertical span { filter:flipv() fliph(); writing-mode:tb-rl; display:block; position:absolute; left:0; bottom:0; height:200px; width:30px; }


    html:
    <span>вертикальный текст</span>

    для текста под углом css выглядит так:
    .vertical3 span { top:-8px; left:-31px; width:200px; writing-mode:lr-tb; filter:progid:DXImageTransform.Microsoft.Matrix(M11='0.985', M12='-0.174', M21='0.174', M22='0.985', SizingMethod=«auto expand»); }

    top, left — эмпирические значения. находятся экспериментально.
    M11 = cos(угла в градусах)
    M12 = -sin(угла в градусах)
    M21 = sin(угла в градусах)
    M22 = cos(угла в градусах)
    Отрицательные значения не берем! если нам надо повернуть на -45 градусов то значения тригонометрических функций берем от угла 315 градусов.

    Итог:


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

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

    Готовый пример:
    www.site-creator.info/html/vertical-text.php

    P.S. Спасибо enternet за то что помог избавится от хаков для Safari и Google Chrome
    P.P.S. Добавил пример текста под произвольным углом.

    P.P.P.S. Если используете материал статьи, указывайте ссылку на эту статью! Тут я буду добавлять сайты с нелегальным копированием:
    0. сайт был, но уже исправили

    Если автор такой статьи укажет источник, то его сайт уйдет из этого списка.
    Поделиться публикацией
    Комментарии 115
      +6
      о, госпади! я не знал, data: можно использовать без base64
        0
        при этом я поражён, что вы используете «position:absolute; left:-9999px; top:-9999px;»
        вместо «display:none;»
          0
          попробуйте заменить position:absolute; left:-9999px; top:-9999px; на display:none;
          и посмотреть в safari и chrome. текст сгенеренный через svg не скрывается
            +3
            А visibility: hidden, opacity: 0 или просто смещение в каком-то одном направлении не помогают?
              +4
              спасибо visibility:hidden помог. забыл испытать
                +1
                для надёжности можно ещё height:0; width:0;
                поскольку элемент с visibility:hidden по прежнему может влиять на расположение элементов (в общих случаях, но в данном у span стоит position:absolute; так что не важно)
                  0
                  верно. можно еще задать .vertical { overflow:hidden; } для надежности и скрывания лишнего текста
          • НЛО прилетело и опубликовало эту надпись здесь
          +3
          Для IE можно без фильтров обойтись (фильтры плохо, потому что жрут память, отключают сглаживание (если текст будет на неизвестном фоне это не исправить), и, порой, непредсказуемо себя ведут при анимации). layout-flow: vertical-ideographic (для IE7 и ниже) и -ms-layout-flow: vertical-ideographic (для IE8 в стандартном режиме).
            0
            это свойство позволит сделать отображение только как во втором блоке в примере, где как раз фильтр и не используется.
            +2
            не смотря на отказ от js Noscript в Firefox 3 заблокировал отображение вертикального текста
            +2
            В данном случае по поддержка CSS3 IE обошел всех :) (это я о writing-mode).
            Флипнутый текст некорректно выделяется (оно и ясно флип чисто визуальный эффект), хотя если учесть, что svg вообще не выделяется как текст то все ок.
              +1
              Это смотря где смотреть. В опере svg выделяется как текст. В Safari сделано через -webkit-transform там тоже выделяется, скоро выйдет FF3.5 в нем можно будет сделать через -moz-transform и там тоже будет выделяться.
              +1
              Вроде не новый способ, года два назад использовал
                +7
                Почему тогда на хабре о нем не написали? ;)
                Для многих, думаю он новый.
                  0
                  может быть раньше и было что то похожее,(точно не на хабре) не знаю, но конкретно под этот список браузеров ничего не было
                    0
                    Сейчас посмотрел, в моем коде почему то в хроме вместо вертикального текста кракозябры, разбираюсь.
                      +1
                      потому что web-kit не поддерживает кирилицу в svg, я как раз писал об этом
                        +1
                        Вот только хотя бы за это скажу большое спасибо! =)
                        • НЛО прилетело и опубликовало эту надпись здесь
                            0
                            В сафари 3 / Win кириллица в примере не отображалась.
                            • НЛО прилетело и опубликовало эту надпись здесь
                              0
                              может быть дело в том что там используется чистый xml.
                              я пробовал ставить различные кодировки, в xhtml svg текст отображается кракозябрами
                              • НЛО прилетело и опубликовало эту надпись здесь
                                  +1
                                  большое спасибо, за столь существенную доработку!
                                  • НЛО прилетело и опубликовало эту надпись здесь
                                    0
                                    А вы не подскажете, как заставать сафари рисовать на прозрачном фоне?
                                    • НЛО прилетело и опубликовало эту надпись здесь
                                        0
                                        В том то и беда, что в safari она почему-то белая.
                                        Указываю только параметры текста и заливку fill (но она определяет цвет текста).
                                        Если вам несложно, поменяйте цвет фона в вашем примере на любой, отличный от белого и посмотрите в safari — текст будет размещен в белых прямоугольниках.
                                        • НЛО прилетело и опубликовало эту надпись здесь
                                            0
                                            Видимо эту проблему уже не решить?
                                            Попробовал подложить прозрачный бекграунд, задать background-color: transparent; (на сколько я понимаю у тега object вообще нет свойства background).
                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                0
                                                Спасибо за совет. Поищу решение на js. Но проблема не в IE. Работает везде кроме Safari.
                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                    0
                                                    Очень странно. А под какой платформой?
                                                    Под windows все ок, только safari барагозит.
                                                    • НЛО прилетело и опубликовало эту надпись здесь
                                                        0
                                                        Под Safari нашел решение по этой ссылке: 
                                                        http://osdir.com/ml/GoogleMapsAPI/2009-07/msg00273.html
                                                        
                                                        Суть в использовании для Safari элемента типа IMG вместо OBJECT.
                                                        

                                                        • НЛО прилетело и опубликовало эту надпись здесь
                                                            0
                                                            Не за что!
                                  • НЛО прилетело и опубликовало эту надпись здесь
                            0
                            Тогда я еще не знал о хабре =)
                            0
                            Я SVG использовал лет 5 назад, но тогда его напрямую не поддерживал ни один браузер. Он работал средствами плагина SVG Viewer, который я нечаянно установил вместе с Namo Web Editor. Мне тогда понравилось, что он может изменять не только направление текста, но и наклон картинок на стороне клиента, а так же создание градиентов.
                            –2
                            Ок, а к чему это всё? Китайцами мы всё равно завтра все не станем.
                              0
                              в конце статьи я написал зачем понадобился мне этот способ. не известно для каких целей он может понадобится еще кому то
                              0
                              Ндя, вёрстка это один большой велосипед. Такое ощущение, что делают не для себя, а для тёщи.
                                +1
                                Вы не правы, верстка — это большой гараж с огромным числом маленьких велосипедов.
                                +1
                                Очень круто, спасибо.
                                  –4
                                  Реализацию уже давно видел в болкноте. (даты слева от пстов)
                                    +1
                                    попробуйте ввести там русский текст и посмотреть в сафари и хроме
                                    0
                                    В Опере 9.64 (и Opera 10 alpha), если при выделении вертикального текста выйти за пределы блока, во всём браузере перестаёт работать выделение текста на страницах.
                                      0
                                      можно наложить блок поверх object для запрета выделения:
                                      .vertical div { position:absolute; left:0; width:0; width:30px; height:200px; background-color:#fff; opacity:0 }

                                      но этого уже не будет в моем примере, это уже каждый сам для себя решит, надо ему это или нет
                                      +1
                                      Буква `В` не выделяется. Opera 9.64, FreeBSD
                                        0
                                        Я не так давно тоже искал, как это делается и нашел эту статью: Cult-foo — Vertical text in HTML
                                          0
                                          спасибочки =)
                                            +13
                                            Писать «web-kit» это примерно как «internet ex-plorer» )
                                              0
                                              Почему только вертикальный текст? Этим же способом можно поворачивать на любой угол.
                                                0
                                                в IE 6, 7, 8 нельзя
                                                  +2
                                                  Для ИЕ больше, чем 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.
                                                    0
                                                    это уже js
                                                      –6
                                                      Не увидел в способе никакого JS.
                                                        +1
                                                        не знаю даже как указать на очевидные вещи…
                                                        script type=«text/javascript» и
                                                        onclick='Spin(this.filters.item(0), 0, 1)'
                                                        — это что?
                                                          0
                                                          Это функция анимации слоя, который плавно поворачивается на заданный угол.
                                                          –3
                                                          У вас странный способ мышления. Если пачку чипсов покупает миллионер, это не значить что чтобы купить пачку чипсов, нужно быть миллионером. То, что здесь используется JS не значить что способ основан на js. Все фильтры доступны через CSS.
                                                            0
                                                            Однако они не будут работать в браузере, если в нем отключить js.
                                                            Разумеется, этот способ не основан на js, он использует js.
                                                              +4
                                                              Фильтры работают БЕЗ JS, фильтры не используют JS они работают на ActiveX с использованием возможностей DirectX (из-за этого, кстати, фильтры не работают в разных эмуляторах IE под linux и mac os). Это частое заблуждение насчет фильтров.
                                                                +1
                                                                Спасибо, больше заблуждаться не буду :-)
                                                                  0
                                                                  Хотя я просто был невнимателен, и подумал, что упоминались динамические фильтры, которые все-таки используют скрипт.
                                                                    –2
                                                                    Что такое динамичесике фильтры?
                                                                      0
                                                                      Сейчас пример не приведу, никогда не пользовался на практике, но без javasctipt'а не реализуются, например, эффекты появления и перехода элементов (наподобие «жалюзи»), хотя фильтры для этого в IE есть.
                                                                –2
                                                                вообще-то фильтры это и есть js
                                                                  0
                                                                  Вообще-то вы ошибаетесь. Вообще-то об этом уже написали 2 дня назад и я как-бы знал это до этого. Fail.
                                                                    0
                                                                    в чём это я ошибаюсь?
                                                                    написали вам про конкретный пример, где как раз таки и юзается директХ через активХ (ибо там даже написано — DX)
                                                                    в остальном это js. и писать его лучше как раз так, как и все js, а не через фильтры, ибо тормоза, за счёт рандомного выполнения.
                                                    0
                                                    Офигеть можно)) даже и не думал что такое возможно.

                                                    Правда есть и недостаток: в Опере 9 шрифт мерзко сглажен, напоминает Линукс :(
                                                      +3
                                                      Ваш коммент огорчает линуксоидов :)
                                                        0
                                                        Какой из них? или вы думаете что шрифты для графического режима встроены в ядро?
                                                          0
                                                          На странице с демонстрацией (http://www.site-creator.info/html/vertical-text.php) текст плохо сглажен (точно как на картинке в посте). думаю Опера для рендеринга шрифтов в SVG использует какую-то линуксовую библиотеку. Так-то мелочь, но на небольших размерах шрифта смотрится плохо, грязно.
                                                        +1
                                                        вертикальный текст реализованный тут — 5+ но таких вот дизайнеров я в жизни своей проклинаю до глубины души…
                                                          0
                                                          Иногда просят сверстать таблицы шириной в сотню колонок, где значения состоят из одного символа, а заголовки к колонкам — из десятка. Вот тогда-то и нужны вертикальные подписи. В печатной типографике этот способ иногда используется.
                                                          0
                                                          Вы просто повернули моё сознание на 90 градусов!

                                                          Статья в большей степени оказалась полезна тем, что теперь когда я буду продумывать дизайн, я буду задумываться о том что можно пару строчек текста пустить под углом! т.е. несколько шире мыслить.
                                                            +9
                                                            Думаю верстальщики будут вам благодарны :)
                                                              0
                                                              Если уж очень-очень надо, то ограничьтесь углами в 90 градусов -) Промежуточные значения кроссбраузерно, похоже, не реализуются.
                                                                0
                                                                реализуются, уже сделал. посмотрите пример
                                                                0
                                                                О боже… Пора искать веревку и мыло(
                                                                  0
                                                                  к чему вы это? возможно у меня плохо с чувством юмора.
                                                                    +1
                                                                    Ну я про то, что у верстальщика и без этого хватает работы. Хотя когда хорошо платят, почему бы и не делать такие фичи.
                                                                –2
                                                                У меня на сайте подсмотрели?
                                                                  0
                                                                  нет, ваш сайт я не видел. к тому же попробуйте ввести русский текст заместо цифр. + у меня есть возможность сделать текст под углом.
                                                                    0
                                                                    «к тому же попробуйте ввести русский текст заместо цифр. + у меня есть возможность сделать текст под углом.»

                                                                    про цифры не понял, вторую часть тоже не расшифровал.
                                                                      0
                                                                      1) я имею ввиду что если ввести русский текст заместо дат то он будет отображаться иероглифами.
                                                                      2) а что непонятно? я говорю что в моем примере можно пустить текст под любым углом. именно такого нигде нет
                                                                        0
                                                                        1) не будет, с чего вдруг он должен так отображаться? тем более, что пример в этой статье почти в точности повторяет то, что у меня на сайте
                                                                        2) единственное, чего у меня нет — фильтра матричного преобразования для IE. Это, действительно, хорошо придумано. Я бы сделал через VML, но фильтр лучше.
                                                                          0
                                                                          1) а в Safari и Google Chrome смотрели?
                                                                            0
                                                                            Не смотрел. Я написал «пример в этой статье почти в точности повторяет то, что у меня на сайте». Из чего я делаю вывод, что если вы смотрели и у вас работает, то и у меня должно работать.
                                                                              0
                                                                              пример не повторяет в точности то что у вас на сайте. попробуйте ввести русский текст и посмотреть в сафари и хроме — будут отображаться кракозябры.
                                                                              ваш сайт я раньше не видел, и в качестве вдохновления брал эту статью — www.cult-f.net/2008/05/19/vertical-text-in-html/
                                                                              переработал полностью ее и внес новые возможности
                                                                  0
                                                                  «writing-mode» — это CSS3.
                                                                    0
                                                                    да. все ie его поддерживают
                                                                      –2
                                                                      я знаю, Кэп!
                                                                    0
                                                                    В konqueror вместе с KHTML несчадно глючит, вместе с webkit — нормально отображает. К тому же в нем и в опере можно скопировать текст куда-нибудь (в FF нельзя).
                                                                    i004.radikal.ru/0905/47/8b404d44ef0f.png
                                                                    • НЛО прилетело и опубликовало эту надпись здесь
                                                                        0
                                                                        у меня в ff2, ff3 грузится мгновенно
                                                                        +2
                                                                        Каждый раз, когда читаю про верстку, убеждаюсь что те, кто ей занимаются — это люди со стальными нервами. Потому что делать такие финты ушами, выполнять такие танцы с бубнами, при этом постоянно меняя костыли — это очень сильное колдунство.

                                                                        Но все же — не надо вертикального текста — это очень неудобно.
                                                                          0
                                                                          в FF сглаживание отвратное :(
                                                                            0
                                                                            супер! спасибо, а есть идеи как сделать не просто тест по вертикали, а чтоб он был ссылкой?:)
                                                                              0
                                                                              т.к. вертикальный текст можно сделать только в блоке с фиксированными размерами то можно поместить ссылку в блок .vertical, задать для нее display:block; position:absolute; left:0; top;0; и размеры
                                                                              0
                                                                              в ФФ текст выглядит просто ужасно :( и не дает его выделить
                                                                                0
                                                                                Спасибо, очень полезно.

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

                                                                                Вот этим повеселили.
                                                                                  0
                                                                                  Очень во время! Спасибо вам!
                                                                                    0
                                                                                    Наложение фильтра filter в IE приводит к отключению clear-type шрифта, нет ли другого способа зазеркалить текст?
                                                                                      0
                                                                                      А в IE6 текст выглядит как каша-малаша, если убрать filter:flipv() fliph(); то нормально

                                                                                      Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                                                      Самое читаемое