After selection, Range.getClientRects will draw in red and Range.getBoundingClientRect in blue. You'll notice that if you select text at the beginning of a line (on lines split at dashes), a small rectangle will be included from the previous line, making getBoundingClientRect expand. In a PRE node the effect is visible on each line.

OTOH, if you select a full line from the paragraph below (including the dash), you'll get 3 client rects -- besides the main one, there's one from the previous line (included in the bounding rect) and one from the next line (not included in the bounding rect).

Aliquam-erat-volutpat.-Nunc eleifend-leo-vitae-magna.-In-id-erat-non-orci-commodo-lobortis.-Proin-neque-massa, cursus-ut, gravida-ut, lobortis-eget, lacus.-Sed-diam.-Praesent-fermentum-tempor-tellus.-Nullam-tempus.-Mauris-ac-felis-vel-velit-tristique-imperdiet.-Donec-at-pede.-Etiam-vel-neque-nec-dui-dignissim-bibendum.-Vivamus-id-enim.-Phasellus-neque-orci, porta-a, aliquet-quis, semper-a, massa.-Phasellus-purus.-Pellentesque-tristique-imperdiet-tortor.-Nam-euismod-tellus-id-erat.

boxes.forEach(function(box, i){
var el = document.createElement("div");
el.className = "client-rect";
el.style.left      = (box.left + dx) + "px";
el.style.top       = (box.top + dy) + "px";
el.style.width     = box.width + "px";
el.style.height    = box.height + "px";
el.style.border    = i == 0 ? "2px solid blue" : "1px solid red";
document.body.appendChild(el);
});