0

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?

Cyker
  • 9,946
  • 8
  • 65
  • 93
  • Refer this : https://stackoverflow.com/questions/15262094/setting-character-width-with-css – Anas Mar 18 '18 at 04:59
  • @AnasBinNazeer scale single-width char by a factor of 2 doesn't mean that's equal to double-width because those chars have different widths... – Cyker Mar 18 '18 at 05:02

1 Answers1

1

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.

  • 1
    It doesn't have to be done with fonts necessarily. Full-width characters take up exactly two columns in terminal emulators by leaving a little margin to the right of each glyph if needed. Conceivably there could be a CSS feature that produces this effect, although I don't believe it currently exists. – martin Jun 04 '18 at 11:39