Текст не горизонтально

Nikolas · October 11, 2010

Интересует такой вопрос - возможно ли каким-либо образом (CSS, JavaScript) на сайте задать расположение текстовой строки не горизонтально, а под наклоном?

Vlad · October 11, 2010

Самое универсальное решение - картинка.

npofopr · October 11, 2010

сами хоть немного поищите

rus · October 11, 2010

есть такая штука css transform, но ие как всегда в ауте.

а еще так вот можно.

Edited October 11, 2010 by rus

SelenIT · October 11, 2010

ие как всегда в ауте

В IE есть фильтр Matrix (собственно, в библиотеке по той ссылке он и используется).

psywalker · October 11, 2010

Работает везде кроме Ipod"а")

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
#div1 {
		margin: 0 auto;
		height: 100px;
		width: 400px;
		border: 1px solid #000;
		background: red;

	-moz-transform: rotate(60deg);
 -webkit-transform: rotate(60deg); 
-o-transform: rotate(60deg);  

	filter:
	progid:DXImageTransform.Microsoft.BasicImage(Rotation=1, Mirror=0, Invert=0, XRay=0, Grayscale=0, Opacity=3.25);

	}


</style>
</head>

<body>
<div id="div1">
	HI!!!
</div>

</body>
</html>

Vlad · October 11, 2010

Для Сафари и Хрома работает.

transform: rotate(60deg);

barsev · October 11, 2010

А посмотрите вот здесь - возможно выберете, что вам требуется.

psywalker · October 11, 2010

А посмотрите вот здесь - возможно выберете, что вам требуется.

Жестоко)

Vlad · October 12, 2010

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

d0ublezer0 · October 18, 2010

Привет всем.

Мне понадобилось повернуть текст на 270 градусов.

Нормально сработало только в FF 3.6

Опера не поняла, IE7 понял, но обрезал верхушку текста.

Я совсем запутался, всяко пробовал. Посмотрите, пожалуйста, на страничку: http://leveler.ru/ra/

Так, с IE вроде разобрался, почему отрезалось.

Только при трансформации в IE текст с артефактами - как будто говеный антиалиасинг.

Остается Опера о остальные.

Edited October 18, 2010 by d0ublezer0

Great Rash · October 18, 2010

Предлагаю заюзать библиотеку raphael - http://raphaeljs.com

При помощи нее можно написать что-то вроде:

var t = paper.text(50, 50, "test\ntext");
t.rotate(270);

d0ublezer0 · October 18, 2010

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

Я сам в jQuery не очень - там есть способы трансформировать текст?

Edited October 18, 2010 by d0ublezer0

d0ublezer0 · October 18, 2010

Нашел вот такой плагин: mbFlipText

Он нормально отрабатывает через SVG, но в таком случае теряется возможность назначать цвет текста при :hover.

Уточнение: в IE всё отлично.

В Опере нет прозрачности у объекта SVG, в Firefox теряется цвет :hover

Вот, смотрим.

Блин, что ж за засада такая.. Неужели придется делать картинками?

SelenIT · October 18, 2010

в jQuery не очень - там есть способы трансформировать текст?

Применяем дедукцию: JQ — по сути расширенный интерфейс к DOM страницы, быстрый и удобный "достукатор" для объектов HTML и CSS. Эти объекты умеют поворачивать текст? Если да — то и JQ сможет (в тех браузерах, где умеют), если нет — по-любому придется подключать что-то стороннее (вплоть до флэша). Raphaël, имхо, весьма достойный вариант, достаточно кроссбраузерный.

d0ublezer0 · October 20, 2010

Добился в общем без SVG. Работает в IE7+, FF3.6 (меньшего нет, чтобы проверить), в Opera 10.63 (в 9,60 работать не захотело). В хроме тоже пашет.

Худо-бедно работает в IE6, но там всё криво. Я на него забил.

В общем, всем спасибо за участие.

d0ublezer0 · October 20, 2010

И еще вопрос: у меня никак не получается выровнять в IE вертикальный текст по нижней границе. Может посоветуете?

Sign In

Текст не горизонтально

Question

Link to comment

Share on other sites

16 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information