CODEWITHSUNDEEP
htmlcsskerning
scottb
scottb

Reputation: 1135

Continue kerning at tag boundaries

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?

Upvotes: 5

Views: 80

Answers (3)

user663031
user663031

Reputation:

Consider using the ::selection pseudo-element to control the highlighting of selected text.

If you want to then insert your mark tags, you can do that after the selection process is finished. At that point you will lose kerning at tag boundaries, but at least you won't see the jiggle as the user selects.

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

Upvotes: 1

Heretic Monkey
Heretic Monkey

Reputation: 12114

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>

Upvotes: 2

Nutshell
Nutshell

Reputation: 8537

I've been searching over and over for "cleans" fixes about it but I've only figure out one way with margin property.

Check this out

mark { margin: 0 -1pt; }

Hope it helps

Upvotes: 0

Related Questions