Ensuring fixed-width of unicode number forms, subscripts, box drawing, and geometric shape characters

Question

I've been toying around with using unicode to draw quantum circuits, like this:

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

As you can see, I'm taking advantage of unicode box drawing, subscript, geometric shape, and number form characters. Also good-ole ascii characters, but they're pretty well behaved.

The problem is that when I paste the above into, say, a textarea with font-family: monospace, it may or may not still have the elements lined up. With Chrome on my Ubuntu machine it works, but with Chrome on my Windows machine the subscripts end up slightly smaller. That throws off the alignment, breaking the circuit so things don't connect visually anymore. Screenshot:

How can I ensure these little diagrams line up on major browsers and platforms?

The <pre> and <code> tags seem to work alright, but I want to edit these diagrams inplace. Can I use that styling inside textareas?

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

What about using a custom font, like GNU Unifont? How would I do that? How expensive would it be, given how large such complete fonts can be?

Note: there are several other questions about unicode and monospacing, like this one. Mostly the answers are "unicode is really big so not all characters will work!" and "here's a massive font that might cover it!". I don't think those don't solve my problem, because I don't want clients downloading megabyte-sized fonts and I only need a small portion of unicode characters to work.

Answer 1

If the GNU Unifont behaves in the manner you desire, and if you know for certain (or pretty close to certain) the complete set of characters you will need for your circuit drawings, you could minimize the "expense" (data size-wise) by using FontSquirrel or other similar service, or possibly a font development app like FontForge to subset the GNU Unifont to the set of characters needed and use it as a webfont (CSS @font-face rule).

I think you'd definitely want to do that, as the full Unifont is 12 Mbytes and from your description you almost certainly don't need everything included in that font (and in fact, only a small fraction of it).