Как сверстать текст по дуге?

Question

[Дмитрий Pacification]

Приблизительно вот так prntscr.com/gg4e8y.
Я хочу чтобы оно было более плавнее, чем на картинке.
Вставить картинкой - это самый детский способ, по этому я такое не рассматриваю. Только хардкор! \m/_

Answer 1

[display: block]

https://css-tricks.com/set-text-on-a-circle/
circletype.labwire.ca

Answer 2

[Сергей Соколов]

Принципиальная особенность (достоинство) этого способа – в том, что геометрия самих букв тоже изменяется. Напр. в букве "H" параллельные вертикальные становятся непараллельными, получив перспективное искажение. Т.е. это 100% честное искажение всей картинки, а не разброс букв по отдельности.

Способ: отрисовать этот текст в SVG, из него сделать canvas в разрешении с запасом – в несколько раз больше нужного. В canvas применить нужные искажения (легкая фраза, за которой куча сложностей, в т.ч. математика и антиалиасинг).

Вставить как data-uri и просто новые canvas.

Сделал пример, в котором из такого:

<svg xmlns="http://www.w3.org/2000/svg"
     width="920" height="160" viewBox="0 0 230 40">
  <text text-anchor="middle" x="115" y="32" font-family="Times New Roman" font-size="35">
    Hello, Toster
  </text>
</svg>

получается такая картинка:

P.S. там всё сыро, надо ещё по краям области билиниар интерполяцию прозрачности, что ли, сделать..

Comments

[tema_sun]

а чем просто svg плох?

[Сергей Соколов]

tema_sun, я подумал про искажения, которые затронут и геометрию букв.

Answer 3

[kulaeff]

Поместить каждую букву в отдельный блок и повернуть все буквы с помощью transform: rotate и transform-origin.

Comments

[Дмитрий Pacification]

Думал над таким вариантом, то это пока больше похоже на костыль, чем на решение. Чую что в 2017 году есть какое-то решение более изящней, но осталось его найти))
В любом случае спасибо за ответ

[Kovalsky]

Дмитрий Pacification, не, к сожалению есть всего два варианта - SVG и transform. Собственно, Соколов объясняет как бороться с SVG, а топовый ответ предлагает именно варианты с transform.

Answer 4

[foxayb]

Как вариант примера на codepen.io