ClientRect semantics from getClientRects in webkit browsers

In webkit browsers (this doesn't seem like a problem in IE9 or Mozilla), when a range is requested for clientRects (getClientRects), the returned client descriptors contain rectangles of text that match the selected text, but also the client beginnings of any element within the range. How to determine which client items belong to items

For example, let's say this pair was rendered with the same line breaks that I have:

<p>This is some text StartSelection in a paragraph blah blah<span>this is some EndOfSelection blah more text</span> </p> 

If I selected from StartSelection to EndOfSelection and then requested the range from the selection - getRangeAt (0)

I would return this array of clientRects:

 0. rect of 'StartSelection in a paragraph' 1. rect of 'blah blah' 2. rect of 'this is some EndOfSelection blah' 3. rect of 'more text' 4. rect of 'this is some EndOfSelection' 

The only rectangles I want are 0, 1, and 4. Rectors 2 and 3 represent the contents of the start tag of the elements that the selection crosses.

A geometric inspection of the rectangles would allow me to abandon 2 and 3, but the code seems a bit fragile to me, especially if my choice was to extend to the third line. In any case, to determine the source of lines without geometric control, which can I use to reset 2 and 3?

+4
source share
1 answer

I don’t know how much I know. This Range function is relatively new in all browsers, I wrote very little about it, so I assume that it is not used widely, and there may be browser errors. This, for example, looks like a WebKit error, because it seems to me that I quickly read to violate the CSSOM View spec part related to ranges .

0
source

Source: https://habr.com/ru/post/1369518/


All Articles