How can I line up English and Chinese characters of a monospace font for CSS?

Question

I have a web app with a textarea containing both English and Chinese text. The problem is, I cannot line up letters and characters perfectly with standard monospace fonts (Courier New or Lucida Console): it appears that the Chinese text has the width almost twice as wide as the English text, but it's not 2x, but around 1.8x, at least in Windows OS, which looks ugly in my case, especially if the text is long.

<textarea style="font-family:monospace;">      |
中文字|
123456|
Englis|</textarea>

Is there an easy way to make Chinese characters look exactly 2x wider than English letters using CSS?

Answer 1

In your case, the monospace font did not support Chinese characters, and therefore an (undesirable) fallback Chinese font is used that did not "cooperate" with your English letters in monospace font.

Also, you cannot change the glyph width of the font to any desired width using CSS though font-stretch exists. Adjusting size or width works, but it affects both Chinese and English text, and width are based on the width of spaces.

Unfortunately, there are no easy way. Your best bet is to use a font such that it is monospace, and that it supports Chinese characters, and that Chinese characters are twice as wide as English letters.

Answer 2

You can use "細明體" (English name: MingLiU), which is pre-installed by Mircosoft Windows, and widely used in Traditional Chinese world.

see the wiki explanation (only in Chinese):

https://zh.wikipedia.org/wiki/%E6%96%B0%E7%B4%B0%E6%98%8E%E9%AB%94?oldformat=true

<textarea style="font-family:MingLiU;">      |
中文字|
123456|
Englis|</textarea>

There are also another chinese monospace font, like Sarasa Gothic (更紗黑體) and Noto Sans Mono CJK (思源黑体). Those are open source and can be freely used in any purpose.

<textarea style="font-family:Sarasa Mono TC;">      |
中文字|
123456|
Englis|</textarea>

<textarea style="font-family:Noto Sans Mono CJK TC;">      |
中文字|
123456|
Englis|</textarea>