修复 Windows 上的 Unicode 问题 7

Question

我有渲染 ANSI 艺术的库 ansidec。我在 Windows 7 上有渲染问题（所有浏览器都存在 Unicode 错误）。

这是演示：

我有这样的代码来解决一些字符比 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;
}

<input id="file" type="file" />
<pre id="output" style="background: black"></pre>
<script src="https://unpkg.com/ansidec@0.2.1/dist/ascidec.min.js"></script>

我将每个字符包装在 span 中并设置最大宽度（如果由于 ch 单元错误，它当然无法在 IE 上正常工作）。

问题是图形顶部的黑色 space（黑色 space 从顶部第二条线下方）和鼻子下方不在 Linux.[=21 上的白线=]

和GNU/Linux差不多，线高了一点。我只想知道为什么那条黑线 space 和那条白线以及如何修复它们（在 Chrome/Windows 7 上测试）。

我尝试在跨度上设置 overflow: hidden;，这会为每行提供黑色 spaces，如果我删除 line-height 仍然会发生这种情况。如何让它在 Windows 7 上看起来和在 Linux 上一样？这可能吗？

如果我设置显示：内联黑色 spaces 消失但宽度不再有效。

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

修复 Windows 上的 Unicode 问题 7

Fixing Unicode issues on Windows 7

css

windows

unicode

windows-7