Question

I am attempting to draw a cube using the Braille Patterns Unicode Block, via the node-drawille library.

However, it appears that the width of the braille characters is not consistent(?), even though the text is in a <pre> element.

I have included the demo, which prints the length of each line (80 characters). I have also included a picture of what I see when I highlight the entire <pre> element. (OSX 10.12)

I have tested both with the default monospace and the font I use in my terminal (Menlo Regular). The results are similar, the width is inconsistent even though the character count is the same.

Desired result (pasted exactly into terminal):

(For best results w/ demo, run in a full page, and highlight the entire pre element to see the variable widths).

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

Answer 2

答案似乎与How to display special unicode characters using monospace font in HTML with preserved character width

相同

字体不包含此Unicode字符块，因此使用更默认的系统字体（不是unicode）进行渲染。选择包含这些字符的字体（例如http://unifoundry.com/unifont.html或https://github.com/josuah/miniwi）会解决问题！

<pre> not consistently monospace with braille characters

2 个答案: