Skip to content

Android align-text bug with Arabic characters #6051

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
hamzahio opened this issue Jul 10, 2018 · 6 comments · May be fixed by #10691
Open

Android align-text bug with Arabic characters #6051

hamzahio opened this issue Jul 10, 2018 · 6 comments · May be fixed by #10691

Comments

@hamzahio
Copy link

hamzahio commented Jul 10, 2018

Did you verify this is a real problem by searching the NativeScript Forum and the other open issues in this repo? Yes

Tell us about the problem

Problem with Text alignment in Android if Label given text-align: right; and the text is LTR it works ok but when text is RTL for example Arabic text goes to the other way.

Which platform(s) does your issue occur on?

Android

Please provide the following version numbers that your issue occurs with:

  • CLI: (run tns --version to fetch it)
  • Cross-platform modules: (check the 'version' attribute in the
    node_modules/tns-core-modules/package.json file in your project)
  • Runtime(s): (look for the "tns-android" and "tns-ios" properties in the
    package.json file of your project)
  • Plugin(s): (look for the version number in the package.json file of your
    project)

Please tell us how to recreate the issue in as much detail as possible.

The best approach would be to get your code running in the NativeScript Playground and share the link with us, along with any additional details or steps to reproduce needed for examining the issue there.

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" class="page">
    <Page.actionBar>
        <ActionBar title="My App" icon="" class="action-bar">
        </ActionBar>
    </Page.actionBar>
    <StackLayout>
			<Label text="this sholud be right" class="text"/>
			<Label text="اضغط هنا" class="text"/>
			<Label text="Tap the button left" class="text2"/>
			<Label text="اضغط هنا" class="text2"/>
    </StackLayout>
</Page>

css

.text {
  text-align: right;
}

.text2 {
  text-align: left;
}

Image of Yaktocat


Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

@tsonevn
Copy link
Contributor

tsonevn commented Jul 11, 2018

HI @hamzahio,
Thank you for the provided sample code.
Indeed there is an issue with the setting up the text alignment. We will research the problem further. Currently, I would suggest keeping track of the issue for more info.

@hamzahio
Copy link
Author

@tsonevn thanks for your response I think android does this for RTL languages so they automatically change the alignment for RTL languages.

Is there any dirty fix because my app will launch in production today.

@tsonevn
Copy link
Contributor

tsonevn commented Jul 12, 2018

Hi @hamzahio,
As a temporary solution, you can setup platform specific CSS as follows:

<StackLayout>
			<Label text="this sholud be right" class="text"/>
			<Label text="اضغط هنا" ios:class="text" android:class="text2"/>
			<Label text="Tap the button left" class="text2"/>
			<Label text="اضغط هنا" ios:class="text2" android:class="text"/>
    </StackLayout>

This should help you in specifying the correct alignment for the text.

@hamzahio
Copy link
Author

@tsonevn correct but I didn't know the language of data I got from server so the label will be

<StackLayout>
    <Label text="{{data.from.server}}" class="text"/>
</StackLayout>

@tsonevn
Copy link
Contributor

tsonevn commented Jul 13, 2018

HI @hamzahio,
You can try to set up the horizontalAlignment to the main layout and remove the text-align property from the labels. For example:
XML

<StackLayout horizontalAlignment="right">
			<Label  text="this sholud be right" />
			<Label text="اضغط هنا" />
			<Label  text="Tap the button left" />
			<Label  text="اضغط هنا" />
    </StackLayout>

For your convinience I am also attaching sample project.
Archive.zip

@TowelDude
Copy link

This is no fix...
Its just a patch, please fix it..

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants