Создать HTML-страницу, содержащую текст и таблицу стилей, обеспечивающую его в виде, приведенном ниже

Создать HTML-страницу, содержащую текст и таблицу стилей, обеспечивающую его представление в виде, приведенном на рисунке.
Подскажите пожалуйста, как создать такую картинку при помощи стилей, вообще нет предствления об реализации данной картинки.

Миниатюры

 

0

Если никаких изменений подобной картинки не нужно (вроде изменения текста), то каждую букву засовываешь в отдельный блок (div, p, span - какой нравится), и затем расставляешь с помощью

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

Наверное, можно что-то такое сделать с помощью canvas. Хотя точно не скажу.


P.S. В принципе, можно сделать такое на JavaScript, если текст считать массивом, и в зависимости от ширины и высоты блока, а также кол-ва букв в массиве, расставлять буквы через абсолютное позиционирование, высчитывая для каждой top и left. Скажем, если 10 букв, дугой к верху, то для первой координаты будут что-то вроде

$top = $width/$countLetters - 3px;
$left = $height/($countLetters / 2) - 5px;

Для второй

$top = $width / ($countLetters - 1) - 3px;
$left = $height / (($countLetters - 1) / 2) - 5px;

. Но честно, лучше заняться чем-то более полезным.

P.P.S. Блин, я уже сам боюсь той штуки, что выше написал. Но что-то подобное сделать можно.

0

нет, надо чисто с помощью стилей его выполнить.

0

Что именно тебе нужно? Вставить это изображение как картинку? Тогда background: url(путь_к_изображению) no-repeat и т.д.

0