Comment by Sai Kishore Komanduri on "How to find a "visual center" of a bunch of text?"

Personally, I would approximate it to a rectangle — combined height of all the blocks being the length; and the longest width block being the breadth ... the centre of the rectangle then, would be the hinge.

Notwithstanding the computational complexity, arriving at a solution for finding the exact visual centre of the polygon formed by the text, for this use case, feels a bit overkill.

Having said that, Mapbox has developed an algorithm for finding the visual centre of a(ny) polygon.

blog.mapbox.com/a-new-algorithm-for-finding-a-vis…

The corresponding library is called polylabel. (so named because the problem they were trying to solve was to find an optimum place — a.k.a. "visual centre" — to place a label inside an irregularly shaped polygon)

However the work remains on your part to calculate the coordinates of the formed polygon, to be passed to polylabel like so:

const polygon = [[x1, y1], [x2, y2], [x3, y3]];
const centre = polylabel([polygon]);

You come like a swish of superman to the rescue! Thanks again Sai!

Personally I've started finding (0, height/2) hinge point (the middle of height of rectangle) a better hinge than anywhere in the middle (for ltr texts and vice versa for rtl).

It will be an overkill, agreed. But I get stuck when I do not know something that comes up 😆, and try to find it no matter what. Thank you for pointing out Mapbox resources!

Agreed! (0, height/2) ((width, height/2) for RTL) is as good a "hinge" solution as any! :)

Agreed, just look at the computed x,y and do some basic math. Also, gdad-s-river for drag and drop look at interactjs.io

Whoa! Thanks for the library link share Hipkiss !

To whoever comes to read Sai's comments and to this comment, when I saw the snippet of the code in Sai's answer, namely

const polygon = [[x1, y1], [x2, y2], [x3, y3]];
const centre = polylabel([polygon]);

I overlooked one thing : Why would one want to have an array of arrays of arrays, to represent a polygon?

Why not, the following would have been enough (one less array wrap):

const centre = polylabel([[x1, y1], [x2, y2], [x3, y3]]);

That's because!

(Wait for it)

Polygons can have multiple rings! Yeah you heard that right! And more (which I do not understand right now). What if I told you, you don't know what polygons are. If you mathematically really don't, read this:

esri.github.io/geometry-api-java/doc/Polygon.html

You're right! polylabel's "main" use case deals with polygons in maps.

Apart from having exterior boundaries, polygons in maps can also have (multiple) interior boundaries (say: two lakes inside a city ... you would have a polygon representing the boundary of the city, and two polygons representing the boundaries of these lakes)

The polygons in GeoJSON notation take this into account; and they are represented as an array of "regular" polygons (which in turn are arrays of coordinates representing the boundary points):

- Polygon
  - LinearRing (exterior)
    - Positions...
  - LinearRing (interior)
    - Positions...
  - LinearRing (interior)
    - Positions...

{
  "type": "Polygon",
  "coordinates": [
    [ // co-ordinates representing a single ring/boundary
      [0, 0], [10, 10], [10, 0], [0, 0] 
    ],
    [...], // more "boundary" polygons...
    [...],
    ...
  ]
}

Excerpted from this treatise — macwright.org/2015/03/23/geojson-second-bite — on GeoJSON notation

cc: gdad-s-river

P.S.: If you you were to use a GeoJSON polygon, then the expression for evaluating the visual centre would just be this: polylabel(geoJSONCoords). In fact the first argument that polylabel accepts as per the docs, are polygon coordinates in GeoJSON format.

Yusssss! You've such a knack for explaining things Sai! Kudos 💛

Thank you! 😄 You are no less! 💛

Search Hashnode