Skip to content

Commit 21cd37a

Browse files
committed
review feedback
1 parent 7e40af7 commit 21cd37a

File tree

1 file changed

+7
-3
lines changed

1 file changed

+7
-3
lines changed

packages/dev/docs/pages/blog/rtl-date-time.mdx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import keyboardVideoURL from 'url:../assets/rtl-keyboard.mp4';
2020
keywords: [date picker, date, time, calendar, components, accessibility, react spectrum, react, spectrum]
2121
description: Internationalization is a core feature of our Date and Time components. We support 13 different calendar systems as well as locale-specific formatting, number systems, and 12 and 24 hour time. However, we identified an issue with our right-to-left support where in some right-to-left (RTL) languages, the format of the date and time fields was incorrect. While investigating this bug, we faced several challenges in ensuring proper date and time representation in RTL languages and implemented various strategies that we’d like to share.
2222

23-
date: 2025-03-30
23+
date: 2025-05-30
2424
author: '[Yihui Liao](https://github.com/yihuiliao)'
2525
---
2626

@@ -57,7 +57,7 @@ Below is an example of how the dates were being formatted based on user-entered
5757

5858
We first addressed time fields since they were easier to fix. As mentioned earlier, the segments in time fields for RTL languages were flipped. We learned that regardless of locale, all time fields should follow the `HH:MM` format. Knowing this, we could apply a direction of left-to-right (LTR) on the numeric values across all segments in a time field. We could do this by wrapping the time field in a `<bdo>` tag and setting the `dir` attribute to `ltr` which would override the current text direction from `rtl` to `ltr`.
5959

60-
However, instead of changing the DOM structure and introducing potential side effects, we chose to use the [LRI (left-to-right isolate) Unicode character](https://www.w3.org/International/questions/qa-bidi-unicode-controls) to encapsulate the time segments and force an LTR direction. This sets the text direction to `ltr` and isolates the time field from the surrounding text. Adding this Unicode character is the equivalent of wrapping the time segments in a `<bdo>` tag but offers several advantages. Since the character is invisible, there are no visual changes, and by adding it as a siblings to the segments, we avoided major structural changes to the DOM. Additionally, by enforcing a LTR direction, we no longer had to worry about whether the time field consisted of placeholders or numeric values. Lastly, it ensured that when a date field included a time, that the time field appeared in the correct order with respect to the date field (e.g. `8:45 1/31/2025` instead of `1/31/2025 8:45`).
60+
However, instead of changing the DOM structure and introducing potential side effects, we chose to use the [LRI (left-to-right isolate) Unicode character](https://www.w3.org/International/questions/qa-bidi-unicode-controls) to encapsulate the time segments and force an LTR direction. This sets the text direction to `ltr` and isolates the time field from the surrounding text. Adding this Unicode character is the equivalent of wrapping the time segments in a `<bdo>` tag but offers several advantages. Since the character is invisible, there are no visual changes, and by adding it as a sibling to the segments, we avoided major structural changes to the DOM. Additionally, by enforcing a LTR direction, we no longer had to worry about whether the time field consisted of placeholders or numeric values. Lastly, it ensured that when a date field included a time, that the time field appeared in the correct order with respect to the date field (e.g. `8:45 1/31/2025` instead of `1/31/2025 8:45`).
6161

6262
Below is a simplified code example of how we utilize Unicode characters to enforce an left-to-right direction on the segments:
6363

@@ -100,9 +100,13 @@ However, this assumption proved too broad. In some locales, such as Arabic (`ar-
100100
// An example of a date field in he-IL
101101
<div>
102102
<span aria-label="day">3</span>
103+
{/*- begin highlight -*/}
103104
<span>.</span>
105+
{/*- end highlight -*/}
104106
<span aria-label="month">11</span>
105-
<span>.</span>
107+
{/*- begin highlight -*/}
108+
<span>.</span>
109+
{/*- end highlight -*/}
106110
<span aria-label="year">2020</span>
107111
</div>
108112
```

0 commit comments

Comments
 (0)