Как сделать элемент фиксированным количеством символов, используя моноширинный шрифт? ⇐ Jquery

[Anonymous]

Я пытаюсь добавить CSS-переменную --cols в терминал jQuery, проблема, с которой я столкнулся раньше, заключалась в том, что я не мог получить размер полосы прокрутки, но получил его в JavaScript.
Проблема, с которой я столкнулся, заключается в том, что когда я устанавливаю --cols: 80, размер составляет 79 символов. Вопрос: почему это происходит?

Код: Выделить всё

const term = $('#term').terminal();

const wrapper = term.find('.terminal-wrapper');
const padding = term[0].style.getPropertyValue('--padding') || 10;
const wrapper_rect = wrapper[0].getBoundingClientRect();
const container_rect = term[0].getBoundingClientRect();
const content_width = wrapper_rect.width + (padding * 2);
const scrollbar = container_rect.width - content_width;
term[0].style.setProperty('--terminal-scrollbar', scrollbar);

term.echo(() => {
const cols = term.cols();
const rows = term.rows();
return `${cols}x${rows}`;
})

Код: Выделить всё

#term {
--cols: 80;
--rows: 10;
width: calc((var(--cols) * 1ch) + (var(--padding, 10) * 2px) + (var(--terminal-scrollbar, 10) * 1px));
}

Код: Выделить всё

Код: Выделить всё

.terminal-wrapper

— это элемент, расположенный внутри полосы прокрутки, поэтому это просто содержимое, содержащее текст. Я протестировал cols(), и он возвращает правильное значение.
Я могу исправить свою проблему, добавив:

Код: Выделить всё

((var(--cols) + 1) * 1ch)

Но я хочу знать, почему происходит это отключение на одну ошибку. Я пытаюсь понять, а не добавлять исправления вслепую.
Я пытался установить:

Код: Выделить всё

.terminal-wrapper {
width: 80ch;
}

Просто чтобы посмотреть, получу ли я 80 символов, но я все равно получаю 79 символов.
Я рассчитываю количество символов с помощью этого функция:

Код: Выделить всё

    function get_char_size(term) {
var result;
if (terminal_ready(term)) {
var $prompt = term.find('.cmd-prompt').clone().css({
visiblity: 'hidden',
position: 'absolute'
});
$prompt.appendTo(term.find('.cmd'))
.html(' ')
.wrap('');
result = {
width: $prompt.width(),
height: $prompt.height()
};
$prompt.parent().remove();
} else {
var temp = $(' ')
.appendTo('body');
temp.addClass(term.attr('class')).attr('id', term.attr('id'));
if (term) {
var style = term.attr('style');
if (style) {
style = style.split(/\s*;\s*/).filter(function(s) {
return !s.match(/display\s*:\s*none/i);
}).join(';');
temp.attr('style', style);
}
}
var node = temp.find('.terminal-line');
result = {
width: node.width(),
height: node.height()
};
temp.remove();
}
return result;
}
function get_num_chars(terminal, char_size) {
var width = terminal.find('.terminal-fill').width();
var result = Math.floor(width / char_size.width);
// random number to not get NaN in node.js but big enough to
// not wrap exception
return result || 1000;
}

Доказано, что он работает правильно.
РЕДАКТИРОВАТЬ:
Я подумал, что это может быть ошибка браузера, связанная с полосой прокрутки, но мне не удалось воспроизвести проблему, вот код, который работает: https://codepen.io/jcubic/pen/ExqJwMN. Думаю, я сделал то же самое.
Я проверял, правильно ли установлен размер шрифта для корневого элемента и имеет ли он тот же шрифт и размер, что и содержимое терминала.< /p>
Я тестировал это в браузере Brave на базе Chromium, в Firefox значение равно 81. не знаю, почему, поскольку в зависимости от того, могу ли я его использовать, он поддерживает полосу прокрутки. При добавлении полосы прокрутки значение будет таким же правильным, как и в Epiphany (бедняга Safari, который не поддерживает полосу прокрутки).

Подробнее здесь: https://stackoverflow.com/questions/791 ... space-font