Skip to content

Commit

Permalink
Set lang and dir attributes on tweet bodies (#170)
Browse files Browse the repository at this point in the history
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/>.
  • Loading branch information
hanazuki authored Jun 19, 2024
1 parent bbd2bab commit 7eeac39
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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 }} />
))}
Expand Down
2 changes: 1 addition & 1 deletion packages/react-tweet/src/twitter-theme/tweet-body.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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':
Expand Down

0 comments on commit 7eeac39

Please sign in to comment.