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:
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.
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...
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.