Fix misplaced '@' in RTL post meta. #4531
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The '@' symbol was placed at the right-side of the user handle, but the correct placement is always at the left-side since the user handle is inherently LTR.
jgarplind
force-pushed
the
better-rtl-support-in-post-meta
branch
from
6395fb0
to
a290b2f
Compare
haileyok
approved these changes
Jul 7, 2024
estrattonbailey
added a commit
that referenced
this pull request
Jul 9, 2024
…cial-proof * origin/main: (126 commits) Update README.md (#4394) tweak top padding external (#4755) change `contentVisibility` to `contain` (#4752) Fix RTL text rendering for display names (#4747) Reduce the size of the inner logo in the QR code (#4746) Fix misplaced '@' in RTL post meta. (#4531) Remove broken and void back button (#4744) Ensure `/start` navigates to `/starter-pack` when clicking a link internally (#4745) Add missing `to` in StarterPackScreen.tsx string (#4743) Video compression in composer (#4638) fix slop (#4739) Update stats Run intl:extract Update Japanese translation (#4665) Update Korean localization (#4646) Update Chinese Localization (#4695) Update catalan (#4702) Update Indonesian translation (#4706) Tweak checkmark size Show feedback for Follow button in interstitials (#4738) ...
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Addresses #4529
The '@' symbol was placed at the right-side of the user handle, but the correct placement is always at the left-side since the user handle is inherently LTR.
Uses techniques from the specification: https://www.unicode.org/reports/tr9/
Detailed problem description
PostMeta.tsxcombines two separate text-nodes (handle + display name) into one wrapping text node. The BIDI algorithm (see link above) interprets the combined text as mixed LTR and RTL and applies logic as per the specification. As part of this logic, the@sign is placed on the right side (i.e. "before" in RTL terms) of the user's handle, since@is a "neutral character", and the combined text is apparently classified as RTL due to the RTL nature of the initial characters of the text (the display name).By telling the algorithm to treat the handle (including the
@character) as LTR text, this problem is mitigated.Show and tell
Before:
After:
🗒️ Note: Initially, the "After" was still justified towards the profile picture. Upon forking this repo and setting things up again, it was suddenly justified towards the right despite identical code. Now, after rebasing on top of @haileyok's changes, it looks fine again. Hence, I suspect my local environment rather than the code change to have temporarily caused the post meta to be justified to the right.
Testing
✅ Tested on Windows Edge (as shown above).
❌ Don't have the necessary equipment at hand to test on iOS.
❌ Ran into setup problems when trying Android emulator, and didn't spend time trying to set up a Development build.
in other words, it would be helpful to have someone with a fully functioning setup give throw a glance.