Исправление проблем Unicode в Windows 7

Question

У меня есть библиотека, которая отображает искусство ANSI ansidec . И у меня проблемы с рендерингом в Windows 7 (все браузеры из-за ошибок Unicode).

Вот демоверсия:

https://codepen.io/jcubic/pen/ZVdJOd

У меня есть такой код, чтобы исправить проблему, когда некоторые символы шире m и выше, чем высота строки:

var output = document.getElementById('output');
var format_ansi = ansi.format(function(styles, color, background, text) {
    var style = [];
    if (color) {
        style.push('color:' + color);
    }
    if (background) {
        style.push('background:' + background);
    }
    if (styles.bold) {
        style.push('font-weight:bold');
    }
    if (styles.italic) {
        style.push('font-style:italic');
    }
    if (styles.underline) {
        styles.push('text-decoration:underline');
    }
    text = Array.from(text).map(function(chr) {
        return '<span class="chr">' + chr + '</span>';
    }).join('');
    return '<span style="' + style.join(';') + '">' + text + '</span>';
});
function format(str) {
    output.innerHTML = format_ansi(str);
}
var url = 'https://cdn.jsdelivr.net/gh/jcubic/ansidec@master/example/unix.ans';
fetch(url).then((res) => res.text()).then(format);
document.querySelector('#file').addEventListener('change', function(event) {
    var reader = new FileReader();
    reader.onload = function(event) {
        format(event.target.result);
    };
    reader.readAsText(event.target.files[0]);
});

span {
    display: inline-block;
}
.chr {
    max-width: 1ch;
    overflow: hidden;
}
pre {
    line-height: 1em;
}

Я обертываю каждый символ в span и устанавливаю max-width (если курс не будет корректно работать в IE из-за ошибки в модуле ch).

проблема в черном пространстве в верхней части рисунка (черное пространство ниже второй строки сверху) и белой линии под носом, которого нет в Linux.

Это почти то же самое, что и в GNU / Linux, линия немного выше. Я только хочу знать, почему это черное пространство и эта белая линия и как их исправить (проверено на Chrome / Windows 7).

Я попытался установить overflow: hidden; для диапазона, чтобы это давало черные пробелы для каждой строки, и все еще происходит, если я удаляю line-height. Как сделать так, чтобы в Windows 7 все выглядело так же, как в Linux? Это возможно?

И если я установлю отображение: встроенные черные пробелы исчезают, но ширина больше не работает.

Answer 1

Мне кажется, я исправил проблему, заключив каждую строку в div:

function format(str) {
    output.innerHTML = format_ansi(str).split(/\n/).map(function(line) {
        return '<div>' + line + '</div>';
    }).join('')
}

и добавил этот CSS:

div {
    max-height: 1em;
}

https://codepen.io/jcubic/pen/ZVdJOd