Разместить

Рекомендуем

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

30.03.2010

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

Кроссбраузерность:
  • 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
Источник: www.habrahabr.ru

Понравилась статья? Поделитесь с друзьями!

Календарь публикаций

ПНВТСРЧТПТСБВС
    123
45678910
11121314151617
18192021222324
25262728293031
       

Оставайся в курсе