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

RTL is not working on p or div tag #653

Open
11 tasks done
Mohul44 opened this issue Feb 8, 2024 · 1 comment
Open
11 tasks done

RTL is not working on p or div tag #653

Mohul44 opened this issue Feb 8, 2024 · 1 comment
Labels
bug Crush'em all.

Comments

@Mohul44
Copy link

Mohul44 commented Feb 8, 2024

Decision Table

  • My issue does not look like “The HTML attribute 'xxx' is ignored” (unless we claim support for it)
  • My issue does not look like “The HTML element <yyy> is not rendered”

Good Faith Declaration

Description

the rtl tags are not working in following code

const source = {
    html: `
    <p dir="rtl">This is a paragraph of text in RTL.</p>
<p style="direction: rtl;">This is a paragraph of text in RTL.</p>

    <p>Alexa ما هو الطقس ليوم غ! (default dir!)</p>
<p dir="ltr">Alexa ما هو الطقس ليوم غد! (ltr dir!)</p>
<p dir="rtl">Alexa ما هو الطقس ليوم غد! (rtl dir!)</p>
<p style="direction: rtl;">Alexa ما هو الطقس ليوم غد! <span dir='ltr'>(rtl with inline ltr span!)</span></p>
<hr />
<p>ما هو الطقس ليوم غ! Hello World كيف حالك (default dir!)</p>
<p dir='auto'>ما هو الطقس ليوم غ! Hello World كيف حالك (auto dir!)</p>
<p dir='ltr'>ما هو الطقس ليوم غ! Hello World كيف حالك (ltr dir!)</p>
<p dir='rtl'>ما هو الطقس ليوم غ! Hello World كيف حالك (rtl dri!)</p>
<p dir='rtl'>ما هو الطقس ليوم غ! Hello World كيف حالك <span dir='ltr'>(rtl with inline ltr span!)</span></p>`
  };

i have set

<RenderHtml
source={source}
renderersProps={{
p: { enableExperimentalRtl: true },
}}
/>

React Native Information

https://snack.expo.dev/QR9QKiweTqnT7LmQzJFtW

RNRH Version

"react-native-render-html": "^6.3.4",

Tested Platforms

  • Android
  • iOS
  • MacOS

Reproduction Platforms

  • Android
  • iOS
  • MacOS

Minimal, Reproducible Example

https://snack.expo.dev/QR9QKiweTqnT7LmQzJFtW

Additional Notes

No response

@Mohul44 Mohul44 added the bug Crush'em all. label Feb 8, 2024
@fkazemi5236
Copy link

you should to set RTL into your RN app

https://reactnative.dev/blog/2016/08/19/right-to-left-support-for-react-native-apps
and after that you can use RTL in this package

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

No branches or pull requests

2 participants