CODEWITHSUNDEEP
htmlcssuser-interfacefonts
Cyker
Cyker

Reputation: 10914

How to make double-width chars exactly twice of single-width chars?

In terminal, many fonts supporting double-width chars display them exactly twice the width of single-width chars. For example, these two lines should have exactly the same width:

あああ
aaaaaa

However, this is not true in browsers, no matter Chrome, Firefox, or whatever GUI browser. I tried some monospace fonts, but they still don't necessarily display あ exactly twice width of a.

My question is: Can we fix this problem using CSS, or there are fonts satisfying this condition without any help from CSS, or this problem is simply not solvable?

Upvotes: 0

Views: 599

Answers (1)

user149341
user149341

Reputation:

Your problem is fonts. Most monospace fonts don't contain any CJK characters. The browser has to substitute in another font for those characters, and that font will usually have different metrics from the monospace font.

If you're on a Mac, the Osaka-Mono font contains both Japanese and monospaced Latin characters, and the example below will be laid out with exactly two Latin characters to each Japanese character:

body { font-family: Osaka-Mono; }
abcdefghijklmn
<br>
いろはにほへと

On other platforms… you're on your own, sorry. CJK web fonts aren't standardized in the same sort of way as Latin web fonts.

Upvotes: 1

Related Questions