Monospace formatting issues on web browsers

[gamesguru]

Am trying to render the raw output within

 tags.


Have had this issue on Android and macOS firefox/chrome already.  My Linux computer with Chrome seems okay.
Is there anything we can do about this? Thanks.
            

[kroitor]

@gamesguru can you plz post the code to reproduce it?

[gamesguru]

I will try to later, but it is a browser or OS font issue not a specific glitch in the library as any graph will produce the issue on certain devices but never on others.

Chrome on linux is working Terminal and cmd are working macOS and android are not!!

[kroitor]

@gamesguru i'm on MacOS myself, can you plz post a complete but short snippet of code to reproduce it on my side?

[gamesguru]

I will at lunch.

are you displaying this in the terminal or safari/chrome? because the issue does not exist in terminal or iTerm, but try saving to .html and opening in chrome

[gamesguru]

@kroitor The issue is only occurring on certain web browsers and operating systems.

Here is some such offending data. As you will see, it renders fine on the terminal. But when you pipe it to a *.html file and attempt to open it in Safari or Chrome, your troubles begin. I am wondering if there is a quick fix for this issue?

const asciichart = require('asciichart')
const fs = require('fs')

const graph = asciichart.plot([1216, 1231, 1212, 1205, 1199, 1183, 1168, 1157, 1147, 1138, 1161, 1151, 1141, 1127, 1115, 1136, 1155, 1173, 1189, 1205, 1219, 1232, 1222, 1209, 1198, 1187, 1177, 1168, 1185, 1201, 1216, 1229, 1209, 1223, 1236, 1256, 1276, 1288, 1299, 1277, 1289, 1268, 1281, 1261, 1247, 1235, 1224, 1241, 1256, 1276, 1287, 1297, 1307, 1292, 1278, 1289, 1298, 1282, 1268, 1287, 1296, 1305, 1291, 1308, 1324], { height: 10 })

console.log(graph)
fs.writeFileSync('test.html', '<pre>' + graph + '</pre>')

The output (which looks fine on the terminal, despite how it may now appear on your web browser)

    1324.00 ┤                                                   ╭╮         ╭─ 
    1303.10 ┤                                    ╭─╮╭╮        ╭─╯╰╮╭─╮ ╭───╯  
    1282.20 ┤                                   ╭╯ ╰╯╰─╮     ╭╯   ╰╯ ╰─╯      
    1261.30 ┤                                  ╭╯      ╰─╮  ╭╯                
    1240.40 ┤╭╮                  ╭╮        ╭╮╭─╯         ╰──╯                 
    1219.50 ┼╯╰─╮              ╭─╯╰─╮     ╭╯╰╯                                
    1198.60 ┤   ╰─╮           ╭╯    ╰─╮ ╭─╯                                   
    1177.70 ┤     ╰╮  ╭╮     ╭╯       ╰─╯                                     
    1156.80 ┤      ╰─╮│╰─╮  ╭╯                                                
    1135.90 ┤        ╰╯  ╰╮╭╯                                                 
    1115.00 ┤             ╰╯                                                  

test.html.txt

[kroitor]

I am wondering if there is a quick fix for this issue?

Yep, just, instead of using the default font, use an adequate font to render it:

const asciichart = require('asciichart')
const fs = require('fs')

const graph = asciichart.plot([1216, 1231, 1212, 1205, 1199, 1183, 1168, 1157, 1147, 1138, 1161, 1151, 1141, 1127, 1115, 1136, 1155, 1173, 1189, 1205, 1219, 1232, 1222, 1209, 1198, 1187, 1177, 1168, 1185, 1201, 1216, 1229, 1209, 1223, 1236, 1256, 1276, 1288, 1299, 1277, 1289, 1268, 1281, 1261, 1247, 1235, 1224, 1241, 1256, 1276, 1287, 1297, 1307, 1292, 1278, 1289, 1298, 1282, 1268, 1287, 1296, 1305, 1291, 1308, 1324], { height: 10 })

console.log(graph)

// MacOS "fix" ;)

fs.writeFileSync('test.html', '<pre style="font-family: Menlo, \'Courier New\', Courier, monospace">' + graph + '</pre>')

Also, if your output looks fine the terminal, but not in the browser, then compare the font that is used to render the text from your terminal settings to the default font used with your browser for pre-formatted text.

You can also use different fonts on different browsers and systems, depending on what is available, but this subject is far beyond the scope of this project – you can easily find more about that on the internet.

The above is not really an issue with this asciichart package, it's more like a routine CSS styling thing, so, if you want to know more about that, search for tutorials on google on "CSS fonts" (you can also try google webfonts).

Hope that answers your question, let me know if not.

UPD. Edited the above answer for some minor errors.

[gamesguru]

I have played around with all the so-called "monospace" fonts available through the css styling options, but nothing is working with the offended web browsers.

If there is not a lower level fix todo with the characters used (like replacing them with a more standardized monospace character *_-|/+), then I'm afraid there isn't a fix..

[kroitor]

@gamesguru have you tried the snippet posted above with Menlo on MacOS?

but nothing is working with the offended web browsers.

We have to be very specific, which particular browser and version, which particular OS and version, etc.. Can you provide more specific details?

If there is not a lower level fix todo with the characters used (like replacing them with a more standardized monospace character *_-|/+), then I'm afraid there isn't a fix..

We can add an option to change the drawing characters, but tbh I would rather do it it with CSS font styling myself, because with ascii chars |-+ it looks more texty...

[gamesguru]

Haha, thought Menlo was a browser at first. It does fix things in TextEdit, and if I use Safari in "reader view". Tried the fixes here as well, no luck on plain html. But the GitHub code block I posted of the graph above is working now.

I tried your fixed script. This is the result. I am using Safari 13.0.2 and macOS High Sierra 10.13.6

    1324.00 ┤                                                   ╭╮         ╭─ 
    1303.10 ┤                                    ╭─╮╭╮        ╭─╯╰╮╭─╮ ╭───╯  
    1282.20 ┤                                   ╭╯ ╰╯╰─╮     ╭╯   ╰╯ ╰─╯      
    1261.30 ┤                                  ╭╯      ╰─╮  ╭╯                
    1240.40 ┤╭╮                  ╭╮        ╭╮╭─╯         ╰──╯                 
    1219.50 ┼╯╰─╮              ╭─╯╰─╮     ╭╯╰╯                                
    1198.60 ┤   ╰─╮           ╭╯    ╰─╮ ╭─╯                                   
    1177.70 ┤     ╰╮  ╭╮     ╭╯       ╰─╯                                     
    1156.80 ┤      ╰─╮│╰─╮  ╭╯                                                
    1135.90 ┤        ╰╯  ╰╮╭╯                                                 
    1115.00 ┤             ╰╯                                                  

[kroitor]

I'm on MacOS Mojave 10.14.5.

Safari Version 12.1.1 (14607.2.6.1.1):

Chrome Version 77.0.3865.90 (Official Build) (64-bit):

Tried the fixes here as well, no luck on plain html. But the GitHub code block I posted of the graph above is working now.

Do you have any font on your system that renders utf-8 box drawing characters nicely (at least one)? If not, you can try google webfonts. Yet Menlo should work for you with MacOS, if it renders ok in the term. Also, Safari may fail to render utf-8, if your default codepage is anything else but UTF-8. What's your setting for the default encoding in Safari preferences (advanced tab)?

[gamesguru]

Good call. It was set to Latin 1.

[gamesguru]

Chrome 77.0. on Android 6.0.1 is still having the issue

[kroitor]

@gamesguru just find a font family or font name that works on most of Androids and put it before Menlo there in the code.

P.S. You can also specify the encoding of the document in the HTML itself, using metatags, so that it will work even with default Latin 1, if your document is explicitly designated as utf-8.

[gamesguru]

What's a good example of a monospace font in Android?

And do you have any info on specifying that kind of meta info? Thanks

[kroitor]

What's a good example of a monospace font in Android?

Check out google fonts:

• https://github.com/googlefonts/noto-fonts/issues/617
• https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts

And do you have any info on specifying that kind of meta info?

You can do that by adding a proper and complete HTML markup with a meta charset tag set to UTF-8 in the head section: https://www.w3schools.com/tags/att_meta_charset.asp