I’m generating text based tables. In each cell I need a symbol. That symbol is associated with data listed after the table. Example
┌───┬───┬───┬───┬───┬───┬───┬───┐
│ a │ │ │ │ │ │ b │ │
├───┼───┼───┼───┼───┼───┼───┼───┤
│ │ │ c │ │ │ │ │ │
└───┴───┴───┴───┴───┴───┴───┴───┘
a: 0.123
b: 0.751
c: 0.914
The issue I’m running into is once in awhile I need lots of symbols. My current code is
const symbol = (idx: number) => String.fromCodePoint(idx < 30 ? 97 + idx : idx + 9600 - 30);
That works until it gets to symbols 9776. In that range, there are 8 symbols that don’t fit
┌───┬───┬───┬───┬───┬───┬───┬───┐
│ ☢ │ ☣ │ ☤ │ ☥ │ ☦ │ ☧ │ ☨ │ ☩ │
├───┼───┼───┼───┼───┼───┼───┼───┤
│ ☪ │ ☫ │ ☬ │ ☭ │ ☮ │ ☯ │ ☰ │ ☱ │
├───┼───┼───┼───┼───┼───┼───┼───┤
│ ☲ │ ☳ │ ☴ │ ☵ │ ☶ │ ☷ │ ☸ │ ☹ │
├───┼───┼───┼───┼───┼───┼───┼───┤
│ ☺ │ ☻ │ ☼ │ ☽ │ ☾ │ ☿ │ ♀ │ ♁ │
└───┴───┴───┴───┴───┴───┴───┴───┘
I’m using the default font used for <pre>
in Chrome on MacOS. I’m not sure about other browsers or other OSes.
Is there a list, ideally part of some web spec, of which code points work to maintain monospacing (or are supposed to work)?
PS: I suppose I could try to generate a list on demand using canvas 2d’s measureText
function or other web API that lets me get the size. That would possible work in more situations.