4

I tried using the box drawing characters from Wikipedia, but I couldn't find vertical lines which fit the rounded corner (as you can see below, they are either off, or not connected), and the horizontal lines are too thick. Are there characters which fit these corners?

╭━━━━╮
│test │  
╰━━━━╯
Attie
  • 19,974
unicodeq
  • 41

1 Answers1

6

Your box consists of left and right edges (1 character width)... but you have 4 characters along top and bottom between the edges, and 5 characters of content (test and a space). You need to ensure that the same number of characters are used for alignment - don't add spaces for alignment.

Additionally, you're using U+2501 for the top / bottom, when U+2500 "looks better" / doesn't look too thick.

╭────╮
│test│  
╰────╯
╭──────╮
│ test │  
╰──────╯

These boxes both render fine for me in Chrome, Firefox and Edge on Windows 10.

Drawing boxes with special characters isn't really recommended for exactly these reasons - if you're rendering to a terminal, then it may work better.

The above text renders as shown below (on Chrome on Windows). I'm using 100% zoom in Chrome, and 100% scaling in Windows.

example

From your screenshots, it looks like you're using some scaling, however I've tried using a non-100% setting in both Chrome and Windows, but it still seems to render well for me.

It is very possible that the font is causing the issue... above is rendered using Consolas, but below is rendered using Lucida Console:

example, Lucida Console

Attie
  • 19,974
  • Here's how your post looks to me in Chrome: https://i.imgur.com/OVLH3Qj.png – unicodeq Apr 23 '20 at 12:58
  • Interesting, which version / OS? I've also resolved the "thick top / bottom", does it look better now? – Attie Apr 23 '20 at 12:59
  • Windows. Now I see you edited something. Here's how now looks, still not good: https://i.imgur.com/WNuSux8.png Is it possible my font is the problem? Incorrect unicode implementation? – unicodeq Apr 23 '20 at 13:02
  • Is your Chrome zoom / display's scaling set to something other than 100%? – Attie Apr 23 '20 at 13:03
  • I don't know right now, but I'll check. BTW, I tried it on Firefox too, and it's not good there either, so it's possible it's some system wide setting on my system. – unicodeq Apr 23 '20 at 13:10
  • I use consolas as my monospace font, btw. – unicodeq Apr 23 '20 at 13:16