From 7eeac390fdbd95c3ad6c84e845479f4b0eac8190 Mon Sep 17 00:00:00 2001
From: Kasumi Hanazuki <kasumi@rollingapple.net>
Date: Thu, 20 Jun 2024 06:21:09 +0900
Subject: [PATCH] Set `lang` and `dir` attributes on tweet bodies (#170)

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/>.
---
 .../src/twitter-theme/quoted-tweet/quoted-tweet-body.tsx        | 2 +-
 packages/react-tweet/src/twitter-theme/tweet-body.tsx           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-tweet/src/twitter-theme/quoted-tweet/quoted-tweet-body.tsx b/packages/react-tweet/src/twitter-theme/quoted-tweet/quoted-tweet-body.tsx
index c5b5800..0707979 100644
--- a/packages/react-tweet/src/twitter-theme/quoted-tweet/quoted-tweet-body.tsx
+++ b/packages/react-tweet/src/twitter-theme/quoted-tweet/quoted-tweet-body.tsx
@@ -4,7 +4,7 @@ import s from './quoted-tweet-body.module.css'
 type Props = { tweet: EnrichedQuotedTweet }
 
 export const QuotedTweetBody = ({ tweet }: Props) => (
-  <p className={s.root}>
+  <p className={s.root} lang={tweet.lang} dir="auto">
     {tweet.entities.map((item, i) => (
       <span key={i} dangerouslySetInnerHTML={{ __html: item.text }} />
     ))}
diff --git a/packages/react-tweet/src/twitter-theme/tweet-body.tsx b/packages/react-tweet/src/twitter-theme/tweet-body.tsx
index 80a1aae..7e609a2 100644
--- a/packages/react-tweet/src/twitter-theme/tweet-body.tsx
+++ b/packages/react-tweet/src/twitter-theme/tweet-body.tsx
@@ -3,7 +3,7 @@ import { TweetLink } from './tweet-link.js'
 import s from './tweet-body.module.css'
 
 export const TweetBody = ({ tweet }: { tweet: EnrichedTweet }) => (
-  <p className={s.root}>
+  <p className={s.root} lang={tweet.lang} dir="auto">
     {tweet.entities.map((item, i) => {
       switch (item.type) {
         case 'hashtag':