Tiếp tục kerning tại ranh giới thẻ

Question

Tôi đã có một ứng dụng sử dụng thẻ <mark> để đánh dấu tương tác văn bản. Khi người dùng kéo chuột, nó kết thúc tốt đẹp và unwraps các nút văn bản trong tài liệu để hiển thị cho người dùng lựa chọn. Khi phạm vi được chọn kết thúc ở giữa một từ, dấu bao quanh chỉ là một phần của từ đó. Nếu ranh giới nằm giữa cặp kerned, kerning bị vô hiệu hóa.

Dưới đây là một ví dụ:

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

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

Trong đoạn đầu tiên, < mark> tag kết thúc giữa hai "1" chữ số. Đoạn thứ hai có cùng văn bản, không có dấu <>. Kích thước phông chữ, lề và khoảng cách dòng được điều chỉnh để đưa các đoạn gần nhau hơn để tạo sự khác biệt rõ hơn.

Có nhiều khoảng trống hơn giữa các số 1 với dấu <> không có. Vì điều này xảy ra tương tác trong ứng dụng, khi người dùng kéo chuột qua 1s, văn bản tiếp theo sẽ dịch sang phải khi chúng nằm trong khoảng từ 1 giây và sau đó quay lại khi chúng vượt qua ký tự tiếp theo. Các "jiggling" của văn bản có thể gây phiền nhiễu.

Có cách nào để thông báo cho trình duyệt không để coi thẻ đánh dấu là ranh giới kerning không? Có thể cài đặt phông chữ-tính năng?

Answer 1

Vâng, bạn có thể tắt hoàn toàn kerning ... Tôi nghĩ đó là gần nhất bạn sẽ nhận được để không nhìn thấy những ảnh hưởng, kể từ khi kerning ranh giới sẽ luôn nằm ở ranh giới thẻ.

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

Tôi đã tìm kiếm nhiều lần để sửa lỗi "dọn dẹp" nhưng tôi chỉ tìm ra một cách với thuộc tính margin.

Check this out

mark { margin: 0 -1pt; } 

Hy vọng nó giúp

Answer 3

Xem xét sử dụng các yếu tố giả ::selection để kiểm soát nổi bật của văn bản đã chọn.

Nếu bạn muốn sau đó chèn các thẻ mark của mình, bạn có thể thực hiện việc đó sau khi quá trình lựa chọn hoàn tất. Tại thời điểm đó, bạn sẽ mất kerning tại ranh giới thẻ, nhưng ít nhất bạn sẽ không nhìn thấy các jiggle khi người dùng lựa chọn.

::selection { 
 
    background-color: yellow; 
 
}

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