Improve display support for RTL languages

[latin-panda]

Description

The form renders correctly, but everything is left-aligned.

Some components might need to adjust their controls (buttons, kebab menu) to support right-aligned text.

XML Form

<?xml version="1.0"?>
<h:html xmlns="http://www.w3.org/2002/xforms" xmlns:h="http://www.w3.org/1999/xhtml"
        xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xsd="http://www.w3.org/2001/XMLSchema"
        xmlns:jr="http://openrosa.org/javarosa" xmlns:orx="http://openrosa.org/xforms"
        xmlns:odk="http://www.opendatakit.org/xforms">
    <h:head>
        <h:title>RTL.Alignment.Test</h:title>
        <model odk:xforms-version="1.0.0">
            <itext>
                <translation lang="Arabic (ar)">
                    <text id="options-0">
                        <value>&lt;p style="text-align:end"&gt;واحد&lt;/p&gt;</value>
                    </text>
                    <text id="options-1">
                        <value>&lt;p style="text-align:center"&gt;اثنين&lt;/p&gt;</value>
                    </text>
                    <text id="options-2">
                        <value>&lt;p style="text-align:start"&gt;ثلاثة&lt;/p&gt;</value>
                    </text>
                    <text id="options-3">
                        <value>أربعة</value>
                    </text>
                    <text id="/data/select_question:label">
                        <value>تسمية السؤال المحاذاة بشكل صحيح</value>
                    </text>
                </translation>
                <translation lang="English (en)">
                    <text id="options-0">
                        <value>&lt;p style="text-align:end"&gt;one&lt;/p&gt;</value>
                    </text>
                    <text id="options-1">
                        <value>&lt;p style="text-align:center"&gt;two&lt;/p&gt;</value>
                    </text>
                    <text id="options-2">
                        <value>&lt;p style="text-align:start"&gt;three&lt;/p&gt;</value>
                    </text>
                    <text id="options-3">
                        <value>four</value>
                    </text>
                    <text id="/data/select_question:label">
                        <value>Correctly-aligned question label</value>
                    </text>
                </translation>
            </itext>
            <instance>
                <data id="RTL.Alignment.Test">
                    <select_question/>
                    <meta>
                        <instanceID/>
                    </meta>
                </data>
            </instance>
            <instance id="options">
                <root>
                    <item>
                        <itextId>options-0</itextId>
                        <name>one</name>
                    </item>
                    <item>
                        <itextId>options-1</itextId>
                        <name>two</name>
                    </item>
                    <item>
                        <itextId>options-2</itextId>
                        <name>three</name>
                    </item>
                    <item>
                        <itextId>options-3</itextId>
                        <name>four</name>
                    </item>
                </root>
            </instance>
            <bind nodeset="/data/select_question" type="string"/>
            <bind nodeset="/data/meta/instanceID" type="string" readonly="true()" jr:preload="uid"/>
        </model>
    </h:head>
    <h:body>
        <select ref="/data/select_question">
            <label ref="jr:itext('/data/select_question:label')"/>
            <itemset nodeset="instance('options')/root/item">
                <value ref="name"/>
                <label ref="jr:itext(itextId)"/>
            </itemset>
        </select>
    </h:body>
</h:html>

Related Issues

• https://docs.getodk.org/form-language/