Show TOC

Right-to-Left Support in ControlsLocate this document in the navigation structure

SAPUI5 supports RTL in controls.

Unicode defines the direction in which a browser arranges characters to form words. CSS 2.1 also provides a direction property. The dir attribute in HTML overrides the overall direction of blocks and influences the text alignment, if not set explicitly. The lang attribute does not influence the text direction.

It is possible to use document.dir for text direction. The browser supports it and it can be set in the bootstrap. However, if it is set too early, webkit seems to reset this to LTR. The <BDO> tag in HTML turns off the bidirectional algorithm: The character order is then not reversed if RTL and LTR words are mixed.

This means in a nutshell:

  • Each character inherently belongs to a RTL or LTR script (defined by Unicode). Some characters like parentheses and dots have no inherent directionality. Browsers know this.

  • Single words equal character sequences with same directionality. For these, the browser knows the text direction and handles them as a sort of blocks that get their internal text direction only from the used characters.

  • These words/sequences/"runs" are separated by the direction-neutral characters like parentheses and dots - and obviously when character directionality changes.

  • The direction in which these blocks are put next to each other depends on the base direction.

  • The default base direction of HTML is left-to-right, but can be inverted by setting the attribute "dir='rtl'", either on the <html> tag or on any subregion which should have a different base direction.

  • This base direction also determines the default text alignment, the order of columns in tables and the presentation of some direction-neutral characters: opening parentheses are still opening parentheses when RTL mode is switched. This means they render horizontally flipped.

  • The algorithm for ordering words/runs/blocks according to the base direction only covers one level of mixed directionality. To achieve deeper nesting, spans with dir attribute can be used to define a subcontext with different base direction.

  • While (as said above) words/runs internally always have the text direction implied by the used characters, this behavior can also be overridden by using the <bdo> tag or via CSS unicode-bidi:bidi-override) when the order of characters must follow the base direction regardless of the inherent character direction. For example, because the characters do not form a word but are really just a list of characters, such as in a part number.

  • The lang attribute defining the document language does not have any influence on directionality.


If SAPUI5 is configured for RTL mode, the core performs the following steps:

  1. dir="rtl" is set on the HTML tag.


    The W3C officially recommends to use the HTML attribute instead of the CSS properties as directionality is determined by content and has nothing to do with the presentation. Another reason is that CSS properties can be ignored. It is also recommended to use the <HTML> tag instead of the <BODY> tag.

  2. The respective library-RTL.css files are loaded.

    However, as notepad controls do not belong to any control library, this second step is not available. Consider developing a control library if your custom control needs to support RTL. Notepad controls can, however, use CSS that depends on the dir="rtl" attribute in the HTML, or use JavaScript to query for RTL mode and change the behavior appropriately.