Text Alignment doesn't work on the phone..

[JTPenn]

Well, I have set the text alignment to some text to the right and it appears good in the simulator but it it doesn’t look right in the mobile phone.

Am pretty sure the code has nothing wrong or else it wouldn’t look right in the simulator…

[rob]

There isn’t much for us to go on. Are there any errors in the device’s console log?

What font(s) are you using?

Are these custom/free Internet fonts, or well known fonts?

Is the device using the right font that you think you’re using?

What code are you using to create the text? Align the text?

Are you using single line text or multi-line text?
 

Give us some details and maybe we can help.

Rob

[JTPenn]

1. The “Arial” font

2. Well known font

3. Well, I don’t know there is nothing special in the font that I can detect with if it is the same font or not…

4. Just a simple display.newText and options are in a table with the alignment set to “right”

5. Multi-Line text in a scrollView and each part of the text is seperated with the method in here https://coronalabs.com/blog/2014/06/17/tutorial-working-with-large-blocks-of-text/

[rob]

Thanks for the answers.  For #4, I was hoping you would have posted some code.

Now that you’ve provided some context, what device are you testing on?

[JTPenn]

[lua]

hourTextAlignment = “right”, – << Part of the table where it is used in the function

local function adjustScrollViewHourText(selectedHour)

local options = {

        text = “”,

        width = 290,

        font = “Arial”,

        fontSize = 20,

        align = sceneLanguagesTable[userLanguage].hourTextAlignment

    }

local titleOptions = {

        text = “”,

        width = 290,

        font = “Arial”,

        fontSize = 25,

        align = “center”

    }

    for k, value in pairs(hourSceneTable) do

   if k == selectedHour then

   for i, hourTable in ipairs(hourSceneTable[k][“EN”]) do

   paragraphTitle = hourSceneTable[k][“EN”][i]

print(hourPath…"/"…paragraphTitle…".txt")

local fileHandle, errorString = io.open( system.pathForFile(hourPath…"/"…paragraphTitle…".txt"), “r” )

if (paragraphTitle == “First Watch” or paragraphTitle == “Third Watch” or paragraphTitle == “Second Watch”) then

   rectColor = {1, 0, 0, 1}

end

if userLanguage == “AR” then

   paragraphTitle = hourSceneTable[k][“AR”][i]

paragraphTitle = changeNumbersToArabic(paragraphTitle)

end

           if fileHandle then

   local contents = fileHandle:read( “*a” )

titleOptions.text = string.gsub(paragraphTitle, “+”, “:”) or “”

   titleText = display.newText( titleOptions )

titleText:setFillColor(toColor(255, 255, 255, 255))

titleText.anchorX = 0

                    titleText.anchorY = 0

titleText.x = 10

                    titleText.y = yOffset

local myRectangle = display.newRect( 5, yOffset, titleText.width, titleText.height )

myRectangle.anchorX = 0

                    myRectangle.anchorY = 0

myRectangle:setFillColor( 0, 0, 0, 0 )

myRectangle.strokeWidth = 3

                    myRectangle:setStrokeColor(rectColor[1], rectColor[2], rectColor[3], rectColor[4])

yOffset = yOffset + titleText.height

           scrollView:insert( myRectangle )

scrollView:insert( titleText )

rectColor = {toColor(0, 0, 0, 255)}

repeat

                        paragraph, contents = string.match( contents, “([^\n]*)\n(.*)” )

           options.text = paragraph or “”

                        paragraphs[#paragraphs+1] = display.newText( options )

                        paragraphs[#paragraphs].anchorX = 0

                        paragraphs[#paragraphs].anchorY = 0

                        paragraphs[#paragraphs].x = 10

                        paragraphs[#paragraphs].y = yOffset

                        paragraphs[#paragraphs]:setFillColor( 0 )

   paragraphs[#paragraphs].y = yOffset 

                        scrollView:insert( paragraphs[#paragraphs] )

                        yOffset = yOffset + paragraphs[#paragraphs].height

until contents == nil or string.len( contents ) == 0

end

end

end

end

end[/lua]

I am testing on a Samsung Galaxy S Duos and Sony Xperia Z2… unfortunately Sony Xperia Z2’s screen broke yesterday morning and the touch is not working anymore, And I just noticed this bug today so I don’t remember if it was occuring on the Xperia Z2 or not…

[rob]

I’m not 100% sure, but Arial is not a standard Android font. Kindle Fire and the Barnes & Nobel Nook’s have it installed with their set.  The standard Sans serif font is Roboto in the last couple of major updates and Droid Sans before that.  You can call:

https://docs.coronalabs.com/api/library/native/getFontNames.html

to get a list of installed fonts on the device and verify that Arial is there. 

Since this is device related, you do need to now that Android, Windows, OS-X and iOS all render fonts just slightly different. Even OS-X and iOS under Apple’s full control behave differently with Fonts.  I would suspect that even Samsung might make enough changes that it could render differently than LG would.  How different is it? Can you post screen shots?

[JTPenn]

Changed the font to native.systemFont and the same problem is happening,

Here is the difference between the mobile screen and the simulator…

Simulator:

http://i.imgur.com/OdqxTuJ.png

Mobile Screen:

http://i.imgur.com/PjNBLF5.png

[rob]

Can you put together a sample app that demonstrates this issue, then you can file a bug report using the “Report a bug” link at the top of the page. The project will need a main.lua, config.lua, build.settings and any assets needed to run. Put all of that in a .zip file and use that with the form above.

You will get an email with a Bug Case ID number. Post that number here when you’re done and we can look at what’s going on.

Rob

[rob]

There isn’t much for us to go on. Are there any errors in the device’s console log?

What font(s) are you using?

Are these custom/free Internet fonts, or well known fonts?

Is the device using the right font that you think you’re using?

What code are you using to create the text? Align the text?

Are you using single line text or multi-line text?
 

Give us some details and maybe we can help.

Rob

[JTPenn]

1. The “Arial” font

2. Well known font

3. Well, I don’t know there is nothing special in the font that I can detect with if it is the same font or not…

4. Just a simple display.newText and options are in a table with the alignment set to “right”

5. Multi-Line text in a scrollView and each part of the text is seperated with the method in here https://coronalabs.com/blog/2014/06/17/tutorial-working-with-large-blocks-of-text/

[rob]

Thanks for the answers.  For #4, I was hoping you would have posted some code.

Now that you’ve provided some context, what device are you testing on?

[JTPenn]

[lua]

hourTextAlignment = “right”, – << Part of the table where it is used in the function

local function adjustScrollViewHourText(selectedHour)

local options = {

        text = “”,

        width = 290,

        font = “Arial”,

        fontSize = 20,

        align = sceneLanguagesTable[userLanguage].hourTextAlignment

    }

local titleOptions = {

        text = “”,

        width = 290,

        font = “Arial”,

        fontSize = 25,

        align = “center”

    }

    for k, value in pairs(hourSceneTable) do

   if k == selectedHour then

   for i, hourTable in ipairs(hourSceneTable[k][“EN”]) do

   paragraphTitle = hourSceneTable[k][“EN”][i]

print(hourPath…"/"…paragraphTitle…".txt")

local fileHandle, errorString = io.open( system.pathForFile(hourPath…"/"…paragraphTitle…".txt"), “r” )

if (paragraphTitle == “First Watch” or paragraphTitle == “Third Watch” or paragraphTitle == “Second Watch”) then

   rectColor = {1, 0, 0, 1}

end

if userLanguage == “AR” then

   paragraphTitle = hourSceneTable[k][“AR”][i]

paragraphTitle = changeNumbersToArabic(paragraphTitle)

end

           if fileHandle then

   local contents = fileHandle:read( “*a” )

titleOptions.text = string.gsub(paragraphTitle, “+”, “:”) or “”

   titleText = display.newText( titleOptions )

titleText:setFillColor(toColor(255, 255, 255, 255))

titleText.anchorX = 0

                    titleText.anchorY = 0

titleText.x = 10

                    titleText.y = yOffset

local myRectangle = display.newRect( 5, yOffset, titleText.width, titleText.height )

myRectangle.anchorX = 0

                    myRectangle.anchorY = 0

myRectangle:setFillColor( 0, 0, 0, 0 )

myRectangle.strokeWidth = 3

                    myRectangle:setStrokeColor(rectColor[1], rectColor[2], rectColor[3], rectColor[4])

yOffset = yOffset + titleText.height

           scrollView:insert( myRectangle )

scrollView:insert( titleText )

rectColor = {toColor(0, 0, 0, 255)}

repeat

                        paragraph, contents = string.match( contents, “([^\n]*)\n(.*)” )

           options.text = paragraph or “”

                        paragraphs[#paragraphs+1] = display.newText( options )

                        paragraphs[#paragraphs].anchorX = 0

                        paragraphs[#paragraphs].anchorY = 0

                        paragraphs[#paragraphs].x = 10

                        paragraphs[#paragraphs].y = yOffset

                        paragraphs[#paragraphs]:setFillColor( 0 )

   paragraphs[#paragraphs].y = yOffset 

                        scrollView:insert( paragraphs[#paragraphs] )

                        yOffset = yOffset + paragraphs[#paragraphs].height

until contents == nil or string.len( contents ) == 0

end

end

end

end

end[/lua]

I am testing on a Samsung Galaxy S Duos and Sony Xperia Z2… unfortunately Sony Xperia Z2’s screen broke yesterday morning and the touch is not working anymore, And I just noticed this bug today so I don’t remember if it was occuring on the Xperia Z2 or not…

[rob]

I’m not 100% sure, but Arial is not a standard Android font. Kindle Fire and the Barnes & Nobel Nook’s have it installed with their set.  The standard Sans serif font is Roboto in the last couple of major updates and Droid Sans before that.  You can call:

https://docs.coronalabs.com/api/library/native/getFontNames.html

to get a list of installed fonts on the device and verify that Arial is there. 

Since this is device related, you do need to now that Android, Windows, OS-X and iOS all render fonts just slightly different. Even OS-X and iOS under Apple’s full control behave differently with Fonts.  I would suspect that even Samsung might make enough changes that it could render differently than LG would.  How different is it? Can you post screen shots?

[JTPenn]

Changed the font to native.systemFont and the same problem is happening,

Here is the difference between the mobile screen and the simulator…

Simulator:

http://i.imgur.com/OdqxTuJ.png

Mobile Screen:

http://i.imgur.com/PjNBLF5.png

[rob]

Can you put together a sample app that demonstrates this issue, then you can file a bug report using the “Report a bug” link at the top of the page. The project will need a main.lua, config.lua, build.settings and any assets needed to run. Put all of that in a .zip file and use that with the form above.

You will get an email with a Bug Case ID number. Post that number here when you’re done and we can look at what’s going on.

Rob

[ahmed.irfad]

I don’t know about you. This morning I solved the problem.
" align = ‘right’ " works for latin font, but not for arabic font.
There is a bug. For arabic font you have to set " align = ‘left’ " and then it will appear RTL.
Anyway, this bug is only on Android devices. For arabic font on Apple devices you should leave " align = ‘right’ "

So do like this:

local arabic_text_align = “right”
local platformName = system.getInfo(“platformName”)
 

if platformName == “Android” then

     arabic_text_align = “left”

end

local options = {

     text = " اللَّـهِ الرَّحْمَـٰنِ الرَّحِيم ",

     width = 300, – or whatever you want

     height = 0, – for multiline text

     align = arabic_text_align

}

local arabic_textView = display.newText( options )

That’s all 

[ahmed.irfad]

I don’t know about you. This morning I solved the problem.
" align = ‘right’ " works for latin font, but not for arabic font.
There is a bug. For arabic font you have to set " align = ‘left’ " and then it will appear RTL.
Anyway, this bug is only on Android devices. For arabic font on Apple devices you should leave " align = ‘right’ "

So do like this:

local arabic_text_align = “right”
local platformName = system.getInfo(“platformName”)
 

if platformName == “Android” then

     arabic_text_align = “left”

end

local options = {

     text = " اللَّـهِ الرَّحْمَـٰنِ الرَّحِيم ",

     width = 300, – or whatever you want

     height = 0, – for multiline text

     align = arabic_text_align

}

local arabic_textView = display.newText( options )

That’s all