css - テキスト入力の背景としてグリッドを表示する

Question

テキストに合わせて「グリッド」を表示するようにテキスト入力のスタイルを設定しようとしています。以下の例を参照してください。

文字間隔が固定された固定幅フォントを使用しています。理論的には、すべてのブラウザーで同じ期待どおりのレンダリングが得られるはずですが、ブラウザーによってフォントの表示が異なることはよく知られています。

Firefox で正しく配置しても、IE などでは機能しません。回避策として、IE と Firefox で異なる CSS を使用して、わずかに異なる背景画像を表示することができます。しかし、Firefox でも、レンダリングは画面の解像度に依存しているようです (4:3 と 16:9 では異なる結果が得られました)。

テキストとグリッドの間の正しい配置をどのように達成できるかについて、誰かが考えを持っていますか?

ありがとう

Answer 1

次のコードを追加して、css ファイルに入力できます。

letter-spacing: 24px;

次に、任意の文字の後にスペースがあり、グリッドを使用して準備完了の背景を追加することもできます.

Answer 2

回避策があり、解像度やブラウザに関係なく機能する可能性があります。

div でスパンと入力フィールドを取得します。スパンと入力フィールドを重ねて表示します。

'|' の文字列を作成します。入力フィールドの文字と同じ文字間隔と幅を持つ。これらが重なっていると、ユーザーが入力するとグリッドのように見えます。

これがうまくいくことを願っています。