Continue kerning at tag boundaries

Question

I have an application that uses the <mark> to interactively highlight text. When the user drags the mouse, it wraps and expands the text nodes in the document to show the user the choice. When the selected range ends in the middle of the word, the label surrounds only part of the word. If the boundary is between a nuclear pair, kerning is disabled.

Here is 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 digits "1". The second paragraph has the same text without the <mark> character. Font size, margin, and line spacing are adjusted to fit paragraphs to make differences more noticeable.

There is more space between 1 with the <mark> symbol than without. Since this happens interactively in the application, as the user drags the mouse over 1s, the subsequent text moves to the right when they are between 1s and then backward when they pass the next character. Shuffling text can be annoying.

Is there a way to tell the browser not to treat tag labels as a kerning border? Maybe a font setting?

Answer 1

Well, you can completely turn off kerning ... I think that closest you will not see the effect, since the border of kerning will always be on the border of the tag.

 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

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

If you want to insert mark tags, you can do this after completing the selection process. At this point, you will lose kerning at the tag boundaries, but at least you won't see a jitter as the user selects.

 ::selection { background-color: yellow; } 

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

Answer 3

I searched many times for “fixes” of fixes, but I only figured out one way with the margin property.

check this

 mark { margin: 0 -1pt; } 

Hope this helps