Aceエディタ で日本語入力時のちらつきを解消する

Ace Editor で日本語入力時のちらつきを解消する

▼ 手っ取り早く解決法だけ見たい方はこちらのアンカーリンクから(まとめ・ソースコード)

Ace Editorとは

言わずと知れたブラウザ上で動作するテキストエディタです。Cloud9というクラウド開発環境向けに作られたエディタなので、とっても高機能です。
詳細は: https://ace.c9.io/

日本語入力における諸問題

海外で作られているだけあり、日本語などで利用されるIME(入力補助機能)は例外視されがちです。環境によっては一部変換操作において、Enterで確定しない限り未確定文字が繰り返し出現したり、実装に踏み切ることができなかったケースも少なくないでしょう。
最近(私が確認した時点で)はクリティカルな問題は解消されていますが、まだ、日本語を扱う場合にストレスになる問題が残っていました。

日本語入力時のちらつきとは

IMEモードでキー入力する度に左へカクカクする現象。四角文字が出たり消えたりする事によりちらついているように見えます。
IME制御上は問題ないですが、日本語入力をする上でストレスとなる現象です。

chiratsuki.gif

以前はフォントの指定によって発生する事象でしたが、ブラウザのバージョンアップによって顕著になっているようです。

試行、再現が確認できる環境

事象と対策

四角文字の正体は[SOH(x01)]Start Of Headingという制御コードが機種依存文字扱いで表示されている事。

chira.png

該当の制御コードにあたる文字のみを収録したウェブフォント(.woff)を作成、もちろんx01は横幅0にしています。

font_ime_jp.png

CSS定義でフォント定義及び上書きを行う事により対応。

ace_ime_jp_font.css
  /* IME Fix */
  @font-face {
    font-family: 'ime_jp_rp';
    src: url('path/to/ime_jp_rp.woff') format('woff');
  }
  .ace_editor > .ace_text-input {
    padding-top: 1px;
    padding-left: 1px;
    letter-spacing: 1px;
    font-family: ime_jp_rp, Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;
  }

※CSSは適宜調整となります。
結果→ライブデモはこちら( http://grepreptips.ltside.com/ )

nkai2.gif

まとめ・ソースコード

① 以下のフォントファイルをダウンロード、任意の公開領域に配置
http://grepreptips.ltside.com/ime_jp_rp.woff
(ライセンスはApacheLicense(2.0)に準拠します)

② CSSでフォントを定義。

ace_ime_jp_font.css
  /* IME Fix */
  @font-face {
    font-family: 'ime_jp_rp';
    src: url('path/to/ime_jp_rp.woff') format('woff');
  }
  .ace_editor > .ace_text-input {
    padding-top: 1px;
    padding-left: 1px;
    letter-spacing: 1px;
    font-family: ime_jp_rp, Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;
  }

「path/to/ime_jp_rp.woff」は①で指定された位置を指定。

※CSSは適宜調整となります。
結果→ライブデモはこちら( http://grepreptips.ltside.com/ )

ご指摘や、これ以外に現れる問題等あれば教えてください。(解決するかどうかは別ですが・・)

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.