Proposal: Right-to-left support

[dclaux]

Solves requests

• Outlook

Summary

Add a rtl Boolean property to AdaptiveCard. When set to true, the card renders in right-to-left.

Design

Adaptive renderers will look for the rtl property at the AdaptiveCard level and adjust rendering accordingly.

{
    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "rtl" : true | false, 
    "body": […..]
}

If a card is specified to render in RTL direction, here are some of the things that will change :

Column Layout

By default, the columns in a ColumnSet are rendered left-to-right in horizontal direction. This will change to right-to-left in case of RTL.

LTR with Columns and separators:

RTL with Columns and separators:

Text Alignment

• Text that would be left aligned in LTR is right aligned in RTL
• Text that would be right aligned in LTR is left aligned in RTL
• Text that would be centered in LTR remains centered in RTL

Example

LTR:

RTL:

Padding and margins

Left and right paddings/margins in LTR become right and left in RTL.

Inputs

• Text in inputs, which is left aligned in LTR, becomes right aligned in RTL. That includes both the input value and placeholder.
• Controls within an input (namely radio buttons, check boxes, the dropdown button on a combo box or the calendar button on a date picker) become right aligned in RTL

Example

LTR.

RTL:

Text directionality

Text specified in LTR languages should translate to follow RTL directionality.

An example would be : 'Hello World!' should translate to "!Hello World' in RTL.

More details here - https://dotancohen.com/howto/rtl_right_to_left.html

Down-level impact

None.

Host burden

Very low. Just update to the new Adaptive renderer which does all the work.

[matthidinger]

JavaScript workaround: while waiting on this feature to be broadly available, it is possible to solve this today using the JavaScript SDK:

AdaptiveCards.AdaptiveCard.onParseElement = (element: AdaptiveCards.CardElement, json: any) => {
    if (element instanceof AdaptiveCards.Container && typeof json["rtl"] === "boolean") {
        element.rtl = json["rtl"];
    }
}

[paulcam206]

@matthidinger - we have a request from Teams for a solution here (specifically for mobile)

[paulcam206]

here's a sample payload that renders incorrectly:

{
  "type": "AdaptiveCard",
  "body": [
    {
      "type": "ColumnSet",
      "id": "infoTag",
      "columns": [
        {
          "type": "Column",
          "width": "14px",
          "spacing": "none",
          "verticalContentAlignment": "center",
          "items": [
            {
              "type": "Image",
              "url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAcCAYAAABRVo5BAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEZSURBVHgBnZTfbcIwEMbvnPKWh7BBugEblA2gG9AROkHVTboB6gTtBowAG4BEIiSC77izwOJPYtn+HqIoyk/f+e78IURov++mRWFmRDAF4Fo+VRgCmua0QMQvZvfznXrBw4FrIloKMIEBmWeX48JauwpBT45te5ozwxIihLflqZO8VjGgL1XO9BcLeVC719e5kFypbWvXqaDR4aZCDkQ0M8iQnDE8rwAI2WD0CB7BLCm4gwwJiBvIkDr+Q4YMM/1ChtzKNY1dXyIh3lEfRPwNifL3UVxXKVvk59h15h0SRuPB8diN5TMZVJXly49kZ5Rzbzxut1yPRholw53u3VUtuyyLV3H/GNqsYJJfJQn4Zi3NtesSnxNEqM78S3hJXZAupgAAAABJRU5ErkJggg=="
            }
          ]
        },
        {
          "type": "Column",
          "width": "auto",
          "spacing": "none",
          "verticalContentAlignment": "center",
          "items": [
            {
              "type": "Container",
              "spacing": "none",
              "width": "83px",
              "minHeight": "52px",
              "verticalContentAlignment": "center",
              "backgroundImage": {
                "url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAcCAYAAABRVo5BAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAmSURBVHgB7cuxCQAACAPB6P7jphR0h3TCX39lzyrQChGJRCLxezznnAQbAwaz5QAAAABJRU5ErkJggg==",
                "fillMode": "RepeatHorizontally",
                "verticalAlignment": "center"
              },
              "items": [
                {
                  "type": "TextBlock",
                  "spacing": "none",
                  "text": "Requesting",
                  "id": "approvalStatus",
                  "color": "accent"
                }
              ]
            }
          ]
        },
        {
          "type": "Column",
          "width": "14px",
          "spacing": "none",
          "minHeight": "28px",
          "verticalContentAlignment": "center",
          "items": [
            {
              "type": "Image",
              "url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAcCAYAAABRVo5BAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEOSURBVHgBnZSNbcIwEIXvbFPJIkGwAWxQNmgmaDtB6SaswgTABjABGSEjRAgJidgYH8L8SsS+JyXy3+f3ZFuHu51xAFD7rxQCS2uPyzzvrKBFeAEfBxEqIWCqtZolgY8bNIXWunqeE/BGzsHQ2s5muzU/SeBFfR97vt+bP4iN+qRaymYcYsc4Xp2t/ZiHTgro5T5D5JSoZ9FJd7tqlAyefZ0rEqMGV/HNAr2+mKAbch37XBC4YM0FSyaIPFBKseCAlda45oBT+qW+1SrL1IgaKpbwZaQ2pilCPzqqB/8Hg1vRagXJSUqY9HpqcT/eEhVLYw6/eR5fHmnhJMvk+D7eiyPFQURasKLLpXuCFp0AlbBmcqAVJ98AAAAASUVORK5CYII="
            }
          ]
        },
        {
          "type": "Column",
          "width": "stretch",
          "items": []
        }
      ]
    },
    {
      "type": "TextBlock",
      "text": "test card",
      "id": "approvalTitle",
      "size": "Large",
      "weight": "Bolder",
      "spacing": "none",
      "wrap": true,
      "maxLines": 2
    },
    {
      "type": "Container",
      "id": "aggregatedActions",
      "items": [
        {
          "type": "ColumnSet",
          "spacing": "none",
          "columns": [
            {
              "type": "Column",
              "items": [
                {
                  "type": "TextBlock",
                  "text": "Requested by",
                  "weight": "Bolder",
                  "wrap": true,
                  "maxLines": 5
                }
              ],
              "width": "120px"
            },
            {
              "type": "Column",
              "items": [
                {
                  "type": "TextBlock",
                  "text": "Jing Zhao",
                  "wrap": true,
                  "maxLines": 5
                }
              ],
              "width": "stretch"
            }
          ]
        },
        {
          "type": "ColumnSet",
          "spacing": "none",
          "columns": [
            {
              "type": "Column",
              "items": [
                {
                  "type": "TextBlock",
                  "text": "Pending response",
                  "weight": "Bolder",
                  "wrap": true,
                  "maxLines": 5
                }
              ],
              "width": "120px"
            },
            {
              "type": "Column",
              "items": [
                {
                  "type": "TextBlock",
                  "text": "Jing Zhao",
                  "wrap": true,
                  "maxLines": 5
                }
              ],
              "width": "stretch"
            }
          ]
        }
      ]
    },
    {
      "type": "ActionSet",
      "spacing": "Large",
      "actions": []
    }
  ],
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.2"
}

[RebeccaAnne]

This work is now tracked by #5445

[ghost]

Hi @dclaux! We've resolved this issue as a duplicate of the referenced issue per comments above. This issue will now be closed. Please feel free to track status with the isssue we've duplicated yours to. Thanks!