How can we center text in a picture?

[quocvu]

Question about an existing feature

What are you trying to achieve?

I am trying to horizontally center a piece of text of random length into an image.

When you searched for similar issues, what did you find that might be related?

From my experiment, using gravity = center, it puts the text in the middle of the picture, but I don't want to have a vertical centering but have the text near the top of the image.

I am able to center the text when it long enough to wrap to multiple lines. I specify top, left, and width as in the code sample below. My understanding is in the case the, my code performs the centering by choosing the value of left as (pictureWidth - width) / 2. But when the text is shorter than the width, it appears as left aligned and not center. I am sure what the align param is used for because the width seems to be used for wrapping only and not the size of the box containing the text.

Please provide a minimal, standalone code sample, without other dependencies, that demonstrates this question

In this example the width of the baseImage is 1400

await baseImage
      .composite([{ 
        input: {
          text: {
            text: pangoText,
            rgba: true,
            align: 'centre',
            justify: true,
            width: 1000,
            dpi: 400,
          }
        }, 
        top: 100, 
        left: 200, 
        blend: 'over',
      }])
      .toFile(outputPath);

Please provide sample image(s) that help explain this question

For example, how can I make this picture? I would need to using 2 composites with the word CENTER and the long text below it. My example, can accomplish the long text but I can't find a way to make that big CENTER title.

https://www.pinterest.com/pin/design-principles-alignment--432908582913007598/

[quocvu]

It would be really cool if we could use gravity param but relative to a custom defined rectangle and not just the picture boundaries only

[lovell]

Could you represent this as an SVG?

[lovell]

@quocvu Were you able to make any progress with this, perhaps as an SVG?

[lovell]

Closing due to inactivity but please feel free to reopen with more details if further help is required.