Right-To-Left Support

Support
#1

Is there a way to change the program depending on the locale selected for the user. In my case, It’s Arabic, which follows a right-to-left first. So is there a way to make the field label appear before the field input in the edit screen. Also, do I have to move the field groups to the right manually or is there a better way to do it automatically

#2

Hi,

Currently, the platform does not support automatic RTL for screens and components. You can only change RTL for concrete Label/TextField/Table column using CSS styles or align property.

You need to extend theme using Studio - Create theme extension and define CSS code in halo-ext.scss file.


@mixin com_company_demo-halo-ext {
  .rlt-label {
    text-align: right;
  }

  .rtl-table-cell > div {
    text-align: right !important;
  }
}

Then I can use these styles in my screen:


<label stylename="rlt-label"
       value="???? ??????"
       align="MIDDLE_RIGHT"
       width="150px"/>
<table id="usersTable"
       height="150px"
       width="100%">
    <columns>
        <column id="login"/>
        <column id="name"/>
        <column id="position"/>
        <column id="email"/>
        <column id="active"/>
    </columns>
    <rows datasource="usersDs"/>
</table>

And for Table I can change direction of cell according to data using StyleProvider:


public class ExtAppMainWindow extends AppMainWindow {
    @Inject
    protected Table<User> usersTable;

    @Override
    public void init(Map<String, Object> params) {
        super.init(params);
        usersTable.addStyleProvider((entity, property) -> {
            if ("name".equals(property)) {
                // here we can check if value contains RTL symbols
                return "rtl-table-cell";
            }
            return null;
        });
    }
}

Also, you can use align parameter of UI components:


<label stylename="rlt-label"
       value="???? ??????"
       align="MIDDLE_RIGHT"
       width="150px"/>

And for table columns:


<table id="usersTable"
       height="150px"
       width="100%">
    <columns>
        <column id="login"/>
        <column id="name" align="RIGHT"/>
    </columns>
    <rows datasource="usersDs"/>
</table>
CUBA 6.10 RTL Layout Support
#3

I check this method but it does not work for me

#4

I had to provide Arabic Language support in my project. Requirement for Arabic is RTL. How do I build RTL support in CUBA application.

I figured out something will work by setting dir=“rtl” attribute for HTML tag of the page. I played with this using chrome developer tools and it brings some RTL functionality in the application.

However even after this many controls needs to be aligned for RTL.

I need a guidance on setting dir attribute to HTML element which changing the language in login screen and then to change alignment of controls based on the langulage.

Thanks,
Hari