text size

Hi

I am trying to get a bigger text size. I was going for something like: native font size * 1.5

but I only get an error, nil value.

Any tips?

local options = 

{

text = textString[r],      

x = 120,

y = 300,

width = 850,

font = native.systemFontBold,  

fontSize = native.systemFontSize,

Align = “left”  – alignment parameter  

}

– textarea

local textBox =display.newText(options)

textBox:setFillColor(1, 1, 1)   --textcolor

textBox.anchorX = 0

textBox.anchorY = 0

Change it to a number, as far as I know there is no native.systemFontSize property.

Thanks @Supertapp

I solved it with:

textBox.setTextScale = 1.5

Then I get the device default textsize *1.5 so It is a bit better for kids to read.  

@Supertapp is right.  Corona does not have a “native.systemFontSize” property/constant.  That’s what was cauisng the Lua runtime error.

In order to use the system’s default font size, you need to set the font size to nil or zero.  We document this here…

   https://docs.coronalabs.com/daily/api/library/display/newText.html#fontsize-optional

And in order for you to set the font size to be 1.5x bigger than the native default font size, you’ll have to change it *after* the object has been created.  So, you need to do something like this…

-- Create a text object using system's default font size. local options = { text = textString[r], x = 120, y = 300, width = 850, font = native.systemFontBold, fontSize = nil, align = "left", } local textBox = display.newText(options) textBox:setFillColor(1, 1, 1) textBox.anchorX = 0 textBox.anchorY = 0 -- Make the font size 1.5x bigger than the system default font size. textBox.size = textBox.size \* 1.5

Also note that the above does have a performance hit.  When you first create create the text object via display.newText(), internally we immediately draw the given text to a bitmap to figure out what the dimensions are and to be later submitted to the GPU.  When you change the font size immediately afterwards, that causes the text object to throw away the first generated bitmap and make it draw text to a new bitmap with the new font size.  If you have several text objects that need to do this at once, then it’s best to cache the default font size by reading the TextObject.size property.

Thanks for giving even more feedback.

I am pretty sure I got native.systemFontSize from some tutorial I can’t find, but what you are saying is, that it doesn’t excist in Corona??

  • and my line: fontSize = native.systemFontSize could be left out?

I don’t get an error from my original code that I posted. The error came when I tried to make it 1.5x bigger… In HTML you have the ‘em’ unit for what ever the default textsize of the device is and you can use 1.5em to scale it. It was in those lines I thought about it.

This was my solution that worked:

local options = 

{

text = textString[r],      

x = 120,

y = 300,

width = 850,

font = native.systemFontBold,  

fontSize = native.systemFontSize,

Align = “left”  – alignment parameter  

}

– textarea

local textBox =display.newText(options)

textBox:setFillColor(1, 1, 1)   --textcolor

textBox.setTextScale = 1.5

textBox.anchorX = 0

textBox.anchorY = 0

the setTextScale I got from another lua forum, but native.systemFontSize was from a corona tutorial

I wouldn’t use setTextScale. If you need a font to be 12 pt, set it to 12 pt. Otherwise you get an 8 pt font blown up to be 12 pt size which will look blurry or pixelated on some devices.

@nick sherman. You are propably right. Corona seems to handle scaling pretty well so why would it not do the job with text size too… 

It might look ok, but I don’t see the point. You are losing quality and saving no time. It’s no harder to decide on a font size through trial and error than it is to decide on a scaling factor.

If you draw a 32 pt font and scale it to 16 pt, Corona will do a good job of scaling, as it has the detail there to work with. If you draw a 16 pt font, and then scale it to 32 pt, it has to fill in the detail for itself.

Nick is right.  If you want to display larger text, then the best solution is to increase the font size instead of scaling the text object up.

Here is how it really works.  When you set the font size in Corona, you are setting it in Corona content coordinates according to your “config.lua” file’s content width and height.  That is, the font height you set in Corona will be relative the height of your other Corona objects.  Internally, Corona will then convert that font size to pixels and have the operating system render your text to a bitmap which is then displayed onscreen.  This gives you pixel perfect text regardless of the screen resolution and DPI.

For example, let’s say you’re using a Corona content width and height of 320x480 on an old retina iPhone 4 device.  That device’s screen resolution is 640x960 pixels (ie: 2x scale).  So, if you set your font size to 10 in Corona, internally we’re using a font size of 20 pixels on that iPhone 4 device (ie: we’re applying the 2x scale factor).  This is a good thing because you’re getting pixel perfect text and the font size you’re applying is relative to all of your other objects, which allows you to line up your text objects with your other display objects.

Now, if you set a font size and then scale up the text object after the fact, then you’ll end up with *blurry* text because Corona rendered the text at a smaller pixel font size that is now be scaled up, forcing the GPU to interpolate the bitmap’s pixels across multiple screen pixels.  That is, Corona won’t re-render the text at a larger font size when you scale up the text object.  Note that blurry text isn’t as noticeable on high DPI screens such as retina screens, but it’s actually super noticeable and looks bad on low to average DPI screens… which is typically the case for most Windows PCs and low-end Android devices.

Change it to a number, as far as I know there is no native.systemFontSize property.

Thanks @Supertapp

I solved it with:

textBox.setTextScale = 1.5

Then I get the device default textsize *1.5 so It is a bit better for kids to read.  

@Supertapp is right.  Corona does not have a “native.systemFontSize” property/constant.  That’s what was cauisng the Lua runtime error.

In order to use the system’s default font size, you need to set the font size to nil or zero.  We document this here…

   https://docs.coronalabs.com/daily/api/library/display/newText.html#fontsize-optional

And in order for you to set the font size to be 1.5x bigger than the native default font size, you’ll have to change it *after* the object has been created.  So, you need to do something like this…

-- Create a text object using system's default font size. local options = { text = textString[r], x = 120, y = 300, width = 850, font = native.systemFontBold, fontSize = nil, align = "left", } local textBox = display.newText(options) textBox:setFillColor(1, 1, 1) textBox.anchorX = 0 textBox.anchorY = 0 -- Make the font size 1.5x bigger than the system default font size. textBox.size = textBox.size \* 1.5

Also note that the above does have a performance hit.  When you first create create the text object via display.newText(), internally we immediately draw the given text to a bitmap to figure out what the dimensions are and to be later submitted to the GPU.  When you change the font size immediately afterwards, that causes the text object to throw away the first generated bitmap and make it draw text to a new bitmap with the new font size.  If you have several text objects that need to do this at once, then it’s best to cache the default font size by reading the TextObject.size property.

Thanks for giving even more feedback.

I am pretty sure I got native.systemFontSize from some tutorial I can’t find, but what you are saying is, that it doesn’t excist in Corona??

  • and my line: fontSize = native.systemFontSize could be left out?

I don’t get an error from my original code that I posted. The error came when I tried to make it 1.5x bigger… In HTML you have the ‘em’ unit for what ever the default textsize of the device is and you can use 1.5em to scale it. It was in those lines I thought about it.

This was my solution that worked:

local options = 

{

text = textString[r],      

x = 120,

y = 300,

width = 850,

font = native.systemFontBold,  

fontSize = native.systemFontSize,

Align = “left”  – alignment parameter  

}

– textarea

local textBox =display.newText(options)

textBox:setFillColor(1, 1, 1)   --textcolor

textBox.setTextScale = 1.5

textBox.anchorX = 0

textBox.anchorY = 0

the setTextScale I got from another lua forum, but native.systemFontSize was from a corona tutorial

I wouldn’t use setTextScale. If you need a font to be 12 pt, set it to 12 pt. Otherwise you get an 8 pt font blown up to be 12 pt size which will look blurry or pixelated on some devices.

@nick sherman. You are propably right. Corona seems to handle scaling pretty well so why would it not do the job with text size too… 

It might look ok, but I don’t see the point. You are losing quality and saving no time. It’s no harder to decide on a font size through trial and error than it is to decide on a scaling factor.

If you draw a 32 pt font and scale it to 16 pt, Corona will do a good job of scaling, as it has the detail there to work with. If you draw a 16 pt font, and then scale it to 32 pt, it has to fill in the detail for itself.

Nick is right.  If you want to display larger text, then the best solution is to increase the font size instead of scaling the text object up.

Here is how it really works.  When you set the font size in Corona, you are setting it in Corona content coordinates according to your “config.lua” file’s content width and height.  That is, the font height you set in Corona will be relative the height of your other Corona objects.  Internally, Corona will then convert that font size to pixels and have the operating system render your text to a bitmap which is then displayed onscreen.  This gives you pixel perfect text regardless of the screen resolution and DPI.

For example, let’s say you’re using a Corona content width and height of 320x480 on an old retina iPhone 4 device.  That device’s screen resolution is 640x960 pixels (ie: 2x scale).  So, if you set your font size to 10 in Corona, internally we’re using a font size of 20 pixels on that iPhone 4 device (ie: we’re applying the 2x scale factor).  This is a good thing because you’re getting pixel perfect text and the font size you’re applying is relative to all of your other objects, which allows you to line up your text objects with your other display objects.

Now, if you set a font size and then scale up the text object after the fact, then you’ll end up with *blurry* text because Corona rendered the text at a smaller pixel font size that is now be scaled up, forcing the GPU to interpolate the bitmap’s pixels across multiple screen pixels.  That is, Corona won’t re-render the text at a larger font size when you scale up the text object.  Note that blurry text isn’t as noticeable on high DPI screens such as retina screens, but it’s actually super noticeable and looks bad on low to average DPI screens… which is typically the case for most Windows PCs and low-end Android devices.