newText being cropped

Hey guys, I’m trying to use multiline text objects in my app, but although it works perfectly on iOS, my texts are being cropped on Android devices.

I’ve tested my app on an iPad, a Galaxy S2 and a Galaxy Ace Plus.

Both Android devices displayed the same problem.

I don’t know if it’s related, but I’m using “The ultimate ‘config.lua’ File” as featured here (http://www.coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/)

I’ve attached screenshots of how the app looks in each device.

What does your code look like?  Are you doing 3 separate paragraphs?  What fonts are you using?

Yes, each paragraph is one text instance. My code is something like this:

local group = self.view local currentHeight = 0 for i = 1, #paragraphs do local myText = display.newText(paragraphs[i], 0, currentHeight, screenWidth, 0, "OpenSans-Light", 16) group:insert(myText) currentHeight = currentHeight + myText.height + 8 end

That 8 there is simply to increase the distance between paragraphs…

Any ideas? 

The font I’m using is OpenSans - http://www.google.com/fonts/specimen/Open+Sans

Each device (and Windows and Mac) render fonts slightly different.  I would suggest that at a size of 16, myText.height + 8 is only a half line of spacing.  You might want to increase that paragraph padding some more for the devices that are rendering the height too high.

But the thing is, they don’t seem to be overlapping. As they don’t have a background, we would at least be able to see the whole text being rendered.

And indeed, I just tested it, it increased the space between each paragraph but didn’t solve my cropping problem…

Any other thoughts?

What is your config.lua like?

This is how my config.lua looks like:

if string.sub(system.getInfo("model"),1,4) == "iPad" then application = { content = { width = 360, height = 480, scale = "letterBox", xAlign = "center", yAlign = "center", fps = 60, imageSuffix = { ["-x2"] = 1.4, ["-x4"] = 3.0, }, }, notification = { iphone = { types = { "badge", "sound", "alert" } } } } elseif string.sub(system.getInfo("model"),1,2) == "iP" and display.pixelHeight \> 960 then application = { content = { width = 320, height = 568, scale = "letterBox", xAlign = "center", yAlign = "center", fps = 60, imageSuffix = { ["-x2"] = 1.4, ["-x4"] = 3.0, }, }, notification = { iphone = { types = { "badge", "sound", "alert" } } } } elseif string.sub(system.getInfo("model"),1,2) == "iP" then application = { content = { width = 320, height = 480, scale = "letterBox", xAlign = "center", yAlign = "center", fps = 60, imageSuffix = { ["-x2"] = 1.4, ["-x4"] = 3.0, }, }, notification = { iphone = { types = { "badge", "sound", "alert" } } } } elseif display.pixelWidth \<= 320 then application = { content = { width = 320, height = 480, scale = "letterBox", xAlign = "center", yAlign = "center", fps = 60, imageSuffix = { ["-x2"] = 1.4, ["-x4"] = 3.0, }, }, } elseif display.pixelHeight / display.pixelWidth \> 1.72 then application = { content = { width = 320, height = 570, scale = "letterBox", xAlign = "center", yAlign = "center", fps = 60, imageSuffix = { ["-x2"] = 1.4, ["-x4"] = 3.0, }, }, } else application = { content = { width = 320, height = 512, scale = "letterBox", xAlign = "center", yAlign = "center", fps = 60, imageSuffix = { ["-x2"] = 1.4, ["-x4"] = 3.0, }, }, notification = { iphone = { types = { "badge", "sound", "alert" } } } } end

Using another font solves the problem, which is pretty weird since it is a very popular font nowadays… 

Anyway, I’m fine using another font.

Thanks for your attention, Rob

Glad you solved it.  I wish different operating systems handled fonts the same way.

thanks for your discussion.

What does your code look like?  Are you doing 3 separate paragraphs?  What fonts are you using?

Yes, each paragraph is one text instance. My code is something like this:

local group = self.view local currentHeight = 0 for i = 1, #paragraphs do local myText = display.newText(paragraphs[i], 0, currentHeight, screenWidth, 0, "OpenSans-Light", 16) group:insert(myText) currentHeight = currentHeight + myText.height + 8 end

That 8 there is simply to increase the distance between paragraphs…

Any ideas? 

The font I’m using is OpenSans - http://www.google.com/fonts/specimen/Open+Sans

Each device (and Windows and Mac) render fonts slightly different.  I would suggest that at a size of 16, myText.height + 8 is only a half line of spacing.  You might want to increase that paragraph padding some more for the devices that are rendering the height too high.

But the thing is, they don’t seem to be overlapping. As they don’t have a background, we would at least be able to see the whole text being rendered.

And indeed, I just tested it, it increased the space between each paragraph but didn’t solve my cropping problem…

Any other thoughts?

What is your config.lua like?

This is how my config.lua looks like:

if string.sub(system.getInfo("model"),1,4) == "iPad" then application = { content = { width = 360, height = 480, scale = "letterBox", xAlign = "center", yAlign = "center", fps = 60, imageSuffix = { ["-x2"] = 1.4, ["-x4"] = 3.0, }, }, notification = { iphone = { types = { "badge", "sound", "alert" } } } } elseif string.sub(system.getInfo("model"),1,2) == "iP" and display.pixelHeight \> 960 then application = { content = { width = 320, height = 568, scale = "letterBox", xAlign = "center", yAlign = "center", fps = 60, imageSuffix = { ["-x2"] = 1.4, ["-x4"] = 3.0, }, }, notification = { iphone = { types = { "badge", "sound", "alert" } } } } elseif string.sub(system.getInfo("model"),1,2) == "iP" then application = { content = { width = 320, height = 480, scale = "letterBox", xAlign = "center", yAlign = "center", fps = 60, imageSuffix = { ["-x2"] = 1.4, ["-x4"] = 3.0, }, }, notification = { iphone = { types = { "badge", "sound", "alert" } } } } elseif display.pixelWidth \<= 320 then application = { content = { width = 320, height = 480, scale = "letterBox", xAlign = "center", yAlign = "center", fps = 60, imageSuffix = { ["-x2"] = 1.4, ["-x4"] = 3.0, }, }, } elseif display.pixelHeight / display.pixelWidth \> 1.72 then application = { content = { width = 320, height = 570, scale = "letterBox", xAlign = "center", yAlign = "center", fps = 60, imageSuffix = { ["-x2"] = 1.4, ["-x4"] = 3.0, }, }, } else application = { content = { width = 320, height = 512, scale = "letterBox", xAlign = "center", yAlign = "center", fps = 60, imageSuffix = { ["-x2"] = 1.4, ["-x4"] = 3.0, }, }, notification = { iphone = { types = { "badge", "sound", "alert" } } } } end

Using another font solves the problem, which is pretty weird since it is a very popular font nowadays… 

Anyway, I’m fine using another font.

Thanks for your attention, Rob

Glad you solved it.  I wish different operating systems handled fonts the same way.

thanks for your discussion.

@guilovsh; which font did you use as we are experiencing the same problem?

thanks