Bug: インラインコードに日本語を入力すると、表示がずれる

skomma commented 7 years ago

Environment

Host

item	version
OS	Ubuntu 16.04
crowi-plus	2.0.8
node.js	6.10.3
npm	4.6.1
Using Docker	yes
Using crowi-plus-docker-compose	yes

(Accessing https://{CROWI_HOST}/admin helps you to fill in above versions)

Client

item	version
OS	Windows 10, OS X El Capitan
browser	Firefox 54.0.1/Chrome 59.0 (on Mac)
Firefox ESR 52.3.0/Chrome 60.0 (on Win)

How to reproduce? (再現手順)

ページを作成し、以下の文字列をダブルクォートを使い、入力する
```
aaaabbbbccccdddd
aaaabbbbcccc
ああああいいいい
```

What happens? (症状)

日本語を入力した行だけ表示がずれる
- 日本語だけプロポーショナルフォントになってる？

What is the expected result? (期待される動作)

日本語を入力しても表示がずれない

Screen shots

Firefox on Windows
Chrome on Windows
Firefox on Mac
Chrome on Mac

yuki-takei commented 7 years ago

Mac 持ってないのでテストをお願いしたいです。

font-family: Monaco, Menlo, Consolas, "Courier New", Osaka-Mono, "MS Gothic", monospace;

入れたらどうなりますかね。

yuki-takei commented 7 years ago

Crowi 使うのはどうせエンジニアでしょ、っていう前提から入って、ローカルに入ってることが期待されるコーディングフォントを並べるっていう手もあるかもしれない。。

font-family: "SourceHanCodeJP-Regular",
             "M+ 1m",
             "Rounded M+ 1m regular",
             "Rounded M+ 2m regular",
             "Rounded Mgen+ 1m regular",
             "Rounded Mgen+ 2m regular",
             "Yutapon coding Regular",
             "Myrica M",
             "MyricaM M",
             "Ricty Diminished Discord",
             "Ricty Diminished",
             "Migu 1M",
             "Migu 2M",
             "VL ゴシック",
             "MeiryoKe_Gothic",
             Monaco, Menlo, Consolas,
             monospace;

haruhikonyan commented 7 years ago

とりあえず上記2つではズレる