Proposal: Right-to-left support

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"];
    }
}

[msftbot[bot]]

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!