Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Set lang and dir attributes on tweet bodies #170

Merged
merged 1 commit into from
Jun 19, 2024
Merged

Conversation

hanazuki
Copy link
Contributor

@hanazuki hanazuki commented Jun 19, 2024

Tweets can be written in various languages. Language metadata is essential for browsers to correctly render multilingual texts because the different language uses different shapes of glyphs for the same Unicode codepoints, and the browsers must select fonts based on the intended language1.

Twitter API infers the primary language of each tweet, and this patch sets the lang attribute to the inferred language for the tweet bodies. dir="auto" is also necessary for proper rendering of texts in the right-to-left languages, such as Arabic, Hebrew, and Persian.


This test tweet in Japanese contains several Han characters which present regional variation (See 1 for details): https://twitter.com/k_hanazuki/status/1803451841684111591

  • Without the patch, incorrect glyphs (Chinese variant) are used. Actual rendering results depend on browser/system locale settings (Chrome chooses Chinese font as fallback when the preferred language is only English).
    image
  • With the patch (correct).
    image

Footnotes

  1. Regarding font selection in CJK languages: https://heistak.github.io/your-code-displays-japanese-wrong/ 2

Tweets can be written in different languages. Language metadata is
essential for browsers to correctly render multilingual texts because
the different language uses different shapes of glyphs for the same
Unicode codepoints, and the browsers must select fonts based on the
intended language[^1].

Twitter API infers the primary language of each tweet, and this patch
sets the `lang` attribute to the inferred language for the tweet
bodies. `dir="auto"` is also necessary for proper rendering of texts
in the right-to-left languages, such as Arabic, Hebrew, and Persian.

[^1]: Regarding font selection in CJK languages: <https://heistak.github.io/your-code-displays-japanese-wrong/>.
Copy link

vercel bot commented Jun 19, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
react-tweet-create-react-app ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 19, 2024 3:58pm
react-tweet-custom-tweet-dub ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 19, 2024 3:58pm
react-tweet-site ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 19, 2024 3:58pm
react-tweet-vite-app ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 19, 2024 3:58pm

Copy link

vercel bot commented Jun 19, 2024

@hanazuki is attempting to deploy a commit to the Vercel Labs Team on Vercel.

A member of the Team first needs to authorize it.

@leerob leerob merged commit 7eeac39 into vercel:main Jun 19, 2024
7 of 8 checks passed
@hanazuki hanazuki deleted the lang branch June 20, 2024 00:09
@hanazuki
Copy link
Contributor Author

Thank you for merging!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants