Question about text series api (TextLine、NewTextBox..)

[luankefei]

hi, I want to draw a text content at the top-left of the screen, and without spacing. like this.

so I do a simply transform

// c.H is canvas height
c := Canvas{canvas.New(1000, 1000)}
canvas.NewContext(c).SetView(canvas.Identity.Translate(0, 1000))

and call c.DrawText, set y * -1

c.DrawText(x, y*-1, text)

but, I have trouble in the "TextBox".

I tried to do some tests, you can see the text.Bounds() has little offsets. and here is my code

for i := 5; i > 0; i-- {
    face := fontFamily[fontKey].Face(t.Size+float64(i*30)*ptPerMm, color, t.FontStyle, canvas.FontNormal)
    text := canvas.NewTextBox(face, content, 0, 0, canvas.Left, canvas.Top, indent, lineStretch)

    rect := text.Bounds()
    if i%2 == 0 {
        c.SetFillColor(canvas.Red)
    } else {
        c.SetFillColor(canvas.Blue)
    }
    c.DrawPath(t.X, t.Y, rect.ToPath())

    c.SetFillColor(color)
    c.DrawText(t.X, t.Y, text)
}

sorry for bad english

[tdewolff]

I think the text is aligned well, but the bounding box calculation is differently. Your first example uses text-width and line-height to draw the bounding box, while the second example uses text outline paths to calculate the exact bounding box. As you notice, the first example the stem from the P extends outsides the bounding box.

If you draw the same piece of text, do they have the same position in both versions, even though the bounding box is displayed differently?

[tdewolff]

Anyways, see 283bf67. I've updated the meaning of Bounds to be what you think it should mean. The new OutlineBounds returns the exact bounding box by using the text outlines (slower). Can you see the difference?

[luankefei]

OK. thanks. seems the OutlineBounds is a morden API. I will try it later.

actually, I'm working on something like this. you see there is a Keynote demo. the rulers & guides is relative to top-left corner of the screen.

So I want to draw some elements(texts, images, lines..etc), exact at the position of the point that someone told me. maybe designers.

There are 4 versions with the same draw-data, You see two versions at right side of the image(with the white background). I was made.
when font-size is small, it seems ok. As the font size increases, there are deviated. So I think it because the line-height setting, textbox spacing or the position calculate.

As I know, the most familiar of line-height configure is lineStretch, I've try this, but not working.

canvas.NewTextBox(face, content, 100, 100, canvas.Left, canvas.Top, 0, 0)

I dont know is that clear(about I was saying) if you get it, what can I do or something direction I can try?

thanks alot.

[tdewolff]

Line stretch modifies the distance between two lines, it looks like you only have one line of text.

You could looks at this picture and figure out what all the different measures and metrics mean: https://developer.apple.com/library/archive/documentation/TextFonts/Conceptual/CocoaTextArchitecture/Art/glyph_metrics_2x.png In canvas you can get the metrics using FontFace.Metrics(), whose values you can use to adjust font positioning.

In general, it looks like they use CapHeight instead of Ascent to determine the Y-coordinate from the top of the box to the text baseline. It looks like I should change this in canvas to make it more intuitive.

[tdewolff]

I think the problem is this: in https://godoc.org/golang.org/x/image/font#Metrics the Ascent is defined as the distance from the top of the line to the baseline. This top of the line should be the height of so-called ascenders from the baseline (characters like l, h, k, etc. which "ascent" to the top), but in this case it seems to include extra spacing which is presumably the line gap. I've tested font heights in Inkscape and it seems to use the exact same heights as does canvas, i.e. from the top of the text box to the text baseline it seems to include both the line gap and the ascent height.

It might be that the font incorporates the line gap in the ascent/descent values, this depends on the font, see golang/freetype#32. This cannot be fixed without manual tweaking or until I write the custom font loader.

In the mean time, you could maybe move the text box up by as much as face.Metrics().Ascent - face.Metrics().CapHeight, this should fix your problem.