Font Aligning Problems

[rcm]

I've noticed that with any font I use, its unaligned on the y axis. If I have the following:

Code: Select all

function love.load()
	font1 = love.graphics.newFont("Candara.ttf",30)
	font2 = love.graphics.newFont("Candara.ttf",70)
	font3 = love.graphics.newFont("Candara.ttf",130)
end
function love.draw()
	love.graphics.setFont(font1)
	love.graphics.print("ABC",0,0) --Notice y = 0
	love.graphics.setFont(font2)
	love.graphics.print("ABC",50,0) --Notice y = 0
	love.graphics.setFont(font3)
	love.graphics.print("ABC",175,0) --Notice y = 0
end

It turns out to be this:

All 3 sizes should be aligned along the top of the window, instead there's extra space above them. Is this supposed to happen? Because I don't want to have to figure out what to subtract the y number by every time I use a new font.

[Nixola]

It could be a Candara problem, did you try other fonts?

[coffee]

It could be a Candara problem, did you try other fonts?

I'm thinking the same. (I don't have the font to test it). You can also try alter Line Height
https://love2d.org/wiki/Font:setLineHeight

[rcm]

It could be a Candara problem, did you try other fonts?

Yes I tried many fonts and they're all the same...

I'm thinking the same. (I don't have the font to test it). You can also try alter Line Height
https://love2d.org/wiki/Font:setLineHeight

Didn't make a difference, thats used when the text makes a new line.

[coffee]

Since I print usually smaller font sizes never noticed that exponential increase. Even default font suffers of that. Seems my suggestion of setting Line Height first don't work.
I got interested too in fixes and hacks to this problem.

[mickeyjm]

you may have to do something like setting the y height to -(size) or something to cancel it out, I dont know the exact amount to decrease it by so you might have to experiment around a bit

[Roland_Yonaba]

Hi, I just noticed, making some random tests, that actually, when you set a size to a TTF font, the height becomes more than what you set:

setFont(...,10) --> getHeight() returns 12
setFont(...,12) --> getHeight() returns 14
setFont(...,100) --> getHeight() returns 116

Anyway, You can align them using that tricky way :

Code: Select all

function love.load()

	myHeight = 30
	myHeight2 = 70
	myHeight3 = 100
   font = love.graphics.newFont("trebuc.ttf",myHeight)
   font2 = love.graphics.newFont("trebuc.ttf",myHeight2)   
   font3 = love.graphics.newFont("trebuc.ttf",myHeight3)
end

function love.draw()
	 love.graphics.setFont(font)
   love.graphics.print(font:getHeight()-myHeight,0,-(font:getHeight()-myHeight)) --Notice y = 0
   	 love.graphics.setFont(font2)
   love.graphics.print(font2:getHeight()-myHeight2,50,-(font2:getHeight()-myHeight2)) --Notice y = 0
	 love.graphics.setFont(font3)
   love.graphics.print(font3:getHeight()-myHeight3,175,-(font3:getHeight()-myHeight3)) --Notice y = 0
end

Note, that works, but is pretty ugly...Just a snippet to make you understand what I figured out...

[coffee]

Hi, I just noticed, making some random tests, that actually, when you set a size to a TTF font, the height becomes more than what you set:

setFont(...,10) --> getHeight() returns 12
setFont(...,12) --> getHeight() returns 14
setFont(...,100) --> getHeight() returns 116

Anyway, You can align them using that tricky way :

Code: Select all

function love.load()

	myHeight = 30
	myHeight2 = 70
	myHeight3 = 100
   font = love.graphics.newFont("trebuc.ttf",myHeight)
   font2 = love.graphics.newFont("trebuc.ttf",myHeight2)   
   font3 = love.graphics.newFont("trebuc.ttf",myHeight3)
end

function love.draw()
	 love.graphics.setFont(font)
   love.graphics.print(font:getHeight()-myHeight,0,-(font:getHeight()-myHeight)) --Notice y = 0
   	 love.graphics.setFont(font2)
   love.graphics.print(font2:getHeight()-myHeight2,50,-(font2:getHeight()-myHeight2)) --Notice y = 0
	 love.graphics.setFont(font3)
   love.graphics.print(font3:getHeight()-myHeight3,175,-(font3:getHeight()-myHeight3)) --Notice y = 0
end

Note, that works, but is pretty ugly...Just a snippet to make you understand what I figured out...

Seems work well Roland. Nice one.

[rcm]

Hi, I just noticed, making some random tests, that actually, when you set a size to a TTF font, the height becomes more than what you set:

setFont(...,10) --> getHeight() returns 12
setFont(...,12) --> getHeight() returns 14
setFont(...,100) --> getHeight() returns 116

Anyway, You can align them using that tricky way :

Code: Select all

function love.load()

	myHeight = 30
	myHeight2 = 70
	myHeight3 = 100
   font = love.graphics.newFont("trebuc.ttf",myHeight)
   font2 = love.graphics.newFont("trebuc.ttf",myHeight2)   
   font3 = love.graphics.newFont("trebuc.ttf",myHeight3)
end

function love.draw()
	 love.graphics.setFont(font)
   love.graphics.print(font:getHeight()-myHeight,0,-(font:getHeight()-myHeight)) --Notice y = 0
   	 love.graphics.setFont(font2)
   love.graphics.print(font2:getHeight()-myHeight2,50,-(font2:getHeight()-myHeight2)) --Notice y = 0
	 love.graphics.setFont(font3)
   love.graphics.print(font3:getHeight()-myHeight3,175,-(font3:getHeight()-myHeight3)) --Notice y = 0
end

Note, that works, but is pretty ugly...Just a snippet to make you understand what I figured out...

Thanks! Even though its not 100% accurate I guess I could try and work with that.

[kikito]

Fonts are complex. That "extra space" you see could be the font ascent. See this link:

http://en.wikipedia.org/wiki/Typeface#Font_metrics

I'm afraid LÖVE doesn't give us all the metrics available for a font (there is no Font:getAscent(), or descent() ).

The best way to have a "perfect" alignment, would be either to calculate the ascent separately (it is different for each font and size) or to use bitmap fonts. Another option is editing the font with a font editor and making the ascent 0.