css - 与盲文字符不一致等宽

Question

我正在尝试使用 Braille Patterns Unicode Block 绘制立方体, 通过node-drawille图书馆。

但是，尽管文本位于 <pre> 中，但似乎盲文字符的宽度不一致(？)元素。

我已经包含了演示，它打印每行的长度(80 个字符)。当我突出显示整个 <pre> 时，我还附上了一张我所看到的图片。元素。 (OSX 10.12)

我已经用默认的 monospace 测试了两者以及我在终端中使用的字体( Menlo Regular )。结果相似，即使字符数相同，宽度也不一致。

期望的结果(准确粘贴到终端中):

(为了使用演示获得最佳效果，在整个页面中运行，并突出显示整个 pre 元素以查看可变宽度)。

var data = document.getElementById('cube').innerHTML;
data.split('\n').forEach(x => console.log(x.length))

<pre id="cube">
                                                                                
                                                                                
                                                                                
                                                                                
                                                                                
                                                                                
                                                                                
                                                                                
                                                                                
                                                                                
                                        ⢀⡀                                      
                                    ⢀⡠⠔⠊⠁⡏⠑⠤⡀                                   
                                ⢀⡠⠔⠊⠁    ⡇  ⠈⠑⠤⡀                                
                            ⢀⡠⠔⠊⠁        ⡇     ⠈⠑⠤⡀                             
                           ⢸⠑⠒⠤⠤⣀⡀       ⡇    ⢀⣀⡠⠤⠜⢳                            
                           ⢸     ⠈⠉⠒⠒⠤⢄⣀⡠⡧⠔⠒⠊⠉⠁    ⢸                            
                           ⢸           ⡇ ⡇         ⢸                            
                           ⢸           ⡇ ⡇         ⢸                            
                           ⢸           ⡇ ⡇         ⢸                            
                           ⢸           ⡇ ⡇         ⢸                            
                           ⡏           ⡇ ⡇          ⡇                           
                           ⡇           ⡇ ⡇          ⡇                           
                           ⡇           ⡇ ⡇          ⡇                           
                           ⡇           ⡇ ⡇          ⡇                           
                           ⡇       ⣀⡠⠤⠔⠓⠢⡧⠤⣀⣀⣀      ⡇                           
                           ⡇⣀⣀⠤⠔⠒⠋⠉      ⡇   ⠈⠉⠉⠑⠒⠒⣤⠇                           
                           ⠉⠒⠤⢄⡀         ⡇     ⢀⡠⠔⠉                             
                               ⠈⠉⠒⠦⢄⣀    ⡇  ⣀⠤⠚⠁                                
                                     ⠉⠒⠢⢄⡧⠔⠊                                    
                                                                                
                                                                                
                                                                                
                                                                                
                                                                                
                                                                                
                                                                                
                                                                                
                                                                                
                                                                                
                                                                                </pre>

Answer 1

您的可视化无法正确呈现的原因是您的空格和盲文字符的宽度不同。

与其使用字体使盲文字符的宽度与非盲文字符的宽度相同，不如使用与盲文字符宽度相同的不同“空格”字符。

在您的可视化中，使用空盲文字符 (⠀) 而不是空格字符，您的可视化应该按预期工作。

只是一个概念的快速证明(这是一个粗糙的笑脸):

⠀⠀⠀⣿⠀⣿⠀

⣿⠀⠀⠀⠀⠀⠀⠀⠀⣿

⣿⣿⣿⣿⣿⣿⣿⣿⣿

之所以可行，是因为所有盲文字符的宽度都相同。

https://www.fileformat.info/info/unicode/block/braille_patterns/utf8test.htm字符 0x00