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:

enter image description here

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:

enter image description here

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
猫                猫                  猫  
日本語で          日本語で            日本語で
日本語で日本語で  日本語で日本語で    日本語で日本語で
share
    
I don't know whether this should properly be tagged [bug] or [feature-request]. –  snailboat Mar 13 '13 at 15:04
    
Why not tag it with both, the new feature being a bug-less JSE. I have found it annoying as well. –  Earthliŋ Mar 13 '13 at 19:05
    
Can you point me at a text version of that so that I can copy/paste/experiment? hard to work just from an image –  Marc Gravell Mar 14 '13 at 12:25
    
@MarcGravell My apologies! I was focused on showing how it rendered, so I forgot. I've edited it into the end of the question. –  snailboat Mar 14 '13 at 12:27
    
@snailplane thanks –  Marc Gravell Mar 14 '13 at 12:28
    
An interesting side-effect of this is that the pre area is quite noticeably different stylistically with the addition of the extra font... –  Marc Gravell Mar 14 '13 at 12:33
    
Just to be clear, the purpose of this question isn't to make you implement my specific solution. I'd be happy with any solution :-) –  snailboat Mar 14 '13 at 12:40
1  
The readability of the latin characters suffers when using MS Gothic. –  Troyen Mar 14 '13 at 20:48
    
What's the font in the input area? Consolas? Could we use that for PRE blocks, too? –  snailboat Mar 14 '13 at 21:45
    
@snailboat: At least on my computer (Windows 7 English), Consolas does not contain Japanese characters, and Japanese text and English text are not aligned by 2 to 1 in textareas on this site when I use Firefox (they do align with Chrome; Firefox and Chrome seem to choose different fonts as a fallback). Therefore specifying Consolas would not solve the problem. –  Tsuyoshi Ito Oct 18 '13 at 10:51
    
I don't know of a good solution to this problem, aside from using images (as table elements aren't currently supported by SE markdown). The problem is that, as far as I know, in most Japanese fonts halfwidth Latin characters have one width, and fullwidth Latin characters+Kanji+Kana have another, and the width of each differs between fonts. So if a "PRE table" with both halfwidth Latin+Japanese was aligned to MS Gothic when edited, it'd be out of alignment when viewed on e.g. an Android device with a different font. –  cypher Oct 19 '13 at 6:16
    
(cont'd) It might be possible to use fullwidth Latin+fullwidth spaces+Japanese together in alignment, but as soon as halfwidth Latin or halfwidth spaces are used it'd likely throw things out if the font it's displayed with is different to the one it's aligned to –  cypher Oct 19 '13 at 6:19

2 Answers 2

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
猫		猫		猫  
日本語で		日本語で		日本語で
日本語で日本語で	日本語で日本語で	日本語で日本語で
share
    
I tried this out in an edit, but it seems it didn't work very well. It rendered fine on one computer but not another. I suppose we'll have to wait for SE to fix the bug properly one way or another. –  snailboat Mar 23 at 0:15
    
I could've sworn a while ago when I wrote this answer that IPAGothic didn't have fixed (but rather variable width) halfwidth latin characters, but now that I check they are fixed. Maybe I was using an older/different version or something I don't know... anyway, I think Ilmari's solution might be a better overall solution, although there's a broader problem with fonts and I think explicitly making all Japanese use specific fonts might be better to solve the problems with Japanese being displayed as Chinese on Chrome etc. –  cypher Mar 23 at 21:54
    
I'm tempted to add the userscript I posted there to the Furigana engine, but you'd still need CSS for pre/code tags, as halfwidth latin wouldn't be affected. I'm not personally in favor of adding Japanese fonts to textarea tags, as I don't think they're as readable as other monospace fonts when writing/editing posts. I don't think Android usually has a Japanese font (only a "Fallback" font which has Japanese characters, halfwidth displayed as variable) so I can't think of a way to work around that aside from using a combination of tabs+specific fonts, but I don't know it'd be worth it. –  cypher Mar 23 at 21:59

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.

share

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .