Как растянуть текст на всю ширину viewBox'а или наоборот?

Question

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

На сайт inline'ом встраивается такого рода svg-код:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1036.28 170">
	<text
	dominant-baseline="text-before-edge"
	style="font-family:'Arial'; font-size:150px;"
	>Длинный текст</text>
</svg>

Размеры viewBox здесь равны размерам элемента text при данном шрифте и находящемся в нём тексте. Это позволяет мне растянуть svg, а соответственно и текст на всю ширину страницы и со своей задачей полностью справляется.
Проблема здесь в том, что для каждого нового текста ширину viewBox приходится рассчитывать индивидуально, что проблематично для редактора.

Вопрос: как автоматизировать рассчёт ширины viewBox'а для динамически меняющегося содержимого. Решение может быть на php, менее приемлемо, но возможно на js. Либо, может быть есть способы растянуть обычный текст на всю ширину при помощи html/css?

Что я придумал:

Брать длину строку и умножать её на максимальную ширину символа в данном шрифте с заданным кеглем (гениально, не правда ли?).
Однако такое решение не очень приемлемо, так как визуально хочется полного совпадения длины текста и ширины страницы, что при достаточном количестве маленьких букв не очень хорошо достигается. Плюс ко всему на сайте скоро добавят арабский язык, в котором символы мельче, да ещё и объединяются иногда друг с другом, так что я вообще не знаю, что делать буду 0.o

Comments

[Александр Лысенко]

Покажите лучше пример что есть сейчас.

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

AlexanderZe: пожалуйста
https://codepen.io/romash1408/pen/awNboa
чтобы увидеть, в чём заключается проблема, просто вставьте любой другой текст вместо "Длинный текст". Самое неприятное — когда новый текст оказывается длиннее исходного, лишняя часть обрезается...

[Александр Лысенко]

romash: Теперь понятно.. надо подумать ) Самое очевидное, помещать текст во вторичный скрытый элемент, получать значение width и подставлять в svg, но надо тестировать.

[Александр Лысенко]

romash: Так и есть, этого хватит. Извините, что jquery, но буквально на коленке делал

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

AlexanderZe: а вы знаете, взаимно :D

$(".svg-text-full-width").each(function(){
	var $text = $(this).children("text");
	if(!$text.length) return ;

	var viewBox = this.attributes["viewBox"], vals;
	if (
		!viewBox || 
		!(vals = /([0-9\.]*).([0-9\.]*).([0-9\.]*).([0-9\.]*)/.exec(viewBox.value)) ||
		vals.length < 5
	)
		return ;
		
	vals[3] *= ($text[0].getBoundingClientRect().width / this.getBoundingClientRect().width).toFixed(5);
	viewBox.value = vals.slice(1).join(" ");
});

Вчера, пока ждал ответов, написал этот... Но это костыль, хочется чего-то более простого..(

[Александр Лысенко]

romash: У вас есть блок. Определить его ширину можно только передав его и его содержимое в браузер. Соответственно оптимальный вариант такой:
1) Передаете блок, но не отображаете его, скрыв любым удобным способом;
2) Получаете необходимые значения и применяете их на блок;
3) Выводите копию или сам блок в удобном месте.

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