We Keep Coding

Select across multiple text elements via rectangular area JS

I don't want to use the device's native text selecting ability, rather I want to replace it with my own method. How can I select text across multiple elements based off of coordinate positions on the page?
Basically, I have the results of Touch clientX/clientYs to make a rectangular area and I want to select all the text contained in that area
I've tried using absolutely-positioned elements and creating a range with those elements as the bounding start and end but it did not work.

I found these two methods that can be used to construct a range that can be added to the window selection.
https://developer.mozilla.org/en-US/docs/Web/API/Document/caretPositionFromPoint
https://developer.mozilla.org/en-US/docs/Web/API/Document/caretRangeFromPoint

Detemine all elements at a given point js

I am working on an API that use shapes (and irregular) shapes to build websites. My problem is where I can provide a div that can carry as a background to irregular shapes so .
However to do this I would need to know the max area the object is taking up by having the max height and width.
I am aware that element.getBoundingClientRect does this but my roadblock is that is does not consider any psuedo elements, which is how most of these shapes are made.
I know when working with the CSS transform property, especially using scale, the browser knows to resize the whole shape including the pseudo element that makes up the shape.
It also uses the border-box coordinate system.
However the browser does not provide this information as it comes from the user agent
My main question is how do I access the dimensions the user agent computes for any given element, or how do I find the proper dimensions of a 'getBoundingClientRect' that considers an elements psuedo classes
My shapes can be found in the attached links.
httpsmichaelodumosu57.github.iosigma-xi-mu
https://css-tricks.com/examples/ShapesOfCSS/
I can't afford to use any other method to create my shapes because I have limited time on the project, but I do know that the browser can provide me with the information I am looking for.

Yes I have answered my own question. What you want to do is to scale the image to a very small since (since transform scale() works perfectly) and place it in a grid box (this could be a div of small size as well. You would run document.elementsFromPoint(x, y)
(notice the pluralization) on every point in the div containing you shrunked irregular shape and from there you can find the height and width of its bounding box by the difference of the highest range of their respective coordinate values. To center you must place your irregular shape in the bounding box of the background drop with the re-scaled dimensions (remember your skrunked your irregular shape to find them) and have the margin of the inner shape set to zero. This works only if your real (not pseudo element) is to the left most of the screen. Question is how do you position your background when your irregular shape is not properrly centering inside of it?

You can use document.elementFromPoint(x, y) for getting the element that exists in specific point, but I have not tested it for any kind of shapes.

Finding collision between two rotated SVG text elements

I am working with SVG elements. I wish to rotate a SVG text element and also have to find whether it is colliding with nearby text elements.
In this I have achieved rotation. But facing concern on finding collision. To find collision, I am obtaining values using getBoundingClientRect() for text elements after rotation and comparing those.
The issue I am facing is, the labels are returned as collided even when a text enter inside the rect box of previous text element. But you can see those are not collided.
I need to found whether text is collided with previous text element exactly.
Help to resolve this..
Thanks !

FabricJs iText top and left position based on text and not by bounding box

When I'm trying to get the top and left values of an text object in FabricJs, I get the values back of the bounding box. But what I would like to know is the top and left values of the text itself and not the bounding box.
I added a image for a better understanding of this problem: http://imgur.com/U42YDhm
I tried to find a solution, but I couldn't find exactly what I was looking for. I hope you can help me out.

Precomputing SVG text coordinates and width

I want to write a program, which will build automatically a chart with
SVG from some data. In the chart there are several arrows with text.
Now I am confronted with a problem: How can I know the length of the
text in advance?? How long does the arrow have to be? The complete text
must be placed above the arrow.
Does anybody have an idea?? How can I know how much place the text will
need in the SVG??

Take a look at measuring dimensions of the text element's bounding box. You could consider making an element invisible, if you want to precompute.