Page 1 of 2

Font Aligning Problems

Posted: Mon Jun 18, 2012 7:25 pm
by 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:
Image
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. :ehem:

Re: Font Aligning Problems

Posted: Mon Jun 18, 2012 7:41 pm
by Nixola
It could be a Candara problem, did you try other fonts?

Re: Font Aligning Problems

Posted: Mon Jun 18, 2012 7:42 pm
by coffee
Nixola wrote: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

Re: Font Aligning Problems

Posted: Mon Jun 18, 2012 7:52 pm
by rcm
Nixola wrote:It could be a Candara problem, did you try other fonts?
Yes I tried many fonts and they're all the same...
coffee wrote: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.

Re: Font Aligning Problems

Posted: Mon Jun 18, 2012 8:12 pm
by 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.

Re: Font Aligning Problems

Posted: Mon Jun 18, 2012 8:24 pm
by 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

Re: Font Aligning Problems

Posted: Mon Jun 18, 2012 8:30 pm
by 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...

Re: Font Aligning Problems

Posted: Mon Jun 18, 2012 8:38 pm
by coffee
Roland_Yonaba wrote: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.

Re: Font Aligning Problems

Posted: Mon Jun 18, 2012 8:52 pm
by rcm
Roland_Yonaba wrote: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.

Re: Font Aligning Problems

Posted: Mon Jun 18, 2012 9:00 pm
by 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.