mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-26 01:35:08 +02:00
e99ff65a58
We use Harfbuzz to lay out glyphs at their right positions, but we should not do so for substrings as we were doing for selection/range rects: their positioning is dependent on their full context to properly determine kerning and ligatures, for example. Instead, use the stored glyph positions & widths directly to calculate the range rect for a partial fragment selection. This makes the selection rect visually stable - it no longer jitters when expanding the selection character by character.
45 lines
1.1 KiB
HTML
45 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<script src="include.js"></script>
|
|
<style>
|
|
@font-face {
|
|
font-family: LatoBold;
|
|
src: url("../../Assets/Lato-Bold.ttf");
|
|
}
|
|
p {
|
|
font: 48px LatoBold;
|
|
margin: 0;
|
|
}
|
|
</style>
|
|
<p>Table</p>
|
|
<script>
|
|
asyncTest(async done => {
|
|
await document.fonts.ready;
|
|
|
|
const text = document.querySelector("p").firstChild;
|
|
|
|
function rangeRect(start, end) {
|
|
const range = document.createRange();
|
|
range.setStart(text, start);
|
|
range.setEnd(text, end);
|
|
return range.getBoundingClientRect();
|
|
}
|
|
|
|
const full = rangeRect(0, 5);
|
|
const r01 = rangeRect(0, 1);
|
|
const r12 = rangeRect(1, 2);
|
|
const r23 = rangeRect(2, 3);
|
|
const r34 = rangeRect(3, 4);
|
|
const r45 = rangeRect(4, 5);
|
|
|
|
const charSum = r01.width + r12.width + r23.width + r34.width + r45.width;
|
|
|
|
println(`char widths: ${r01.width} ${r12.width} ${r23.width} ${r34.width} ${r45.width}`);
|
|
println(`char sum: ${charSum}`);
|
|
println(`full width: ${full.width}`);
|
|
println(`sum == full: ${charSum === full.width}`);
|
|
println(`T.right == a.left: ${r01.right === r12.left}`);
|
|
|
|
done();
|
|
});
|
|
</script>
|