How To Use Box Drawing Fonts Example

Unicode has a ready of characters for drawing simple graphics. Hither is an example from Wikipedia:

          ┌─┬┐  ╔═╦╗  ╓─╥╖  ╒═╤╕ │ ││  ║ ║║  ║ ║║  │ ││ ├─┼┤  ╠═╬╣  ╟─╫╢  ╞═╪╡ └─┴┘  ╚═╩╝  ╙─╨╜  ╘═╧╛                  

There there is U+2588, FULL Cake:

          █████ █████ █████                  

Whether or not the above rendered properly depends on which font your browser used to return it. With some fonts these graphics return correctly, and with others you will run across gaps between the rows or columns or both. With other fonts the rows might not line up correctly, particularly with very long rows.

When creating a truetype font, what exercise I need to practise to make certain characters like this piece of work correctly?

---

I encountered this problem while trying to make a truetype font containing Mode seven block glyphs. I converted a PCF bitmap font to truetype using fontforge and a script. You lot can see an example here. (You can as well download the font, considering it's a webfont.)

On Firefox/Linux this page renders correctly until you zoom in/out (ctrl-shift-+). On Chrome information technology looks atrocious at whatsoever zoom. In both cases, thin lines are visible both horizontally and vertically.

Here is a screenshot of what I come across:

I have also used this font in various Linux last emulators when developing the software which creates the web pages, and there the same thing always happens.

For reference here is what my mail service looks like in Firefox:

But in the edit box it looks much amend (at whatsoever zoom):

Chrome manages to get the box glyphs right, but only in the edit box, and the full block is wrong:

I understand that this is almost likely due to a combination of hinting, character substitution, and the different font renderers, but is there anything I can do about it when creating the font?

Source: https://graphicdesign.stackexchange.com/questions/66605/how-do-i-make-sure-the-unicode-box-drawing-characters-work-properly-in-my-font

Posted by: haynesariervintend.blogspot.com

Share this post