Необходимо в текстовый элемент вставлять новое значение. Значение может быть от 0.0
до 100.0
. т.е. максимальное количество символов в строке может быть 5
. Есть код, который добавляет нужное количество пробелов справа и слева, если длина текста меньше 5
.
Проблема в том, что если в строке имеются подстроки из пробелов (> 1
), то они заменяются на один пробел. Нашел решение: заменить пробелы на символ '\u00A0'
. Это работает для строк вида 1.0
и 22.4
, но если в строке будут все 5
знаков, т.е. это строка 100.0
, текст смещается.
Разное поведение можно увидеть, если изменять в моем коде значение переменной new_value
.
Как сделать, чтобы текст всегда имел один формат: Ia:
n-пробелов, если нужно
значение
m-пробелов, если нужно
A
.
new_value = '5.0'; // обязательно один символ после точки
let max_length = 5;
const len = new_value.length;
new_value = new_value.padStart(len + Math.floor((max_length - len) / 2), ' ');
new_value = new_value.padEnd(max_length, ' ');
new_value = `Ia: ${new_value} A`;
new_value = new_value.replace(' ', '\u00A0');
text = document.querySelector('text');
text.innerHTML = new_value;
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="100%" height="100%" viewBox="0 0 128 128">
<rect width="384" height="384" fill="#FFFFFF" stroke="none" id="background"/>
<g id="root" transform="translate(0,0)">
<g transform="translate(64,20)">
<rect x="-56.5" y="-8.5" width="113" height="17" fill="#FFFF00" stroke="#000000" stroke-width="1.0" opacity="1.0"/>
<text transform="translate(0,4.861111111111111)" fill="#000000" font-family="Consolas" font-size="14pt" text-anchor="middle">Ia: 0.0 А</text>
</g>
</g>
</svg>
str.center()
). Т.к. шрифт моноширинный, решил выравнивать пробелами.Ia: 5.0 A
иIa: 15.0 A
будут различаться по оформлению в том смысле, что расстояниеIa:
иA
от границы будет разное. Я решил это обойти так: к строкеIa: 5.0 A
добавить после 5.0 пробел, получитьIa: 5.0 A
, тогда для моноширинного текста общий размер текста сохраняется. В общем суть в том, что мне нужно всегда иметь фиксированное количество символов в строке.