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

RTL changes:

Button

RTL changes:

Charts

RTL changes:

 

RTL changes:

 

RTL changes:

 

RTL changes:

 

RTL changes:

 

RTL changes:

 

RTL changes:

CheckBox

RTL changes:

Check Menu Item

RTL changes:

ChoiceBox

RTL changes:

 

RTL changes:

 

RTL changes:

ColorPicker

RTL changes:

 

RTL changes:

 

RTL changes:

 

RTL changes:

ComboBox

RTL changes:

 

RTL changes:

Hyperlink

RTL changes:

 

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

RTL changes:

 

RTL changes:

Menu

RTL changes:

 

MenuBar

see Menu

 

MenuButton

RTL changes:

 

RTL changes:

 

Menu Item

see Menu

 

PasswordField

RTL changes:

 

Pagination

RTL changes:

 

Pop-up Menu

RTL changes:

 

ProgressBar

RTL changes:

 

RTL changes:

 

ProgressIndicator

RTL changes:

 

RTL changes:

 

RTL changes:

 

RadioButton

RTL changes:

 

Radio Menu Item

RTL changes:

 

Rich Text Editor

Click images to enlarge them.

RTL changes:

 

ScrollBar

RTL changes:

 

RTL changes:

 

ScrollView

RTL changes:

 

Separator

RTL changes:

 

RTL changes:

 

Slider

RTL changes:

 

RTL changes:

 

RTL changes:

 

SplitMenuButton

RTL changes:

 

RTL changes:

 

SplitPane

RTL changes:

 

RTL changes:

 

RTL changes:

 

TabPane

RTL changes:

 

RTL changes:

 

RTL changes:

 

RTL changes:

 

RTL changes:

 

TableView

Click images to enlarge them.

RTL changes:

 

TextArea

RTL changes:

 

TextField

RTL changes:

 

TitledPane

RTL changes:

 

RTL changes:

 

ToggleButton

RTL changes:

 

RTL changes:

 

ToolBar

RTL changes:

 

RTL changes:

 

Tooltip

RTL changes:

 

TreeView

RTL changes:

Virtual Keyboard

Component Orientation feature does not apply to this component.