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.
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
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>
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.
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
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.