TimeZone select box compatibility with RTL directions

[farhad0]

This patch fixes the time zone select box compatibility with RTL directions It sets auto direction which makes the options value compatible with both RTL and LTR directions

This patch fixes the time zone select box compatibility with RTL directions It sets auto direction which makes the options value compatible with both RTL and LTR directions

Trac ticket: https://core.trac.wordpress.org/ticket/60770

---

[swissspidy]

@farhad0 Could you perhaps add before/after screenshots so that others looking at this ticket can better understand the problem you're trying to solve? Thanks!

[farhad0]

timezone-select-box-rtl-compatibility-before-after

[farhad0]

@swissspidy
Hi,
Here you are
All RTL items are aligned and directed to right and other LTR items are in left

[drysand]

i tested the patch and it does indeed align english text LTR and RTL text RTL, however it seems to align all the optiongroup headers LTR no matter the language

sorry about the separate images, im still getting used to trac

[sabernhardt]

#63184 was marked as a duplicate.

[sabernhardt]

In RTL (fa-IR):

• ​PR 6268 aligns every optgroup plus 'UTC' and all UTC offset options to the left, and the other options align right.
• ​PR 8600 aligns the options for 'UTC' and the UTC offsets to the left, but all optgroup labels and most options align to the right.

I would like to consider using the same alignment for the 'UTC' optgroup and its option (I prefer both aligned left in Firefox but both on the right seems better in Chrome).

[farhad0]

@sabernhardt
Hi,
The Chrome detects the direction of the text and align it automatically,
This is a way which many modern applications use and this works on Chrome and may be some other browsers

[SirLouen]

Updating keywords to reflect current status.

[khoipro]

I agreed with @farhad0 so we should have test if the modern browsers already support alignment without any extra code.

[olmostblue]

Hi, I have tested this fix with Chrome, Safari, Comet and Firefox.
Everything works fine on Firefox, all the rtl text are aligned to right and latin text on the left like in the After screenshot.
With Safari and Chromium based browser all the texts in the select options are aligned to the right.

[welcher]

6.9 Beta 1 is tomorrow and this doesn't look to be ready so I'm going to move it to the 7.0 milestone.

[farhad0]

@welcher

Hi,
This issue tested and it's ready
Please review that again
Thank you

[sajib1223]

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/6268

Environment

• WordPress: 6.9
• PHP: 8.2.29
• Server: nginx/1.27.5
• Database: mysqli (Server: 8.0.44 / Client: mysqlnd 8.2.29)
• Browser: Firefox 147.0
• OS: Windows 10/11
• Theme: Twenty Twenty-Four 1.0
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.1

Actual Results

1. ✅ Issue resolved with patch.

Additional Notes

• Also Tested on Chrome 143.0.0.0, works fine.
• Also Tested on WordPress 6.6-alpha-57778-src (PR version), works fine.
• Also Tested on WordPress 7.0-alpha-61215-src, works fine.

Supplemental Artifacts

Screenshot showing correct option text alignment:

[audrasjb]

I tested the PR and it works fine on my side.
I think using dir="auto" is a good first step here, as it delegates the alignement to the user agent. Let's commit this.

[audrasjb]

In 61691:

I18N: Add dir="auto" to Timezone dropdown options.

This changeset adds dir="auto" to the Timezones dropdown located in Settings > General. With this attribute, the option alignment will be delegated to the user agent.

@see ​https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/dir.

Props farhad0, swissspidy, drysand, sabernhardt, khoipro, olmostblue, sajib1223.
Fixes #60770.

[audrasjb]

In 61692:

Coding Standards: Remove an unwanted space after [61691].

Follow-up to [61691].

Unprops audrasjb.
See #60770.