How to center a text with Luxor

I am trying to create simple images with a text made of a few digits on the center.
The problem is that I need to manually offset the position, is there a way to make it “centered” in a visual sense, i.e. where the span from the extreme of the digit and the border is thesame in the 4 directions ?

I have tried so far the above snippet:

using Luxor

Drawing(300, 300, "hello-world.png")
origin()
background("white")
fontface("Avenir-Black")
fontsize(160)
sethue("red")
textcentered("123", 0, 0)
sethue("black")
text("123",Point(-17, 60), halign=:center,valign=:center)
finish()
preview()

This results in the following image, where you can see that the the red text is not centered, and I have to manually adjust it:
hello-world

1 Like

Fonts aren’t perfectly aligned - I often nudge them to optically align them:

(also, it’s valign=:middle.)

4 Likes

I was really wondering about an improved solution for this as well. Glad to see I wasn’t the only one struggeling. :slight_smile:

Screenshot 2021-07-12 at 21.23.27

But furthermore I’m still curious as to how the placement works because I get this weird placement also with monospaced fonts:

Screenshot 2021-07-13 at 08.52.25

Could I maybe create a consistent bordered text by splitting the word up in letters and positioing those seperately? :thinking:

I might dive into trying that in a bit because I’d like to finish this logo I’m making. :slight_smile:

I think this is a different issue from the original poster, who needed to use the correct keyword. I think you might be after “text as path”, converting text to graphic paths so that you can fill and stroke them separately? (documentation here).

@draw begin
    fontsize(100)
    fontface("Avenir-Black")
    sethue("black")
    textoutlines("Wormhole", O, :fillpreserve, halign=:center)
    sethue("red")
    setline(3)
    strokepath()
end

Splitting the text up into separate letters is straightforward - use textextents() to get the dimensions of each character. If you look at the code for textcurve() you get an idea of how to do it:

4 Likes

A nice that solves simply. Thanks again cormullion. :slight_smile: