My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

How to find a "visual center" of a bunch of text?

Arihant's photo
Arihant
·Nov 22, 2017

I've a drag and drop functionality, so that the whole text could be dragged and dropped as per the writer's/user's convenience on a canvas.

I'm using draftjs for the editor. So I know everything I need to know about the individual text pieces (blocks). For example, I know that the above text has 9 blocks of text. I know the character length of each block. I know the width of each block of text using getBoundingClientRect.

I want to be able to figure out a visual centre (approx. the white circle in the image) out of the shape that the text blocks make, so that when the user drags the whole text on canvas afterwards, the hinge point of the text drag be that visual centre.

It's easy to find the vertical centre of the whole text, but it's difficult for me to find the horizontal visual __centre. I've tried taking

  1. Half of the longest character length block of text, really silly to do, since one block of text could be very long, the next one really short.
  2. Average, silly again, doesn't work.