5

<mark>タグを使用してインタラクティブにテキストを強調表示するアプリケーションがあります。ユーザーがマウスをドラッグすると、ドキュメント内のテキスト ノードがラップおよびアンラップされ、選択内容がユーザーに表示されます。選択範囲が単語の途中で終わる場合、マークは単語の一部だけを囲みます。境界がカーニングされたペアの間にある場合、カーニングは無効になります。

次に例を示します。

p { font-size: 30pt; margin: 0; line-height: 26pt; }
<p>There <mark>are 1</mark>1 entries.</p>
<p>There are 11 entries.</p>

最初の段落では、<mark> タグは 2 つの「1」の数字の間で終了します。2 番目の段落には、<mark> を除いた同じテキストがあります。フォント サイズ、余白、および行間を調整して、段落を近づけて違いをより明確にします。

<mark> がある場合よりも 1 の間のスペースが多くなります。これはアプリケーションでインタラクティブに行われるため、ユーザーがマウスを 1 の上にドラッグすると、後続のテキストは 1 の間にあるときに右に移動し、次の文字を超えると元に戻ります。テキストの「揺れ」は煩わしい場合があります。

マークタグをカーニング境界として扱わないようにブラウザに指示する方法はありますか? 多分フォント機能設定？

4

3 に答える 3

2

カーニングを完全にオフにすることができます...カーニングの境界は常にタグの境界にあるため、効果が見られないことに最も近いと思います。

p { font-size: 30pt; margin: 0; line-height: 26pt; font-kerning: none; }
mark { margin: 0; font-kerning: none; }
<p>There <mark>are 1</mark>1 entries.</p>
<p>There are 11 entries.</p>

于 2016-04-06T17:00:26.320 に答える
1

::selection疑似要素を使用して、選択したテキストの強調表示を制御することを検討してください。

タグを挿入したい場合はmark、選択プロセスが終了した後に行うことができます。その時点で、タグの境界でカーニングが失われますが、少なくともユーザーが選択したときのジグルは表示されません。

::selection {
  background-color: yellow;
}
There are 11 entries.<br/>
There are 11 entries.

于 2016-04-13T17:18:07.907 に答える
0

私はそれに関する「クリーン」な修正を何度も検索してきましたが、marginプロパティを使用した方法は1つしかわかりません。

これをチェックしてください

mark { margin: 0 -1pt; }

それが役に立てば幸い

于 2016-04-06T16:35:47.503 に答える