Kerning an Taggrenzen fortsetzen

Question

Ich habe eine Anwendung, die das Tag <mark> verwendet, um Text interaktiv hervorzuheben. Wenn der Benutzer die Maus zieht, werden die Textknoten im Dokument ein- und ausgeklappt, um dem Benutzer die Auswahl anzuzeigen. Wenn der ausgewählte Bereich in der Mitte eines Wortes endet, umgibt die Markierung nur einen Teil des Wortes. Wenn die Grenze zwischen einem gekernten Paar liegt, ist das Kerning deaktiviert.

Hier ist ein Beispiel:

p { font-size: 30pt; margin: 0; line-height: 26pt; }

<p>There <mark>are 1</mark>1 entries.</p> 
 
<p>There are 11 entries.</p>

Im ersten Absatz, die < Marke> Tag endet zwischen den beiden "1" Ziffern. Der zweite Absatz hat den gleichen Text, ohne die < Markierung>. Die Schriftgröße, der Rand und der Zeilenabstand werden angepasst, um die Absätze näher zusammenzuführen, um die Unterschiede besser sichtbar zu machen.

Es gibt mehr Platz zwischen den 1s mit der < Marke als ohne. Da dies interaktiv in der Anwendung passiert, wenn der Benutzer die Maus über die 1s zieht, verschiebt sich der nachfolgende Text nach rechts, wenn er zwischen den 1en liegt, und zurück, wenn sie das nächste Zeichen überschreiten. Das "Wackeln" des Textes kann ärgerlich sein.

Gibt es eine Möglichkeit, dem Browser nicht mitzuteilen, dass die Markierungs-Tags als Kerning-Grenze behandelt werden? Vielleicht eine Font-Feature-Einstellung?

Answer 1

Nun hilft, können Sie ganz Kerning ausschalten ... Ich denke, das ist in der Nähe Sie nicht zu sehen, um den Effekt zu bekommen sind, da die Kerning Grenze wird immer an der Taggrenze sein.

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>

Answer 2

Ich habe immer wieder nach "cleans" Korrekturen gesucht, aber ich habe nur eine Möglichkeit mit margin Eigenschaft herauszufinden.

Check this out

mark { margin: 0 -1pt; } 

Hoffe, dass es

Answer 3

Betrachten wir die ::selection Pseudoelement mit der Hervorhebung der ausgewählten Text zu steuern.

Wenn Sie dann Ihre mark Tags einfügen möchten, können Sie das tun, nachdem der Auswahlvorgang abgeschlossen ist. An diesem Punkt verlieren Sie das Kerning an Tag-Grenzen, aber zumindest werden Sie das Wackeln nicht sehen, wenn der Benutzer wählt.

::selection { 
 
    background-color: yellow; 
 
}

There are 11 entries.<br/> 
 
There are 11 entries.