Provide better support for RTL languages

[t-hamano]

What problem does this address?

The stylesheet for RTL languages has already been enqueued, but that alone is not sufficient. This issue lists the problems and solutions I have found regarding RTL languages.

What is your proposed solution?

Flip physical properties

CSS physical properties written inline need to be explicitly inverted for RTL languages. For example, in places like this:

ai/src/experiments/excerpt-generation/components/ExcerptInlineWrapper.tsx

Line 109 in a44e792

container.style.cssText = 'float: right;';

ai/src/features/image-generation/components/GenerateFeaturedImage.tsx

Line 93 in a44e792

marginLeft: '5px',

Always use logical properties for pages built with wp-build

Pages built with wp-build have CSS injected inline, but lack styles for RTL. It would be better to use logical properties instead of physical ones.

See WordPress/gutenberg#76505 (comment) as a reference.

For example, this should be padding-inline-start.

https://github.com/t-hamano/ai/blob/a44e792c69f3ca4d067a851f0941b2d88a5ce266/routes/ai-home/style.scss#L75

Flip icon

In RTL languages, arrows and chevron icons must be explicitly flipped horizontally. For example, in places like this:

ai/includes/Experiments/Abilities_Explorer/Admin_Page.php

Line 183 in a44e792

<a href="<?php echo esc_url( $back_url ); ?>" class="button">&larr; <?php esc_html_e( 'Back to List', 'ai' ); ?></a>

ai/src/features/image-generation/components/GenerateImageInlineModal.tsx

Line 273 in a44e792

icon={ chevronLeft }

ai/src/experiments/content-classification/components/SuggestionPanel.tsx

Line 113 in a44e792

{ suggestion.parent + ' › ' }

⚒️ Force LTR direction

#485

In some places, even though they are RTL languages, it is necessary to force LTR direction.

/*rtl:ignore*/
direction: ltr;

For example, the JSON code in Ability Explorer > Schemas.