Выравнивание текста под углом. Возможно ли ?

bond84 · August 2, 2007

Добрый день.

Подскажите пожалуйста, возможно ли выравнять текст слева - по некой прямой (под углом) - а справа- по ширине свободной области.

Пример левой области - http://img.artlebedev.ru/studio/vacancy/mi...hard/a-text.gif

Уже не один раз возникала подобная необходимость, но стандартного решения (работающего с текстом любой длины) так и не смог найти.

Буду благодарен за помощь.

YETI · August 2, 2007

Ничего, кроме как порезать картинку слева на много полосок высотой в строку, в голову не пришло.

Shilgya · August 2, 2007

самый правильный способ - отказаться от этой затеи.

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

bond84 · August 2, 2007

Может при помощи интеграции с Java Scrtipt может быть найдено решение?

Fu-tai · August 2, 2007

Если бы для веба были реализованы все возможности присущие типографистам, то мы бы давно уже жили на Марсе и у каждого была своя летающая тарелка! Хотя можно попробовать решить такую задачу! Но помоему сие не стоит потраченных мучений!

rmaksim · August 11, 2007

для конкретной картинки(буквы) можно попробовать так...

<!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" xml:lang="en" lang="en">
<head>
	<title></title>
	<style type="text/css">
	<!--
	b{
		position: absolute;
		top: 0;
		left: 0;
		font: 130px/130px Verdana;
	}
	p{
		position: relative;
		width: 320px;
		text-align: justify;
		font-size: 14px;
		line-height: 16px;
	}
	span{
		display: block;
		float: left;
		clear: both;
		height: 16px;
		margin-right: 10px;
	}
	-->
	</style>
</head>

<body>

		<p>
			<b>A</b>
			<span style="width:55px;" ></span>
			<span style="width:60px;" ></span>
			<span style="width:65px;" ></span>
			<span style="width:70px;" ></span>
			<span style="width:75px;" ></span>
			<span style="width:80px;" ></span>
			<span style="width:85px;" ></span>
			<span style="width:90px;" ></span>
			как бы обтекание объекта как бы обтекание объекта как бы обтекание объекта как бы обтекание объекта 
			как бы обтекание объекта как бы обтекание объекта как бы обтекание объекта как бы обтекание объекта 
			как бы обтекание объекта как бы обтекание объекта как бы обтекание объекта как бы обтекание объекта 
			как бы обтекание объекта как бы обтекание объекта как бы обтекание объекта как бы обтекание объекта 
		</p>

</body>
</html>

если делать много таких фрагментов - то... как говорится "выбор за вами",

а если одна картинка - так можно и потратить минут 5... и сделать красиво...

высота строки текста и наших span-ов соответственно должны быть равны (в примере 16px), что бы нормально все переносилось и не "зависало нигде"...

Fu-tai · August 11, 2007

Именно что-то подобное я и имел ввиду!

To rmaksim

float: left; /*— обтекать слева —*/

clear: both; /*— не обтекать, везде —*/

Это как?

rmaksim · August 11, 2007

Именно что-то подобное я и имел ввиду!
float: left; /*— обтекать слева —*/
clear: both; /*— не обтекать, везде —*/
Это как?

это... именно так как ты написал... ,

ты пример смотрел? закрась спаны и увидишь как это работает...

можно и clear:left;, тогда комменты будут примерно такие

float: left; /*— обтекать слева —*/

clear: left; /*— не обтекать слева —*/

Fu-tai · August 11, 2007

Да я и без закрашенных спанов вижу как это работает!

rmaksim · August 11, 2007

Да я и без закрашенных спанов вижу как это работает!

ну вот и ладненько...

Fu-tai · August 12, 2007

бу

rmaksim · October 14, 2007

вот более наглядно видать как это работает

http://storage.couchfort.net/cssCurves/

rmaksim · September 29, 2008

и еще один примерчик

http://rmaksim.habrahabr.ru/blog/41220/

homm · September 29, 2008

и еще один примерчик
http://rmaksim.habrahabr.ru/blog/41220/

Ох и некрофилов развелось то

Vlad · September 30, 2008

Почему некрофилы?

homm · September 30, 2008

Почему некрофилы?

rmaksim 15.10.2007, 4:54

Sign In

Выравнивание текста под углом. Возможно ли ?

Question

Link to comment

Share on other sites

15 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

Join the conversation

Обсуждения

Important Information