R
R
Roman Dubinin2017-06-10 16:08:18
PHP
Roman Dubinin, 2017-06-10 16:08:18

How to stretch the text to the full width of the viewBox or vice versa?

This kind of svg code is embedded on the site inline:

<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>

The dimensions of the viewBox here are equal to the dimensions of the text element in the given font and the text in it. This allows me to stretch the svg, and, accordingly, the text to the entire width of the page and does its job completely.
The problem here is that for each new text, the width of the viewBox has to be calculated individually, which is problematic for the editor.
Question: how to automate viewBox width calculation for dynamically changing content. The solution may be in php, less acceptable, but perhaps in js. Or maybe there are ways to stretch plain text to full width using html/css?
What I came up with:
Брать длину строку и умножать её на максимальную ширину символа в данном шрифте с заданным кеглем (гениально, не правда ли?).
Однако такое решение не очень приемлемо, так как визуально хочется полного совпадения длины текста и ширины страницы, что при достаточном количестве маленьких букв не очень хорошо достигается. Плюс ко всему на сайте скоро добавят арабский язык, в котором символы мельче, да ещё и объединяются иногда друг с другом, так что я вообще не знаю, что делать буду 0.o

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question