Loading...

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:

  • Title
    • Open/Close icon is the most right component in the title
    • graphic, if exists, appears on left of Open/Close icon
    • label appears on left of the graphic, if exists, otherwise it appears on left of Open/Close icon
  • Open/Close icon
    • if a panel is open, the arrow points down
    • if a panel is closed, the arrow points to left
  • Graphic
    • appears same for LTR as well as RTL orientation (graphic does not flip)
  • Label
    • right aligned
    • order of characters follows rules defined in Label chapter

Button

RTL changes:

  • Label
    • is centered
    • order of characters follows rules defined in Label chapter

Charts

RTL changes:

  • X Axis
    • the lowest number is displayed on right
    • the highest number is displayed on left
  • Y Axis
    • situated on right side of the chart
    • numbers are left aligned
  • Legend
    • graphic and its label are displayed in the following order (starting from right): 1. Graphic and 2. Label
    • series 1 is the most right series
  • Label/Title
    • is centered
    • order of characters follows rules defined in Label chapter

 

RTL changes:

  • X Axis
    • the lowest number is displayed on right
    • the highest number is displayed on left
  • Y Axis
    • situated on right side of the chart
    • numbers are left aligned
  • Legend
    • graphic and its label are displayed in the following order (starting from right): 1. Graphic and 2. Label
    • series 1 is the most right series
  • Label/Title
    • is centered
    • order of characters follows rules defined in Label chapter

 

RTL changes:

  • X Axis
    • the lowest number is displayed on right
    • the highest number is displayed on left
  • Y Axis
    • situated on right side of the chart
    • numbers are left aligned
  • Legend
    • graphic and its label are displayed in the following order (starting from right): 1. Graphic and 2. Label
    • series 1 is the most right series
  • Label/Title
    • is centered
    • order of characters follows rules defined in Label chapter

 

RTL changes:

  • X Axis
    • the lowest number is displayed on right, the highest number is displayed on left
  • Y Axis
    • situated on right side of the chart
    • numbers are left aligned
  • Legend
    • graphic and its label are displayed in the following order (starting from right): 1. Graphic and 2. Label
    • series 1 is the most right series
  • Label/Title
    • is centered
    • order of characters follows rules defined in Label chapter

 

RTL changes:

  • X Axis
    • the lowest number is displayed on right, the highest number is displayed on left
  • Y Axis
    • situated on right side of the chart
    • numbers are left aligned
  • Legend
    • graphic and its label are displayed in the following order (starting from right): 1. Graphic and 2. Label
    • series 1 is the most right series
  • Label/Title
    • is centered
    • order of characters follows rules defined in Label chapter

 

RTL changes:

  • Slice
    • no change from LTR orientation
    • appears and behaves same for LTR as well as RTL orientation
  • Legend
    • graphic and its label are displayed in the following order (starting from right): 1. Graphic and 2. Label
    • series 1 is the most right series
  • Title
    • is centered
  • Label/Title
    • order of characters follows rules defined in Label chapter

 

RTL changes:

  • X Axis
    • the lowest number is displayed on right, the highest number is displayed on left
  • Y Axis
    • situated on right side of the chart
    • numbers are left aligned
  • Legend
    • graphic and its label are displayed in the following order (starting from right): 1. Graphic and 2. Label
    • series 1 is the most right series
  • Label/Title
    • is centered
    • order of characters follows rules defined in Label chapter

CheckBox

RTL changes:

  • Check box
    • the most right component
  • Check mark
    • appears same for LTR as well as RTL orientation (check mark does not flip)
  • Label
    • right aligned
    • appears on left of the check box
    • order of characters follows rules defined in Label chapter

Check Menu Item

RTL changes:

  • Check mark
    • the most right component in the menu
    • check mark appears same for LTR as well as RTL orientation (check mark does not flip)
  • Menu item
    • right aligned
    • appears on left of the check mark
    • order of characters follows rules defined in Label chapter

ChoiceBox

RTL changes:

  • Item
    • right aligned
    • if a graphic is present it appears on left of the graphic, otherwise it is the most right component in the choice box
    • order of characters follows rules defined in Label chapter
  • Arrow
    • the most left component in the choice box
  • Graphic (if present)
    • the most right component in the choice box
    • graphic appears same for LTR as well as RTL orientation (graphic does not flip)

 

RTL changes:

  • Check mark
    • the most right component in the menu
    • check mark appears same for LTR as well as RTL orientation (check mark does not flip)
  • Item
    • right aligned
    • appears on left of the check mark
    • if a graphic is present it appears on left of the graphic
    • order of characters follows rules defined in Label chapter
  • Graphic (if present)
    • the second most right component (appears on left of the check mark)
    • graphic appears same for LTR as well as RTL orientation (graphic does not flip)

 

RTL changes:

  • Check mark
    • the most right component in the menu
    • check mark appears same for LTR as well as RTL orientation (check mark does not flip)
  • Item
    • right aligned
    • appears on left of the check mark
    • if a graphic is present it appears on left of the graphic
    • order of characters follows rules defined in Label chapter
  • Graphic (if present)
    • the second most right component in the menu (appears on left of the check mark)
    • graphic appears same for LTR as well as RTL orientation (graphic does not flip)
  • Scroll arrows
    • scroll arrows appear same for LTR as well as RTL orientation (scroll arrows do not flip)

ColorPicker

RTL changes:

  • Color preview
    • the most right component in the button/combo box/split menu button
  • Label (if present)
    • right aligned
    • appears on left of the color preview
    • order of characters follows rules defined in Label chapter
  • Arrow (combo box/split menu button)
    • the most left component in the combo box/split menu button

 

RTL changes:

  • Custom Colors
    • label is right aligned
    • saved colors start from right
    • Custom Color... hyperlink is centered
  • Label/Hyperlink
    • order of characters follows rules defined in Label chapter

 

RTL changes:

  • TitleBar
    • the most right component in the title bar is the icon (if present); icon appears same for LTR as well as RTL orientation (icon does not flip)
    • title appears on left of the icon, if present, otherwise it is the most right component in the title bar
    • Close button is the most left component in the title bar
  • ColorField:
    • white color starts from top right
  • HueBar
    • placed on left of ColorField
    • appears same for LTR as well as RTL orientation (HueBar does not flip)
  • Preview Colors
    • labels are right aligned
    • the most right color is the current color
    • the most left color is the new color
  • Settings (HSB)
    • the most right tab
    • label is right aligned
    • label is the most right component in Settings
    • slider is on left of the label
    • % is on left of the slider
    • text field is the most left component in Settings
  • Alpha
    • label is right aligned
    • label is the most right component in Alpha
    • slider is on left of the label
    • % is on left of the slider
    • text field is the most left component in Alpha
  • Buttons
    • left aligned
    • on Windows the most right button is Save and the most left button is Cancel
    • on Mac the most right button is Cancel and the most left button is Save
  • Label
    • order of characters follows rules defined in Label chapter

 

RTL changes:

  • HSB (the most right tab)
    • label is right aligned
    • label is the most right component in HSB
    • slider is on left of the label
    • % is on left of the slider
    • text field is on left of a symbol (e.g. %)
  • RGB
    • label is right aligned
    • label is the most right component in RGB
    • slider is on left of the label
    • text field on left of the slider
  • Web (the most left tab)
    • label is right aligned
    • label is the most right component in Web
    • text field is on left of the label
  • Label/Text
    • order of characters follows rules defined in Label chapter

ComboBox

RTL changes:

  • Graphic (if present)
    • the most right component in the combo box
    • graphic appears same for LTR as well as RTL orientation (graphic does not flip)
  • Item
    • right aligned
    • appears on left of the graphic, if present, otherwise it is the most right component in the combo box
    • order of characters follows rules defined in Label chapter
  • Arrow
    • the most left component in the combo box

 

RTL changes:

  • Prompt/Item
    • right aligned
    • order of characters follows rules defined in Label chapter
  • Arrow
    • the most left component in the combo box
  • Scroll bar
    • see Scroll view

RTL changes:

  • Text
    • order of characters follows rules defined in Label chapter

 

RTL changes:

  • Text
    • order of characters follows rules defined in Label chapter
  • Graphic
    • if placed on left of the hyperlink (LTR orientation), the same graphic appears on right of the hyperlink (RTL orientation)
    • graphic appears same for LTR as well as RTL orientation (graphic does not flip)

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:

  • Item
    • right aligned
    • order of characters follows rules defined in Label chapter
  • Scroll bar
    • see Scroll view

 

RTL changes:

  • Item
    • right aligned
    • the most right item in the horizontal list is the first item
    • the most left item in the horizontal list is the last item
    • order of characters follows rules defined in Label chapter
  • Scroll bar
    • see Scroll view

Menu

RTL changes:

  • Menu Bar
    • items are right aligned
    • the most right item in the menu bar is the first item
    • the most left item in the menu bar is the last item
    • order of characters follows rules defined in Label chapter
  • Menu
    • if a graphic is present it is the most right component
    • menu item is right aligned and appears on left of the graphic, if present, otherwise it is the most right component
    • arrow, if available, it is the most left component in the menu
    • menus open to left
    • order of characters follows rules defined in Label chapter
  • Graphic
    • graphic appears same for LTR as well as RTL orientation (graphic does not flip)
  • Shortcut
    • aligned to left
    • if available it appears on left of the menu item
    • shortcut appears same for LTR as well as RTL orientation (shortcut does not flip)

 

MenuBar

see Menu

 

MenuButton

RTL changes:

  • Item
    • aligned to right
    • the most right component in the menu button
    • order of characters follows rules defined in Label chapter
  • Arrow
    • the most left component in the menu button
  • Menu
    • opens below the menu bar
    • see Pop-up Menu

 

RTL changes:

  • Item
    • the most right component
    • order of characters follows rules defined in Label chapter
  • Arrow
    • the most left component in the menu button
    • points to left
  • Menu
    • opens on left of the menu button
    • see Pop-up Menu

 

Menu Item

see Menu

 

PasswordField

RTL changes:

  • Masked text
    • right aligned
    • order of characters follows rules defined in Label chapter

 

Pagination

RTL changes:

  • Page button
    • the most right button is the first page button
    • numbers are centered within page buttons
  • Scroll button
    • the right button is the "go to the previous page" button
    • the left button is the "go to the next page" button
  • Current/All Pages info
    • centered within the page
    • order of characters follows rules defined in Label chapter

 

Pop-up Menu

RTL changes:

  • Text
    • right aligned
    • the most right component in the pop-up menu
    • order of characters follows rules defined in Label chapter

 

ProgressBar

RTL changes:

  • Indefinite progress bar
    • no change from LTR orientation
    • appears and behaves same for LTR as well as RTL orientation

 

RTL changes:

  • Definite progress bar
    • goes from right to left

 

ProgressIndicator

RTL changes:

  • Indefinite progress indicator
    • no change from LTR orientation
    • appears and behaves same for LTR as well as RTL orientation

 

RTL changes:

  • Definite progress indicator
    • no change from LTR orientation
    • appears and behaves same for LTR as well as RTL orientation
  • Label
    • order of characters follows rules defined in Label chapter

 

RTL changes:

  • Check mark
    • no change from LTR orientation
    • appears and behaves same for LTR as well as RTL orientation (check mark does not flip)
  • Label
    • order of characters follows rules defined in Label chapter

 

RadioButton

RTL changes:

  • Radio button
    • the most right component
  • Label
    • right aligned
    • appears on left of the radio button
    • order of characters follows rules defined in Label chapter

 

Radio Menu Item

RTL changes:

  • Dot
    • the most right component in the menu
    • appears same for LTR as well as RTL orientation
  • Menu item
    • right aligned
    • appears on left of the dot
    • order of characters follows rules defined in Label chapter
  • Graphic (if present)
    • appears on left of the check mark
    • appears same for LTR as well as RTL orientation (graphic does not flip)

 

Rich Text Editor

Click images to enlarge them.

RTL changes:

  • Tool bar
    • the most right button in the first row is Cut
    • the most right button in the second row is Paragraph combo box
  • Text area
    • text is right aligned
    • order of characters follows rules defined in Label chapter
  • Other
    • for ComboBox and ColorPicker design see the appropriate chapters
    • new icons for Ordered and Unordered lists
    • new icons for Indent and Outdent

 

ScrollBar

RTL changes:

  • Vertical scroll bar
    • gradient is flipped (nice to have)

 

RTL changes:

  • Horizontal scroll bar
    • thumb starting position is on right

 

ScrollView

RTL changes:

  • Vertical scroll bar
    • the most left component in the scroll view
    • gradient is flipped (nice to have)
  • Horizontal scroll bar
    • thumb starting position is on right
  • Graphic
    • graphic appears same for LTR as well as RTL orientation (graphic does not flip)

 

Separator

RTL changes:

  • Vertical separator
    • appears same for LTR as well as RTL orientation

 

RTL changes:

  • Horizontal separator
    • appears same for LTR as well as RTL orientation

 

Slider

RTL changes:

  • Slider
    • appears same for LTR as well as RTL orientation
  • Thumb
    • thumb starting position is on right

 

RTL changes:

  • Slider
    • appears same for LTR as well as RTL orientation
  • Thumb
    • thumb starting position is on right

 

RTL changes:

  • Slider
    • appears same for LTR as well as RTL orientation
  • Thumb
    • thumb starting position is on right
  • Axis
    • order of characters follows rules defined in Label chapter

 

SplitMenuButton

RTL changes:

  • Graphic (if present)
    • the most right component in the split menu button
    • graphic appears same for LTR as well as RTL orientation (graphic does not flip)
  • Item
    • right aligned
    • the most right component
    • if a graphic is present the item appears on left of the graphic
    • order of characters follows rules defined in Label chapter
  • Pop-up button
    • the most left component in the split menu button
  • Pop-up menu
    • see Pop-up menu

 

RTL changes:

  • Graphic (if present)
    • the most right component in the split menu button
    • graphic appears same for LTR as well as RTL orientation (graphic does not flip)
  • Item
    • right aligned
    • the most right component in the button
    • if a graphic is present item appears on left of the graphic
    • order of characters follows rules defined in Label chapter
  • Pop-up button
    • the most left component in the split menu button
    • points to left
  • Pop-up menu
    • see Pop-up menu

 

SplitPane

RTL changes:

  • Vertical split pane
    • panes are flipped
    • gradient is flipped (nice to have)

 

RTL changes:

  • Horizontal split pane
    • appears same for LTR as well as RTL orientation

 

RTL changes:

  • Vertical split pane
    • panes are flipped
    • gradient is flipped (nice to have)
  • Horizontal split pane
    • appears same for LTR as well as RTL orientation

 

TabPane

RTL changes:

  • Tab
    • the most right tab is the first tab
    • the most left tab is the last tab
  • Graphic (if present)
    • the most right component in the tabs
    • graphic appears same for LTR as well as RTL orientation (graphic does not flip)
  • Label
    • right aligned
    • the most right component in tabs
    • if a graphic is present the label appears on left of the graphic
    • order of characters follows rules defined in Label chapter
  • Close button (if present)
    • the most left component in tabs
  • Pop-up button
    • the most left component in the tab header area

 

RTL changes:

  • Tab
    • the most right tab is the first tab
    • the most left tab is the last tab
  • Graphic (if present)
    • the most right component in tabs
    • graphic appears same for LTR as well as RTL orientation (graphic does not flip)
  • Label
    • right aligned
    • the most right component in tabs
    • if a graphic is present the label appears on left of the graphic
    • order of characters follows rules defined in Label chapter
  • Close button (if present)
    • the most left component in tabs
  • Pop-up button
    • the most left component in the tab header area

 

RTL changes:

  • Tab
    • the most left tab is the first tab
    • the most right tab is the last tab
  • Graphic (if present)
    • the most right component in tabs
    • graphic appears same for LTR as well as RTL orientation (graphic does not flip)
  • Label
    • right aligned
    • the most right component in tabs
    • if a graphic is present the label appears on left of the graphic
    • order of characters follows rules defined in Label chapter
  • Close button (if present)
    • the most left component in tabs
  • Pop-up button
    • the most right component in the tab header area
    • the arrow points to left

 

RTL changes:

  • Tab
    • the most right tab is the first tab
    • the most left tab is the last tab
  • Graphic (if present)
    • the most right component in tabs
    • graphic appears same for LTR as well as RTL orientation (graphic does not flip)
  • Label
    • right aligned
    • the most right component in tabs
    • if a graphic is present the label appears on left of the graphic
    • order of characters follows rules defined in Label chapter
  • Close button (if present)
    • the most left component in tabs
  • Pop-up button
    • the most left component in the tab header area
    • the arrow points to right

 

RTL changes:

  • Tab
    • the most right tab is the first tab
    • the most left tab is the last tab
  • Graphic (if present)
    • the most right component in tabs
    • graphic appears same for LTR as well as RTL orientation (graphic does not flip)
  • Label
    • right aligned
    • the most right component in tabs
    • if a graphic is present the label appears on left of the graphic
    • order of characters follows rules defined in Label chapter
  • Close button (if present)
    • the most left component in tabs
  • Pop-up button
    • the most left component in the tab header area
  • Pop-up menu
    • see Pop-up menu

 

TableView

Click images to enlarge them.

RTL changes:

  • Column
    • the most right column is the first colum
    • the most left column is the last column
  • Header
    • if a graphic is present it is the most right component in the column
    • label appears on left of the graphic
    • if there is no graphic, label is the most right component in the column
    • sort indication is the most left component in the column
  • Label
    • is centered
    • order of characters follows rules defined in Label chapter
  • Graphic (if present)
    • graphic appears same for LTR as well as RTL orientation (graphic does not flip)
  • Pop-up menu
    • the most left component in the table header
  • Scroll bar
    • see Scroll view

 

TextArea

RTL changes:

  • Text
    • right aligned
    • order of characters follows rules defined in Label chapter

 

TextField

RTL changes:

  • Text
    • right aligned
    • order of characters follows rules defined in Label chapter

 

TitledPane

RTL changes:

  • Title
    • Open/Close icon is the most right component in the titled pane
    • label appears on left of Open/Close icon
  • Open/Close icon
    • if a panel is open, the arrow points down
    • if a panel is closed, the arrow points to left
  • Label
    • right aligned
    • order of characters follows rules defined in Label chapter

 

RTL changes:

  • Title
    • Open/Close icon is the most right component in the titled pane
    • label appears on left of Open/Close icon
  • Open/Close icon
    • if a panel is open, the arrow points down
    • if a panel is closed, the arrow points to left
  • Label
    • right aligned
    • order of characters follows rules defined in Label chapter

 

ToggleButton

RTL changes:

  • Label
    • centered
    • order of characters follows rules defined in Label chapter

 

RTL changes:

  • Label
    • centered
    • order of characters follows rules defined in Label chapter

 

ToolBar

RTL changes:

  • Horizontal tool bar
    • the most right button is the first button
    • the most left button is the last button
  • Button
    • see Button

 

RTL changes:

  • Vertical tool bar
    • the most top button is the first button
    • the most bottom button is the last button
    • gradient is flipped
  • Button
    • see Button

 

Tooltip

RTL changes:

  • Text
    • right aligned
    • order of characters follows rules defined in Label chapter
  • "Bent page" appears on left

 

TreeView

RTL changes:

  • Open/Close icon
    • if a node is open, the arrow points down
    • if a node is closed, the arrow points to left
  • Graphic (if present)
    • appears on left of Open/Close or on right of a node name
    • there are no changes to the graphic
    • graphic appears same for LTR as well as RTL orientation (graphic does not flip)
  • Node name
    • right aligned
    • order of characters follows rules defined in Label chapter
  • Scroll bar
    • see Scroll view

Virtual Keyboard

Component Orientation feature does not apply to this component.
  • No labels

Terms of Use
• License: GPLv2
• Privacy • Trademarks • Contact Us