вычислить число пробелов, чтобы приблизить строку текста

Question

Я делаю текст песни + аккорды, и я хочу взять этот сырой формат:

[Dm]Hello darkness my old [C]friend

И поставьте аккорды над лирикой. Я могу сделать это, сделав каждое слово делителем и сделав аккорд абсолютным / относительным к слову, однако это означает, что люди не могут копировать и вставлять все в WYSIWYG-редактор, такой как Word.

Так что вместо этого я хочу, чтобы строка над текстом была дополнена пробелами, например:

Dm                    C
Hello darkness my old friend

С моноширинным текстом все просто, но я хочу использовать такие шрифты, как Arial / Times. Есть ли способ подсчитать, сколько пробелов будет приблизительно соответствовать длине текста?

Примечание. Прежде чем все скажут: «О, вы должны использовать другой метод для отображения аккордов», я попробовал несколько методов, но я специально ищу что-то, что я могу скопировать и вставить без потери размещения аккордов. .

Answer 1

Интерфейс CanvasRenderingContext2D имеет метод текстовой метрики measureText, который можно использовать для получения ширины текста.

Требуется два параметра: текст для измерения и значение CSS font .

Элемент canvas, используемый в процессе, не обязательно должен быть частью документа и не иметь свойств ширины или высоты только для использования measureText.

Пример концепции:

"use strict";

const ctx = document.createElement("CANVAS").getContext("2d");

function getTextWidth(text, cssFont) {
    ctx.font = cssFont;
    var o = ctx.measureText(text);
    return o.width;
}

var cssFont = "14px Arial";
var spaceWidth = getTextWidth( "          ", cssFont) / 10;
var lyric = "Hello darkness my old "
var lyricWidth = getTextWidth("Hello darkness my old ", cssFont);

console.log('"' + lyric + '"' + " width is " + lyricWidth);
console.log("space width is " + spaceWidth);
console.log("So the lyric width is " + lyricWidth/spaceWidth + " spaces");