Fixing Unicode issues on Windows 7

Question

I have library that renders ANSI art ansidec. And I have problem rendering on Windows 7 (all browser because of Unicode bugs).

Here is Demo:

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

I have code like this to fix issue that some characters are wider then m and taller then line-height:

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

<input id="file" type="file" />
<pre id="output" style="background: black"></pre>
<script src="https://unpkg.com/[email protected]/dist/ascidec.min.js"></script>

I'm wrapping every character in span and set max-width (it if course will not work correctly on IE because of ch unit bug).

the problem is black space in top of the graphic (black space below second line from top) and white line below nose that is not on Linux.

It's almost the same as on GNU/Linux, the line is little taller. I only want to know why that black space and that white line and how to fix them (Tested on Chrome/Windows 7).

I've tried to set overflow: hidden; on span that this give black spaces for each line, and is still happen if I remove line-height. How can make it looks the same on Windows 7 as on Linux? Is this possible?

And if I set display: inline the black spaces disappear but width don't longer works.

Answer 1

I think I've fixed the issue I've wrapped each line in div:

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

and added this css:

div {
    max-height: 1em;
}

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