Feature: right-to-left layout support

[elsassph]

Feature description

We'll eventually want to support MENA region, which means Arabic/Hebrew which are RTL (right-to-left) languages. We will be happy to contribute.

Beyond supporting bidirectional text wrapping (a challenge for another ticket), RTL users want the whole application layout to also follow the reversed direction. In HTML, it is specified using a dir attribute.

This is important to note that the direction change can't be entirely global: in some cases the direction should NOT be flipped, for instance for the video player transport controls.

Proposal

Reversing the layout direction can be done at the node level:

1. Introduce a dir or direction property (ltr (default) or rtl),
2. If not specified, dir should be inherited from the parent node (all children of a rtl node should be rtl),
3. When dir is rtl, flip the local transforms.

Extra considerations:

• Left/Right key events should be locally reversed based on dir,
• Left/Right textAlign should be locally reversed based on dir (to be accurate though, we might have to support the equivalent of HTML's auto direction).

Working POC

We could successfully POC the layout reversal with the following change, which should have very minimal impact on application performance:

  // CoreNode.ts patch
  updateLocalTransform() {
    assertTruthy(this.scaleRotateTransform);

    // layout direction
    let x = this.props.x;
    let mountX = this.props.mountX;
    if (this.parent && this.props.dir === 'rtl') {
      const parentWidth = this.parent.props.width;
      x = parentWidth - x;
      mountX = 1 - mountX;
    }

    // rest of localTransform calculations