text size issue

Nate112 · November 16, 2013, 6:46am

Hello!

So when first starting out in order to deal with text sizing on different devices I set text size to be variable in regards to the display.contentHeight. So for example, if its equal to or less than 300 then text size is 10 and if greater than 300 but less than or equal to 400 then text size is 11, etc. But even doing it this way, it works well on a nexus build but not at all on the samsung s4 for example. Is there a much simpler way I can go about setting the text size?

The reason I set up the variable text size was b/c I’m assuming a text size of 10 will appear different from screen to screen. Is that right?

Any suggestions are much appreciated!

tomaswesterlund · November 16, 2013, 1:45pm

Hi,

Most of the screens have close to the same resolution in Corona because of Dynamic Resolution.

Check this blog post, I think it will you help a lot:

http://www.coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/

Some screens are wider while others are more narrow. If we take resolution out of the equation, its easier to visualize the screens. Corona makes it easy to take resolution out of the picture using Dynamic Scaling. With Dynamic Scaling, you can use a common set of screen coordinates and Corona will automatically scale the text and graphics for different resolution screens. It can scale upwards or downwards depending on your starting point. It also can substitute higher resolution images when it needs to scale up. This is all managed by a Lua file in your project folder called config.lua.

Since available resolutions vary considerably, it’s helpful to use the same scale for each device. It doesn’t matter if you’re on an iPhone 3GS at 320×480 or a Retina iPad at 1536×2048, the location (0,0)represents the top-left corner and (320,480), in vertical portrait mode, is the bottom-right corner. The screen center is (160,240). Each point , in this case, is one pixel on a lower-resolution device like the 3GS, which has a native screen resolution of 320×480, while each point is four pixels on a Retina iPad. Don’t worry about the math — Corona will handle it for you.

Best regards,

Tomas

tomaswesterlund · November 16, 2013, 1:48pm

So if I have a 22" 16:9 TV and you have a 52" 16:9 TV your TV is clearly bigger but if I create a rectangle or a text object for my TV that is a vector object i.e. if I zoom in I will not see any pixels therefore if I print “Hello World” on my TV with some coordinates it will look exactly the same on your TV even though your TV is much bigger.

http://en.wikipedia.org/wiki/Vector_graphics

Best regards,

Tomas

rob · November 16, 2013, 4:52pm

There are two text sizing issues to consider with Corona SDK and different devices.

If you are using display.newText() the text should scale automatically based on your config.lua’s defined content area. So if all devices for instance are based on a 320 x 480 content area even though its a 1080 x 1980 HDTV layout, specifying the text relative to the 320 x480 content area will work with no additional effort on your part.
Native text objects (native.newTextField, native.newTextBox) however do not scale automatically and you have to adjust the font size accordingly. This block of code should get you started:

local screenScale = display.pixelHeight / display.pixelWidth

local textField = native.newTextField(10, 10, 200, 20)

textField.size = 24 * screenScale

That should get you close to auto scaling new text fields.

Rob

tomaswesterlund · November 16, 2013, 1:45pm

Hi,

Most of the screens have close to the same resolution in Corona because of Dynamic Resolution.

Check this blog post, I think it will you help a lot:

http://www.coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/

Some screens are wider while others are more narrow. If we take resolution out of the equation, its easier to visualize the screens. Corona makes it easy to take resolution out of the picture using Dynamic Scaling. With Dynamic Scaling, you can use a common set of screen coordinates and Corona will automatically scale the text and graphics for different resolution screens. It can scale upwards or downwards depending on your starting point. It also can substitute higher resolution images when it needs to scale up. This is all managed by a Lua file in your project folder called config.lua.

Since available resolutions vary considerably, it’s helpful to use the same scale for each device. It doesn’t matter if you’re on an iPhone 3GS at 320×480 or a Retina iPad at 1536×2048, the location (0,0)represents the top-left corner and (320,480), in vertical portrait mode, is the bottom-right corner. The screen center is (160,240). Each point , in this case, is one pixel on a lower-resolution device like the 3GS, which has a native screen resolution of 320×480, while each point is four pixels on a Retina iPad. Don’t worry about the math — Corona will handle it for you.

Best regards,

Tomas

tomaswesterlund · November 16, 2013, 1:48pm

So if I have a 22" 16:9 TV and you have a 52" 16:9 TV your TV is clearly bigger but if I create a rectangle or a text object for my TV that is a vector object i.e. if I zoom in I will not see any pixels therefore if I print “Hello World” on my TV with some coordinates it will look exactly the same on your TV even though your TV is much bigger.

http://en.wikipedia.org/wiki/Vector_graphics

Best regards,

Tomas

rob · November 16, 2013, 4:52pm

There are two text sizing issues to consider with Corona SDK and different devices.

If you are using display.newText() the text should scale automatically based on your config.lua’s defined content area. So if all devices for instance are based on a 320 x 480 content area even though its a 1080 x 1980 HDTV layout, specifying the text relative to the 320 x480 content area will work with no additional effort on your part.
Native text objects (native.newTextField, native.newTextBox) however do not scale automatically and you have to adjust the font size accordingly. This block of code should get you started:

local screenScale = display.pixelHeight / display.pixelWidth

local textField = native.newTextField(10, 10, 200, 20)

textField.size = 24 * screenScale

That should get you close to auto scaling new text fields.

Rob

Nate112 · December 22, 2013, 2:24am

Hi Rob,

Is there a way to account for the device height without using pixels? because although only 5.5inches, the galaxy s4 is 1920 x 1080 which completely undermines any scaling for native textfields. Is there a way to get pixels per inch?

ksan · December 22, 2013, 4:14am

Try the following. Do note these API calls read values manufacturers burn into their devices and in some cases they may not be accurate due to mistakes etc.

local androidDispWidthInInches = system.getInfo( “androidDisplayWidthInInches” ) or 0

local androidDispHeightInInches = system.getInfo( “androidDisplayHeightInInches” ) or 0

local androidDispXDpi = system.getInfo( “androidDisplayXDpi” ) or 0

local androidDispYDpi = system.getInfo( “androidDisplayYDpi” ) or 0

Nate112 · December 22, 2013, 5:43am

Thanks Ksan I’ll try it out. Is the “or 0” part just in case the manufacturer didn’t include that info? In that case it will equal zero? Also what is DispXDpi if you don’t mind?

ksan · December 22, 2013, 5:52am

You’re most welcome. Yes, 0 is better on math that you typically do with these calls than nil which you would get on device that does not support the calls or if the manufacturer messed up. You would be better off to check for 0 of course.

You can read about that API at http://docs.coronalabs.com/legacy/api/library/system/getInfo.html#androiddisplayxdpi

androidDisplayXDpi

On Android, “androidDisplayXDpi” returns the DPI (dots per inch) of the screen along the x axis, relative to the orientation of the application. This can be used to convert pixels to inches and vice-versa. Returns nil on all other platforms.

Nate112 · December 22, 2013, 2:24am

Hi Rob,

Is there a way to account for the device height without using pixels? because although only 5.5inches, the galaxy s4 is 1920 x 1080 which completely undermines any scaling for native textfields. Is there a way to get pixels per inch?

ksan · December 22, 2013, 4:14am

Try the following. Do note these API calls read values manufacturers burn into their devices and in some cases they may not be accurate due to mistakes etc.

local androidDispWidthInInches = system.getInfo( “androidDisplayWidthInInches” ) or 0

local androidDispHeightInInches = system.getInfo( “androidDisplayHeightInInches” ) or 0

local androidDispXDpi = system.getInfo( “androidDisplayXDpi” ) or 0

local androidDispYDpi = system.getInfo( “androidDisplayYDpi” ) or 0

Nate112 · December 22, 2013, 5:43am

Thanks Ksan I’ll try it out. Is the “or 0” part just in case the manufacturer didn’t include that info? In that case it will equal zero? Also what is DispXDpi if you don’t mind?

ksan · December 22, 2013, 5:52am

You’re most welcome. Yes, 0 is better on math that you typically do with these calls than nil which you would get on device that does not support the calls or if the manufacturer messed up. You would be better off to check for 0 of course.

You can read about that API at http://docs.coronalabs.com/legacy/api/library/system/getInfo.html#androiddisplayxdpi

androidDisplayXDpi

On Android, “androidDisplayXDpi” returns the DPI (dots per inch) of the screen along the x axis, relative to the orientation of the application. This can be used to convert pixels to inches and vice-versa. Returns nil on all other platforms.