Текст под углом ( не сss-transform)?

Question

[Дмитрий Муштат]

Есть необходимость написания текста под углом. Изображение прилагается.


Знаю, что так можно сделать. Если кто-то сталкивался, пожалуйста поделитесь решением.

Заранее благодарен!

Answer 1

[egorinsk]

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

Comments

[Евгений]

Не думаю, что тебя интересует производительность при рендеринге… и реквестирую пример с использованием флоатов

[egorinsk]

Что касается производительности, то для флоатов не нужна тяжелая 200-килобайтовая яваскрипт-библиотека, разве это не плюс?

Пример обтекания на флоатах есть тут: rmcreative.ru/blog/post/slozhnoe-obtekanie-tekstom Это старая задача, еще на сайте Лебедева когда-то такая задача висела.

[Евгений]

Ну что же ты так на других ссылаешься, напиши тут пример, и мы сравним объём кода. И покажи в моём втором примере (да и хотя бы в первом) тяжёлую 200кб библиотеку. И если уж ты так не любишь jQuery, что тебе мешает написать document.getElementsByTagName('p')?

[egorinsk]

А что писать? пример есть, автор вопроса может сам выбрать тот способ, который ему больше нравится. Но делать верстку на яваскриптах — не лучшая идея (почему — не помню, помню только что это плохо).

Answer 2

[Евгений]

<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>

var list   = $('p');
var shift  = 20;
var margin = list.length * shift;
list.each(function()
{
    this.style.marginLeft = margin + 'px';
    margin -= shift;
});

Answer 3

[Евгений]

или без javascript

DIV DIV {
	margin-left:20px;
}

<div>
    <div>
        <div>
            Lorem ipsum
        </div>
        Lorem ipsum
    </div>
    Lorem ipsum
</div>

Answer 4

[Mike_Bazhenov]

Каждую строчку в

<p>

и

text-indent:20px;

Comments

[Mike_Bazhenov]

Точнее так
когда-то такая задача висела.
когда-то такая задача висела.
когда-то такая задача висела.
когда-то такая задача висела.

[Mike_Bazhenov]

Блин забыл code
Точнее так
<p>когда-то такая задача висела. <p>когда-то такая задача висела. <p>когда-то такая задача висела. <p>когда-то такая задача висела.</p></p></p></p>

[egorinsk]

P вообще-то нельзя вкладывать друг в друга.

[egorinsk]

И некоторые браузеры атвоматически добавят зарывающий тег P перед открывающими и все съедет. Это грубейшая ошибка и незнание даже основ HTML

[Mike_Bazhenov]

Логично, подумал об этом уже после того как написал…

Answer 5

[Keyten]

text-indent, padding, etc.