Продолжить кернинг на границах тегов

Question

У меня есть приложение, которое использует тег <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>

В первом абзаце < метка> тег заканчивается между двумя "1" цифры. Второй абзац имеет тот же текст без знака <>. Размер шрифта, маржа и интервал между линиями настраиваются таким образом, чтобы приблизить абзацы, чтобы сделать различия более заметными.

Больше чем между 1s с отметкой <> чем без. Поскольку это происходит в интерактивном режиме в приложении, поскольку пользователь перетаскивает мышь над 1s, последующий текст сдвигается вправо, когда они находятся между 1s, а затем назад, когда они проходят мимо следующего символа. «Перемешивание» текста может быть раздражающим.

Есть ли способ рассказать обозревателю не для обработки меток в качестве границы кернинга? Может быть, настройка шрифта?

Answer 1

Ну, вы можете отключить кернинг вообще ... Я думаю, что это ближайшее вы собираетесь получить, чтобы не видеть эффект, так как кернинг граница всегда будет на границе тега.

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

Я искал снова и снова для «чистки» исправлений об этом, но я только выясняю один способ с margin.

Check this out

mark { margin: 0 -1pt; } 

Надеется, что это помогает

Answer 3

Рассмотрим с использованием ::selection псевдо-элемент для управления подсветки выделенного текста.

Если вы хотите вставить теги mark, вы можете сделать это после завершения процесса выбора. В этот момент вы потеряете кернинг на границах тегов, но по крайней мере вы не увидите дрожание по мере выбора пользователем.

::selection { 
 
    background-color: yellow; 
 
}

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