"Preformatted text" and Japanese

Question

This has come up before (Preformatted text in Japanese doesn't line up properly), but at the moment, the preformatted text again doesn't line up properly for me.

What's worse is that even usual Latin text doesn't line up as soon as a single Japanese character is added. For example,

a        b        c
123      456      789

---

a        b        c
123      456      78九

renders for me as

on Linux and Android.

I don't know if we can fix this completely, but it would help immensely if adding Japanese in the last column doesn't break the alignment of the other columns.

Answer 1

The root cause: Poor CSS fonts for Japanese text.

What has been described in the question is specific to this site. Japanese.SE uses different font choice for Latin and non-Latin (Japanese) text, which is applied via different class attributes (noFurigana, ja-text) specified by the stylesheet.

That is due to CSS fonts and not Linux specific.

Troubleshooting

The fonts used for the preformatted text can be checked using Developer Tools provided by a web browser. For troubleshooting, follow these steps:

• While viewing this page in Firefox web browser, press Ctrl+Shift+I or just F12 to toggle the developer tool.
• In the leftmost upper corner of the Developer Tools, there is an icon with square and cursor (hovering with a cursor will show "Pick an element from the page").
• Click the icon once, then hover and click on the entire blockquote of preformatted text in the meta question at above.
• As a result, the leftmost column will jump to the corresponding line within the HTML code of web page.

HTML code of plain Latin text (upper half):

<pre class="noFurigana"><code class="noFurigana">a        b        c
123      456      789
</code></pre>

HTML code of mixed Latin text (lower half):

<pre class="ja-text" lang="ja"><code class="ja-text" lang="ja">a        b        c
123      456      78<span xml:lang="ja" class="ja-text" lang="ja">九</span>
</code></pre>

When each block of HTML code is selected in the left column, content in the middle column will also change. Look for the content of font-family for respective text.

CSS fonts corresponding to plain Latin text (upper half):

font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,sans-serif;

CSS fonts corresponding to mixed Latin text (lower half):

font-family: "IPAGothic","IPAゴシック","TakaoGothic","VL Gothic","VLゴシック","UmePlus Gothic","Ume Gothic","梅ゴシック","MotoyaLCedar","MigMix 2M","Migu 2M","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","HiraKakuProN-W3","ヒラギノ角ゴ ProN W3","Osaka Mono","Osaka","MS Gothic","ＭＳ ゴシック","Meiryo","メイリオ",monospace !important;

To determine whether CSS fonts used for mixed Latin text (lower half) is the problem or not, we just need to do one more step using the Developer Tools.

The workaround

After selecting the HTML code for mixed Latin text (class="ja-text") in the left column, bring the cursor to font-family section in the middle column. When hovered, a checkbox will appear on the left of section. The one more step is to empty the checkbox for font-family.

The following screenshot combo is showing before (left) and after CSS fonts is disabled in Developer Tool of Firefox.

With the workaround, the mixed Latin text will now appear aligned like the Latin text counterpart. This meta answer has clarified the said issue.