I've got an application that uses the <mark> tag to interactively highlight text. As the user drags the mouse, it wraps and unwraps the text nodes in the document to show the user the selection. When the selected range ends in the middle of a word, the mark surrounds just part of the word. If the boundary is between a kerned pair, the kerning is disabled.
Here's an example:
p { font-size: 30pt; margin: 0; line-height: 26pt; }<p>There <mark>are 1</mark>1 entries.</p>
<p>There are 11 entries.</p>In the first paragraph, the <mark> tag ends between the two "1" digits. The second paragraph has the same text, without the <mark>. The font size, margin, and line-spacing are adjusted to bring the paragraphs closer together to make the differences more visible.
There's more space between the 1s with the <mark> than without. Since this happens interactively in the application, as the user drags the mouse over the 1s, the subsequent text shifts to the right when they're between the 1s and then back when they get past the next character. The "jiggling" of the text can be annoying.
Is there any way to tell the browser not to treat the mark tags as a kerning boundary? Maybe a font-feature-setting?
Well, you can turn off kerning altogether... I think that's the closest you're going to get to not seeing the effect, since the kerning boundary will always be at the tag boundary.
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>