Preformatted text in Japanese doesn't line up properly

Question

Stack Exchange doesn't support the table tag, so if we want to present tabular data, we're supposed to do it using pre-formatted text. Unfortunately, it doesn't seem to work too well with Japanese; most Japanese characters are supposed to be twice the width of Latin characters, but on this site, they're slightly thinner than that. As a result, the columns fall out of alignment and tables become unreadable.

Here's what it looks like in Chrome when I enter in some text, using all single-width spaces:

The columns gradually veer to the left, making tabulated data hard to read.

I think this problem occurs because PRE and CODE blocks are styled with a font that doesn't include Japanese characters, so browsers have to borrow glyphs from Japanese fonts to render the missing code points. If I append the following to the site CSS as a workaround:

pre{font-family:"MS Gothic",IPAGothic}

...the problem vanishes for me and I'm able to present tabular data in a readable format. Notice how in the following image, the Latin characters are obviously different, but the Japanese still looks the same. This is because the system was already borrowing the glyphs from the font I selected (MS Gothic).

This is what it looks like with modified CSS:

I'm not a web designer, and I can't say for sure which fonts should go on the list. (Please see the comments for some discussion of potential fonts.) But hopefully this question is enough to demonstrate why the problem occurs, and hopefully a web designer can figure out how to solve it without causing readability to suffer.

For reference, here is the text I entered for my examples:

This is a table, made by hand using pre-formatted text.
-----------------------------------------------------------
col1              col2                col3
blahblah          blahblah            blahblah
morestuff         morestuff           morestuff
猫                猫                  猫  
日本語で          日本語で            日本語で
日本語で日本語で  日本語で日本語で    日本語で日本語で

Answer 1

Actually, thinking about it some more, inserting tab characters by using 	 in the pre tag to separate items might work a reasonable amount of the time (though I wouldn't guarantee all the time). The markup is a bit messy, but here's a test:

This is a table, made by hand using pre-formatted text and tab characters (	).
-----------------------------------------------------------
col1		col2		col3
blahblah	blahblah	blahblah
morestuff	morestuff	morestuff
猫		猫		猫  
日本語で		日本語で		日本語で
日本語で日本語で	日本語で日本語で	日本語で日本語で

Answer 2

This looks like something I could add as a client-side workaround to SOUP, if I only had a good list of fonts to use.

Based on a some quick Googling and testing on my Linux box, here's a tentative CSS rule to try:

pre, code, textarea {
    font-family: "Kochi Gothic", "Sazanami Gothic", "VL Gothic", "Ume Gothic", "MS Gothic",
        IPAGothic, "WenQuanYi Zen Hei Mono", "Osaka Mono", "M+ 1m", monospace;
}

The order of the fonts is pretty arbitrary, loosely based on how readable each font looked in my browser. I wasn't able to test Osaka Mono (it's a Mac font), which is why it's so far down the list.

Anyway, all of these fonts should have monospace half-width Latin characters, fixing the line-up issue described above (although, in my testing, the M+ fonts didn't seem to line up quite perfectly, which is why I've listed them even behind the untested Osaka Mono).

Edit: I've included the CSS rule above into SOUP v1.12. It seems to work as intended, but I doubt the font list is really optimal. (Since I don't actually speak or write Japanese myself, it's hard for me to properly judge the quality of Japanese fonts.) Please let me know if you have any improvements to suggest.