text not wrap correctly

[DrMisQ]

I'm using Arabic font for my pdf, everything works fine except when I have long text that needs to be wrapped, it wrap incorrectly (from down to up) instead of wrapping from up to down, any idea how can I fix the problem?

Note: English text wrap correctly without any problem, only Arabic wrap in reverse lines

[GlennFernandes]

Hey @DrMisQ which font family did you use to render arabic text. Tried a few fonts and none seem to work for me

[Shabnam-Veranloo]

i have same problem with wrapping text @GlennFernandes what is your font?

[GlennFernandes]

Helvetica gave me garbled text as mentioned here https://github.com/diegomura/react-pdf/issues/732 . Roboto and D-Din gave me empty squares. I finally switched to Lateef . Its a google font, so downloaded the ttf file and registered it

[Shabnam-Veranloo]

@GlennFernandes thanks to your response i try Lateef and other font but still i have this problem :((

[diegomura]

This seems to be related to RTL support (https://github.com/diegomura/react-pdf/issues/747). This is not something we support right now, although I made some progress already.

[buskerone]

++RTL!

[ahmadf16]

any updates?

[klay964]

updates ?

[fr60]

Any updates?

[DrMisQ]

any Updates or suggestion to solve this problem?

[bondai-fahad]

Any Updates related to RTL issue? @diegomura . I am stuck because of this problem. I really appreciate your help regarding this issue

[sadam-hussien]

Any solutions??

[kassah-mahmoud]

Any updates pls?

[sadam-hussien]

no,but iam create function which return the array of number of words in array to made each array of words inside Text tag.[image: Capture.PNG]

On Wed, Feb 16, 2022 at 10:59 AM Mahmoud Kassah @.***> wrote:

Any updates pls?

— Reply to this email directly, view it on GitHub https://github.com/diegomura/react-pdf/issues/1394#issuecomment-1041260426, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOEYEN2IQXLTANAWXTE5E63U3NROXANCNFSM473QUOFA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you commented.Message ID: @.***>

[X3rom-S]

I'm using Arabic font for my pdf, everything works fine except when I have long text that needs to be wrapped, it wrap incorrectly (from down to up) instead of wrapping from up to down, any idea how can I fix the problem?

Note: English text wrap correctly without any problem, only Arabic wrap in reverse lines

Any updates? has anyone found a solution?

Hi, I found a way Test the code below, it might work for you too.

Store the list of words in the array

const [splitedText, setSplitedText] = useState([])
useEffect(()=>{
   const _splitedText = text.split(" ");
   setSplitedText(_splitedText)
},[])

now we need styles to show the all word correctly inside a <View> tag

const styles = StyleSheet.create({
  flexRowReverse: {
      flexDirection: "row-reverse"
  },
  flexWrap: {
      flexWrap: "wrap"
  },
  ml1: {
      marginLeft: "2pt"
  }
})

then map splitedText inside View tag

<View style={[styles.flexRowReverse, styles.flexWrap]}>
      {
          splitedText.map((word, idx) => {
              return (
                <Text style={styles.ml1} key={idx}>
                  {word}
                </Text>
              );
          })
      }
</View>

[sadam-hussien]

Thank you ❤

في الأربعاء، ٢٩ يونيو ٢٠٢٢ ٥:٥١ م Sina @.***> كتب:

I'm using Arabic font for my pdf, everything works fine except when I have long text that needs to be wrapped, it wrap incorrectly (from down to up) instead of wrapping from up to down, any idea how can I fix the problem?

Note: English text wrap correctly without any problem, only Arabic wrap in reverse lines [image: Screen Shot 2021-07-06 at 3 10 25 AM] https://user-images.githubusercontent.com/37986642/124525801-42b28600-de09-11eb-9945-b6717f58686e.png

Any updates? has anyone found a solution?

Hi, I found a way Test the code below, it might work for you too.

Store the list of words in the array

const [splitedText, setSplitedText] = useState([]) useEffect(()=>{ const _splitedText = text.split(" "); setSplitedText(_splitedText) },[])

now we need styles to show the all word correctly inside a tag

const styles = StyleSheet.create({ flexRowReverse: { flexDirection: "row-reverse" }, flexWrap: { flexWrap: "wrap" }, ml1: { marginLeft: "2pt" } })

then map splitedText inside View tag

<View style={[styles.flexRowReverse, styles.flexWrap]}> { splitedText.map((word, idx) => { return ( <Text style={styles.ml1} key={idx}> {word} </Text> ); }) } </View>

— Reply to this email directly, view it on GitHub https://github.com/diegomura/react-pdf/issues/1394#issuecomment-1170157982, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOEYENZYEALP3GPMYDHGBOLVRRWGRANCNFSM473QUOFA . You are receiving this because you commented.Message ID: @.***>

[shanike]

const [splitedText, setSplitedText] = useState([])
useEffect(()=>{
   const _splitedText = text.split(" ");
   setSplitedText(_splitedText)
},[])

This can be a regular simple const splitedText = text.split(" "); (:

• without useState and without useEffect (https://beta.reactjs.org/learn/you-might-not-need-an-effect)

It doesn't need to be a state, even if there are many renders, it's a realy easy proccess to do every render it's not worth a state (:

[shanike]

Notice that if you had textAlign: "center", using @X3rom-S 's workaround you need to change it to justifyContent: "center" on the View

[canimnazli]

RTL support ?

[abolfazl-zare]

I need rtl

[dashty94]

Splitting the words works but makes loading the document TOO SLOW since it has to load a Text component for each word.

Please someone add the feature to support RTL. It is important for so many people.