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

Кроссбраузерность:
Internet Explorer 6, 7, 8
Мозилла Firefox 2, 3
Opera 9
Safari 3, Гугл Chrome (webkit)
Ограничения:
Может быть сделать текст исключительно в одну строчку, и в блоке с агрессивно данными размерами в пикселях.
Начнем:
Итак, нам пригодится обрамляющий блок с данной шириной и высотой, также высотой полосы равной ширине этого блока(для выравнивания текста по центру):
css:

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

html:

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

css:

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

html:


— 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:

вертикальный текст

для текста под углом 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

Похожие материалы раздела: Комментарии закрыты, но вы можете Трекбэк с вашего сайта.

Комментарии закрыты.