pixel Text is not well positioned with some fonts

Text is not well positioned with some fonts

Open roipoussiere opened this issue 3 years ago • 2 comments

I use Material icons as font for a project.

In the example below, the letters and icons are both drawn from the same origin, but the icons start with an unexpected offset:

Where:

light red rectangles represents text bounds;
light green rectangles represents icons bounds;
blue dots represents text and icons origins;
red dots represents text .Dot;
green dots represents icons .Dot;

See the source code for more details:

source code (click to expand)

package main
import (
"fmt"
"github.com/faiface/pixel"
"github.com/faiface/pixel/imdraw"
"github.com/faiface/pixel/pixelgl"
"github.com/faiface/pixel/text"
"github.com/golang/freetype/truetype"
"golang.org/x/image/colornames"
"golang.org/x/image/font/gofont/goregular"
"image/color"
"io/ioutil"
"os"
"path"
)
const fontSize float64 = 64
const distance float64 = 100
var offset pixel.Vec = pixel.V(25, 25)
func main() {
pixelgl.Run(run)
}
func run() {
cfg := pixelgl.WindowConfig{
Title:  "Pixel Rocks!",
Bounds: pixel.R(0, 0, 300, 300),
}
win, err := pixelgl.NewWindow(cfg)
if err != nil {
	panic(err)
}

win.Clear(colornames.Lightgray)

textFont, err := truetype.Parse(goregular.TTF)
if err != nil {
	panic(err)
}
textFace := truetype.NewFace(textFont, &truetype.Options{Size: fontSize, GlyphCacheEntries: 1})
textAtlas := text.NewAtlas(textFace, text.ASCII)

iconFont, err := getTTF("MaterialIcons-Regular.ttf")
if err != nil {
	panic(err)
}
iconFace := truetype.NewFace(iconFont, &truetype.Options{Size: fontSize, GlyphCacheEntries: 1})
iconAtlas := text.NewAtlas(iconFace, []rune{'\ue313', '\ue314', '\ue315', '\ue316'})

north := pixel.V(1, 2).Scaled(distance).Add(offset)
drawTxt(win, north, textAtlas, "n", colornames.Red, colornames.Pink)
drawTxt(win, north, iconAtlas, string('\ue316'), colornames.Green, colornames.Lightgreen)
drawDot(win, north, colornames.Blue)

east := pixel.V(2, 1).Scaled(distance).Add(offset)
drawTxt(win, east, textAtlas, "e", colornames.Red, colornames.Pink)
drawTxt(win, east, iconAtlas, string('\ue315'), colornames.Green, colornames.Lightgreen)
drawDot(win, east, colornames.Blue)

south := pixel.V(1, 0).Scaled(distance).Add(offset)
drawTxt(win, south, textAtlas, "s", colornames.Red, colornames.Pink)
drawTxt(win, south, iconAtlas, string('\ue313'), colornames.Green, colornames.Lightgreen)
drawDot(win, south, colornames.Blue)

west := pixel.V(0, 1).Scaled(distance).Add(offset)
drawTxt(win, west, textAtlas, "w", colornames.Red, colornames.Pink)
drawTxt(win, west, iconAtlas, string('\ue314'), colornames.Green, colornames.Lightgreen)
drawDot(win, west, colornames.Blue)

for !win.Closed() {
	win.Update()
}

}
func getTTF(fontName string) (*truetype.Font, error) {
file, err := os.Open(path.Join("assets", fontName))
if err != nil {
return nil, err
}
defer file.Close()
bytes, err := ioutil.ReadAll(file)
if err != nil {
	return nil, err
}

ttf, err := truetype.Parse(bytes)
if err != nil {
	return nil, err
}

return ttf, nil

}
func drawTxt(win *pixelgl.Window, pos pixel.Vec, atlas *text.Atlas, txtContent string, color, bgColor color.Color) {
txt := text.New(pos, atlas)
txt.Color = color
fmt.Fprint(txt, txtContent)
drawDot(win, txt.Dot, color)
drawRect(win, txt.Bounds(), bgColor)
txt.Draw(win, pixel.IM)
}
func drawDot(win *pixelgl.Window, pos pixel.Vec, color color.Color) {
drawRect(win, pixel.R(pos.X-3, pos.Y-3, pos.X+3, pos.Y+3), color)
}
func drawRect(win *pixelgl.Window, rect pixel.Rect, color color.Color) {
imd := imdraw.New(nil)
imd.Color = color
imd.Push(rect.Min, rect.Max)
imd.Rectangle(0)
imd.Draw(win)
}

Aug 20 '20 22:08 roipoussiere

I'd imagine this is because the baseline of those characters is different.

Could you put them in a line in a word processor or browser and see if they still exhibit the same positioning?

Aug 21 '20 00:08 Asday

Could you put them in a line in a word processor or browser and see if they still exhibit the same positioning?

Here, I selected the two first icons.

source code:

<!DOCTYPE html>
<html>
	<head>
		<style>
			@font-face { font-family: "iconsFont"; src: url("assets/MaterialIcons-Regular.ttf"); }
			.icon { font-family: "iconsFont"; font-size: large }
		</style>
	</head>
	<body>
		<p>Some icons: <span class="icon">&#xe313;&#xe314;&#xe315;&#xe316;</span></p>
	</body>
</html>

Aug 22 '20 12:08 roipoussiere

pixel pixel copied to clipboard

Text is not well positioned with some fonts

pixel
pixel copied to clipboard