Author: Jindrich Dinga

1. Introduction

This document is the user experience specification for PRD item #751242 (Enable Component Orientation):

 

2. Overview

A component orientation can be either LTR (left-to-right; default) or RTL (right-to-left), but not neutral. This setting affects appearance of the component as well as order in which LTR, RTL, and neutral character blocks (consecutive characters with the same directionality) are displayed in the component. For more information on character blocks orientation, see Label chapter.

The following chapter shows UI controls in default state (LTR) as well as RTL state.

 

3. Interaction Design

Please note that Hebrew text displayed in controls below is just for illustration purposes only and does not have to make any sense.

Accordion

Accordion LTRAccordion RTL

RTL changes:

Button

Button LTRButton RTL

RTL changes:

Charts

Stacked Bar Chart LTRStacked Bar Chart RTL

RTL changes:

 

Bubble Chart LTRBubble Chart RTL

RTL changes:

 

Stacked Area Chart LTRStacked Area Chart RTL

RTL changes:

 

Area Chart LTRArea Chart RTL

RTL changes:

 

Scatter Chart LTRScatter Chart RTL

RTL changes:

 

Pie Chart LTRPie Chart RTL

RTL changes:

 

Bar ChartBar Chart

RTL changes:

CheckBox

CheckBox LTRCheckBox RTL

RTL changes:

Check Menu Item

Check Menu Item LTRCheck Menu Item RTL

RTL changes:

ChoiceBox

ChoiceBox LTRChoiceBox RTL

RTL changes:

 

ChoiceBox Open LTRChoiceBox Open RTL

RTL changes:

 

ChoiceBox Open Graphic Indentation LTRChoiceBox Open Graphic Indentation RTL

RTL changes:

ColorPicker

Click images to enlarge them

ColorPicker Variations LTRColorPicker Variations RTL

RTL changes:

 

ColorPicker Pop-up LTRColorPicker Pop-up RTL

RTL changes:

 

ColorPicker Dialog LTRColorPicker Dialog RTL

RTL changes:

 

ColorPicker Settings LTRColorPicker Settings RTL

RTL changes:

ComboBox

ComboBox Open LTRComboBox Open RTL

RTL changes:

 

ComboBox Editable Open LTRComboBox Editable Open RTL

RTL changes:

Hyperlink

Hyperlink LTRHyperlink RTL

RTL changes:

 

Hyperlink Image LTRHyperlink Image RTL

RTL changes:

Label

If a left oriented control contains text that is left aligned, this text should become right aligned when the control changes its orientation to right. The reason for this is that it is expected that right oriented controls are used in countries where people read from right to left. Since text can contain mix of right-to-left and left-to-right scripts we should follow rules that are defined byUNICODE bidirectional algorithm.

<quote from www.w3.org website>

The result of the bidirectional algorithm depends on the overall base direction of the phrase, paragraph, block or page in which it is applied. The base direction is an important concept. It establishes a directional context that the bidi algorithm refers to at various points to decide how to handle the text.

The following example illustrates the expected behavior of the bidirectional algorithm. It involves English, a left-to-right script, and Hebrew, a right-to-left script.

Consider the following example text:

The characters in this example (and in all related examples) are stored in the computer the way they are displayed here: the first character in the file is "e", the second is "n", and the last is "6".

Suppose the predominant language of the document containing this paragraph is English. This means that the base direction is left-to-right. The correct presentation of this line would be:

The dotted lines indicate the structure of the sentence: English predominates and some Hebrew text is embedded. Achieving the correct presentation requires no additional markup since the Hebrew fragments are reversed correctly by user agents applying the bidirectional algorithm.

If, on the other hand, the predominant language of the document is Hebrew, the base direction is right-to-left. The correct presentation is therefore:

In this case, the whole sentence has been presented as right-to-left and the embedded English sequences have been properly reversed by the bidirectional algorithm.

</quote from www.w3.org website>

 

ListView

ListView Vertical LTRListView Vertical RTL

RTL changes:

 

ListView Horizontal LTRListView Horizontal RTL

RTL changes:

Menu

MenuBar LTRMenuBar RTL

RTL changes:

 

MenuBar

see Menu

 

MenuButton

MenuButton Opens Vertically LTRMenuButton Opens Vertically RTL

RTL changes:

 

MenuButton Opens Horizontally LTRMenuButton Opens Horizontally RTL

RTL changes:

 

Menu Item

see Menu

 

PasswordField

Password Field LTRPassword Field RTL

RTL changes:

 

Pagination

Pagination LTRPagination RTL

RTL changes:

 

Pop-up Menu

Pop-up Menu LTRPop-up Menu RTL

RTL changes:

 

ProgressBar

ProgressBar Indefinite LTRProgressBar Indefinite RTL

RTL changes:

 

ProgressBar Definite LTRProgressBar Definite RTL

RTL changes:

 

ProgressIndicator

ProgressIndicator Indefinite LTRProgressIndicator Indefinite RTL

RTL changes:

 

ProgressIndicator Definite LTRProgressIndicator Definite RTL

RTL changes:

 

ProgressIndicator Done LTRProgressIndicator Done RTL

RTL changes:

 

RadioButton

RadioButton LTRRadioButton RTL

RTL changes:

 

Radio Menu Item

Radio Menu Item LTRRadio Menu Item RTL

RTL changes:

 

Rich Text Editor

Click images to enlarge them.

Rich Text Editor LTRRich Text Editor RTL

RTL changes:

 

ScrollBar

ScrollBar Vertical LTRScrollBar Vertical RTL

RTL changes:

 

ScrollBar Horizontal LTRScrollBar Horizontal RTL

RTL changes:

 

ScrollView

ScrollView LTRScrollView RTL

RTL changes:

 

Separator

Separator Vertical LTRSeparator Vertical RTL

RTL changes:

 

Separator Horizontal LTRSeparator Horizontal RTL

RTL changes:

 

Slider

Slider LTRSlider RTL

RTL changes:

 

Slider Axis LTRSlider Axis RTL

RTL changes:

 

Slider Numeric Axis LTRSlider Numeric Axis RTL

RTL changes:

 

SplitMenuButton

SplitMenuButton Opens Vertically LTRSplitMenuButton Opens Vertically RTL

RTL changes:

 

SplitMenuButton Opens Horizontally LTRSplitMenuButton Opens Horizontally RTL

RTL changes:

 

SplitPane

SplitPane Vertical LTRSplitPane Vertical RTL

RTL changes:

 

SplitPane Horizontal LTRSplitPane Horizontal RTL

RTL changes:

 

SplitPane Horizontal LTRSplitPane Horizontal RTL

RTL changes:

 

TabPane

TabPane Top LTRTabPane Top RTL

RTL changes:

 

TabPane Bottom LTRTabPane Bottom RTL

RTL changes:

 

TabPane Right LTRTabPane Left RTL

RTL changes:

 

TabPane Left LTRTabPane Right RTL

RTL changes:

 

TabPane Pop-up LTRTabPane Pop-up RTL

RTL changes:

 

TableView

Click images to enlarge them.

TableView LTRTableView RTL

RTL changes:

 

TextArea

TextArea LTRTextArea RTL

RTL changes:

 

TextField

TextField LTRTextField RTL

RTL changes:

 

TitledPane

TitledPane Closed LTRTitledPane Closed RTL

RTL changes:

 

TitledPane Expanded LTRTitledPane Expanded RTL

RTL changes:

 

ToggleButton

ToggleButton Up LTRToggleButton Up RTL

RTL changes:

 

ToggleButton Down LTRToggleButton Down RTL

RTL changes:

 

ToolBar

ToolBar Horizontal LTRToolBar Horizontal RTL

RTL changes:

 

ToolBar Vertical LTRToolBar Vertical RTL

RTL changes:

 

Tooltip

Tooltip LTRTooltip RTL

RTL changes:

 

TreeView

TreeView LTRTreeView RTL

RTL changes:

Virtual Keyboard

Component Orientation feature does not apply to this component.