Providing a fixed width for Unicode number shapes, indexes, drawer drawers, and geometric shapes

Question

I went around using Unicode to draw quantum circuits, for example:

──H─────●────────────●─ │ │ ──H─●────────────X⅛───────────┼─●─ │ │ │ │ ──XXX────── │ ││ ────X────────────X₁/₁₆────────┼●─ │ │ ──H─────●────────────●─ 

As you can see, I use unicode box drawing , subscript , geometric shape , and shape number . Also good ascii characters, but they behave pretty well.

The problem is that when I insert this into, say, textarea with font-family: monospace , it may or may not contain elements lined up in a line. With Chrome on my Ubuntu machine, this works, but with Chrome on my Windows machine, the indices are slightly smaller. This discards the alignment, breaking the pattern so that things no longer connect visually. Screenshot:

How can I ensure that these small charts are displayed on major browsers and platforms?

The <pre> and <code> tags seem to work fine, but I want to edit these diagrams in place. Can I use this style inside text areas?

I just need to say font-family: no-like-REALLY-monospace-please-browser-spend-cpu-fixing-any-oversights ?

How about using a custom font like GNU Unifont ? How can I do it? How expensive is it, considering how large such full fonts are?

Note. There are a few more questions about unicode and monospacing, like this one . Basically, the answers "unicode are really big, so not all characters will work!" and "here is a massive font that can cover it!". I do not think that they do not solve my problem, because I do not want clients to download megabyte dimensional fonts, and I need only a small part of Unicode characters to work.

Answer 1

If GNU Unifont behaves the way you want, and if you know for sure (or pretty close to a certain) the complete character set that you will need for your schematic drawings, you can minimize the "expense" (data size -wise) with using FontSquirrel or another similar service or, possibly, a font application such as FontForge , so that GNU Unifont is a subset of the required character set and use it as a webfont (CSS @ font-face rule) .

I think that you will definitely want to do this, since the full Unifont is 12 MB, and from your description you almost certainly do not need everything that is included in this font (and in fact it is only a small part).