docs: rtl date time format blog #7936
Conversation
|
|
||
| To format the segments according to the user locale, we rely on the browser’s [Unicode Bidirectional Algorithm](https://unicode.org/reports/tr9/). However, we found that some of our CSS styles were interferring with algorithm's application, leading to incorrect formating. For instance, in `he-IL`, the proper numeric date format should be `DD.MM.YYYY`, but our date component was displaying `YYYY.MM.DD`. This issue varied across different RTL languages for date fields, but for time fields, we observed a consistent problem across all RTL languages where time segments were flipped, rendering `MM:HH` instead of the correct `HH:MM` format. | ||
|
|
||
| <RTLTimefield /> |
There was a problem hiding this comment.
i have some things i'd like to fix this image so it'll get eventually get replaced but the jist is there. wanted to have something so people could see how the blog flows with this image
|
|
||
| <Video src={keyboardVideoURL} loop autoPlay muted /> | ||
|
|
||
| As a result, we updated the keyboard navigation in right-to-left langauges to rely on the positioning of the different segments to determine which node to receive focus for an intuitive keyboard experience. |
There was a problem hiding this comment.
I'm not entirely sure what this fix entails, mind clarifying?
There was a problem hiding this comment.
This is a great deep dive! I wonder if it might help to have a short section at the start that gives a high level overview of RTL languages and how support for it is commonly implemented (mirroring, bidirectional text with mixed rtl/ltr, etc). I have a feeling that most developers are not familiar with it, and we get pretty deep into the weeds very quickly here, so we might need to explain some stuff more. Then later on, don't assume devs know what <bdo> is, what these different unicode control characters are, etc. The links are helpful, but most people won't click them so we might need just a bit more explanation of our own.
| </div> | ||
| ``` | ||
|
|
||
| Through much trial and error, we discovered that appplying the [left-to-right embedding (LRE) Unicode](https://unicode.org/reports/tr9/#Explicit_Directional_Embeddings) on the date segments allowed us to to treat the text as embedded left-to-right while preserving the right-to-left mark on the separators, ensuring that Arabic dates display in the correct format. While we could have added Unicode to the segments like we did with the time fields, we opted for the [equivalent CSS](https://unicode.org/reports/tr9/#Markup_And_Formatting) approach instead to avoid modifying the DOM. This CSS is applied on date segments with placeholder or actual values to avoid the behavior discussed earlier with shifting segments. Through additional testing, we found that we should only apply left-to-right embedding on numeric values. If the value was displayed as text (e.g. "November" instead of "11") we did not apply this CSS. |
There was a problem hiding this comment.
We might need to show how it was rendering in the incorrect cases again here. I lost track of which problem this was solving when reading it. If I remember correctly it was so that the segments were ordered in LTR but the contents of the individual segments were RTL (so as not to mess up the placeholder text)?
Closes
✅ Pull Request Checklist:
📝 Test Instructions:
🧢 Your Project: