Kontynuuj kerning na granicach znaczników

Question

Mam aplikację, która używa znacznika <mark> do interaktywnego zaznaczania tekstu. Gdy użytkownik przeciąga mysz, zawija i rozpakowuje węzły tekstowe w dokumencie, aby pokazać użytkownikowi wybór. Gdy wybrany zakres kończy się w środku słowa, znaczek otacza tylko część słowa. Jeśli granica jest pomiędzy kernedami, kerning jest wyłączony.

Oto przykład:

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

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

W akapicie pierwszym < znak> tag kończy się pomiędzy dwiema cyframi "1". Drugi akapit ma ten sam tekst, bez znaku <>. Rozmiar czcionki, margines i odstępy między wierszami są dostosowywane, aby zbliżyć akapity do siebie, aby różnice były bardziej widoczne.

Jest więcej miejsca między 1s a znacznikiem <> niż bez. Ponieważ dzieje się to interaktywnie w aplikacji, ponieważ użytkownik przeciąga myszą ponad 1, następny tekst przesuwa się w prawo, gdy są pomiędzy 1 a powrotem, gdy minie kolejną postać. "Jiggling" tekstu może być denerwujący.

Czy istnieje sposób, aby powiedzieć przeglądarce , a nie, aby traktować znaczniki jako granicę kerningu? Może ustawienie czcionek?

Answer 1

dobrze, można wyłączyć kerning całkowicie ... Myślę, że to najbliżej masz zamiar dostać się do nie widząc efekt, ponieważ kerningu granica zawsze będzie na granicy znacznika.

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

Szukałem w kółko "poprawek" poprawek, ale udało mi się znaleźć tylko jedną metodę z właściwością margin.

Check this out

mark { margin: 0 -1pt; } 

Nadzieja pomaga

Answer 3

rozważyć użycie Pseudoelement ::selection kontrolować podświetlenie zaznaczonego tekstu.

Jeśli chcesz wstawić swoje tagi mark, możesz to zrobić po zakończeniu procesu selekcji. W tym momencie stracisz kerning na granicach znaczników, ale przynajmniej nie zobaczysz poruszenia, jak wybierze użytkownik.

::selection { 
 
    background-color: yellow; 
 
}

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