# Japanese text in 'Related' box rendering strangely

While looking at a recent question, I noticed the 'Related' box on the right side looked rather odd:

The actual questions seem fine:

So I think it's just the 'Related' box at the right.

Any idea what's wrong? It seems to be related to the furigana script; the problem goes away if I disable JavaScript. It happens in both Firefox and Chrome.

• I was initially mystified why SE did this, but I think they might've done it to allow more content to be displayed on sites that use MathJax, e.g. math.stackexchange.com/questions/1564768/… (although even there it renders strangely for me on FF/Ubuntu) - I could hack around this in the Furigana engine, but I think it'd be cleaner if this was fixed in the CSS of this site itself. – cypher Apr 22 '16 at 21:42
• Related issue on Mathematics.se meta: meta.math.stackexchange.com/questions/23073/… – cypher Apr 22 '16 at 22:13

The CSS has been updated by SE, so the Furigana/Japanese font elements should be rendering properly now.

Further details are at Titles with MathJax break in the related questions.

It seems to be due to .spacer > a.question-hyperlink being styled with display: flex - if you replace that style with display: inline, the problem goes away.

The solutions appear to be:

1. Remove flex from that element, and change it back to inline (I think that's what those hyperlinks were previously set to?)

2. Disable Japanese font override span tags (i.e. the <span lang="ja"> tags inside the hyperlinks, which are added by the Furigana engine to make sure Japanese uses the right fonts).

3. Make the entire hyperlink render in a Japanese font, not just Japanese text, and don't add <span lang="ja"> tags.

Any of these three should solve this problem, but the second two would still have issues if titles with Furigana are in the hyperlinks, which would mean I would need to disable/put in brackets Furigana in hyperlinks if I did this.

As a result, the first option looks the most attractive to me.

• Some titles do seem to render properly, but only if all of their Japanese characters are connected to ASCII characters without spaces. – Sjiveru Apr 23 '16 at 23:47
• @Sjiveru I don't know the full mechanics of display: flex, I only heard of this property yesterday, but I don't think that's true from my testing. flex renders differently for me when there's no more room on a line (example screenshot: i.stack.imgur.com/dcTcc.png). It also looks like whitespace in-between element nodes/text nodes is ignored, similar to the way it often is for block-styled elements, which might be what you're seeing. – cypher Apr 24 '16 at 10:13