縦書きエディタ&縦書きIME
Webページ上での「縦書きで自然に書けるエディタ」はほぼ存在しません。表示だけならCSSが 縦書きに対応してかなり経つのに、日本語入力側がきちんと対応しなかった最大の理由はOS組み込みのIMEにあります。 標準的なIMEは、横書き用UI(変換候補ポップアップ)を縦書きテキストにねじ込んできます。
このページにはIMEがまるごとページ中に組み込まれているので、変換候補が縦書き横並びで入力行のすぐ隣に出ます。ほら、自然でしょ?
入力→
キーマップ→
変換→
表示
差し替えた層:表示だけ(ただし候補窓の並びは本文の向きに追随します) / 据え置き:入力・キーマップ・変換
本文を縦組にしているのはCSSです。候補窓のほうは、縦書きに合わせて横並びに描き直しています。 変換も配列も、ほかのページとまったく同じものが動いています。 候補窓が本文の向きについてくるのは、それがOSのものではなく、このページの中身だからです。
このページ固有のソース:site/src/pages/tategaki.ts
OS側の日本語IMEはオフ(英数直接入力)にしてから打鍵してください。なお、変換・学習・ ユーザー辞書・入力テキストはラボ内の各実験ページ間で共有されます。
- ローマ字で入力、Space = 変換 / 次候補、Enter = 確定、Esc = 戻す
- 変換中の矢印キーは見た目の向きに一致: ←→ = 候補の段の移動、 ↑↓ = 文節の移動、Shift+↑↓ = 文節の伸縮
- 変換候補ポップアップは縦組で、第一候補が文節のすぐ隣に並びます(文節の左に出れば右→左、 画面端からの距離の関係で右に出れば左→右)。
- 数字 1-9 で直接選択:番号は常に画面の左から右へ振られ、キーボードの数字キーの 並びと一致します。
- Android + 物理キーボードで試す場合は、キーボード設定の自動修正(オートコレクト)を オフにしてください。オンだと入力のローマ字が単語として挿入されることが あります(ページ側でも極力ブロックしてますが、十分じゃないです)。