jQuery/Javascript Check for text-Overlap

Question

I was wondering if there is any good way to check wether the texts of two html elements overlap? Carification: Checking for overlap between elements is no Problem I want to check wether the actual texts inside 2 Elements overlap.

Say I have the elements

<span id="green">Green is my cÔlor</span>
<span id="blue">blue is my color</span>

How could I check wether the texts of those 2 elements overlap? We can assume I have access to the jQuery Object of the given elements.

Edit: What I'm trying to say is that I can detect wether the borders of elements intercect, but in case of text there is the possibility that a good part of the space above and below each character is "unused".

"Checking for overlap between elements is no Problem I want to check wether the actual texts inside 2 Elements overlap" this statement is not entirely clear, it's confusing — Leo
– Leo, Commented Feb 6, 2015 at 8:50

isxaker · Accepted Answer · 2015-02-06 08:51:00Z

3

function getPositions(elem) {
    var clientRect = elem.getBoundingClientRect();
    return [
        [ clientRect.left, clientRect.left + clientRect.width ],
        [ clientRect.top, clientRect.top + clientRect.height ]
    ];
}


function intersect(elemA, elemB) {
    var posA = getPositions(elemA),
        posB = getPositions(elemB),
        isOverlap = false;

    if (posA[0][0] < posB[0][1] && posA[0][1] > posB[0][0] &&
        posA[1][0] < posB[1][1] && posA[1][1] > posB[1][0])
        isOverlap = true;

    return isOverlap;
}

answered Feb 6, 2015 at 8:51

isxaker

9,62613 gold badges65 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alexander Dayan Over a year ago

getBoundingClientRect returns the rectangle of whole element, not a text inside it.

isxaker Over a year ago

I agree with your offer to use Element.getClientRects()

Alexander Dayan Over a year ago

Thank you ;) What about to vote my answer if you agree with it?

Alexander Dayan · Accepted Answer · 2015-02-06 08:51:03Z

3

You can do it using Element.getClientRects() method which returns a collection of rectangles that indicate the bounding rectangles for each box in a client.

The returned value is a collection of ClientRect objects, one for each CSS border box associated with the element. Each ClientRect object contains read-only left, top, right and bottom properties describing the border box, in pixels, with the top-left relative to the top-left of the viewport. For tables with captions, the caption is included even though it's outside the border box of the table.

answered Feb 6, 2015 at 8:51

Alexander Dayan

2,9341 gold badge19 silver badges30 bronze badges

Collectives™ on Stack Overflow

jQuery/Javascript Check for text-Overlap

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related