При попытке масштабирования текста, во время ресайза родителя, текст прыгает?

Question

[thehighhomie]

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

Сам текст я пытаюсь масштабировать таким образом:

w = startW + moveX;
  h = w / aspectRatio;

  let scale = w / startW;

  // Text resize
  fontSize = startFontSize * scale;
  lineHeight = startLineHeigth * scale;

Вот фидл https://jsfiddle.net/k12Lyofu/9/ кода немного. На 49 строке идет код самого масштабирования текста в 2 строки.

Answer 1

[Роман Дубинин]

Когда вам нужно, чтобы какая-либо графика в вебе качественно и плавно масштабировалась, её нужно делать векторной, то есть в SVG
https://jsfiddle.net/k12Lyofu/35/
Правда в ней нет автопереносов текста, поэтому я добавил элемент svg, указал ему width: 100% в CSS, во viewBox прописал исходные ширину и высоту блока, а внутрь завернул foreignObject, который позволяет в svg вставлять html, указав ему размеры на весь viewBox, и в него вставил ваш div с текстом, благодаря чему появились переносы. Ну и ещё в JS закомментил ваши строки для font-size

И тут я увидел, что текст всё равно прыгает :D
И, честно говоря, мне стало страшно, потому что я, кажется, чего-то не понимаю... Ответ оставлю на всякий случай, но он выходит и не ответ вовсе :(
З.Ы. Стандартными элементами text я тоже пробовал, без встраивания html для переносов — один фиг (https://jsfiddle.net/k12Lyofu/34/)

Comments

[thehighhomie]

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

еще как я понял, самый плавный скейл текста можно сделать на канавасе) там плавнее всего) проверял)