not consistently monospace with braille characters

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

The reason why your visualizations aren't rendering properly is that your spaces and braille characters aren't the same width.

Instead of using a font to make your braille characters uniform width as your non-braille characters, you should use a different 'space' character that's the same width as your braille characters.

In your visualizations, use the empty braille character (⠀) instead of the space character and your visualization should work as expected.

Just a quick proof of concept (it's a crude smiley face):

⠀⠀⠀⣿⠀⣿⠀

⣿⠀⠀⠀⠀⠀⠀⠀⣿

⣿⣿⣿⣿⣿⣿⣿⣿⣿

This works because all braille characters are the same width.

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

Answer 2

It seems the answer is the same as How to display special unicode characters using monospace font in HTML with preserved character width

The font does not contain this block of Unicode characters, so it is rendered with a more default system font, which is not unicode. Picking a font that contains these characters, like http://unifoundry.com/unifont.html or https://github.com/josuah/miniwi fixes the issue!