How can i implement RTL text in react-pdf?

[eliqwamo]

Hi guys, i am trying to create pdf file with text from right to left. I downloaded font and the font looking great but it's mess up with the direction of the text. any idea?

[Amin-Partovi]

Hi @eliqwamo, check this

import React from 'react';
import { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer';

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    textAlign: 'right',
    writingMode: 'horizontal-tb',
    direction: 'rtl',
  }

});

const MyPdf = () => {
  return (
    <Document>
      <Page>
        <View style={styles.container}>
          <Text >مرحبا بك</Text>
        </View>
      </Page>
    </Document>
  );
};

export default MyPdf;

I hope I have not misunderstood

[eliqwamo]

Thanks for replay @Amin-Partovi but its not working. If I have brackets or numbers above 9 everything is reversed

[Amin-Partovi]

@eliqwamo In that case, Unicode control characters may help you force your text to align from right to left.

[TheMikeyRoss]

What does that mean? how can we set RTL in react-pdf?

@eliqwamo Did you figure it out?

[sekhuat]

Hi @Amin-Partovi writingMode is not supported in React-PDF i guessed. I am try to find a way to display Asian text (e.g. Chinese char) vertically like the CSS style below.

writing-mode: vertical-rl;
text-orientation: mixed;

But since writingMode and text-Orientation is not supported by React-PDF I still can't figure out how to display text vertically. I try to avoid using rotate as rotate will cause the text (especially chinese character) display in wrong orientation. Do you have any solution?

[YuvalPeretz]

One of my better solutions:

/**
* Checks if `str` contains ANY character from the most common RTL scripts:
*   - Hebrew:       U+0590–U+05FF
*   - Arabic:       U+0600–U+06FF
*   - Syriac:       U+0700–U+074F
*   - Arabic Sup:   U+0750–U+077F
*   - Arabic Ext:   U+08A0–U+08FF
*   - Presentation Forms etc.: U+FB1D–U+FDFF, U+FE70–U+FEFC
*/
function hasRTLChars(str: string): boolean {
  const rtlPattern = /[\u0590-\u05FF\u0600-\u06FF\u0700-\u074F\u0750-\u077F\u08A0-\u08FF\uFB1D-\uFDFF\uFE70-\uFEFC]/;
  return rtlPattern.test(str);
}
  
if (hasRTLChars(children)) {
    return (
      <>
        <Text style={{ fontSize: 0, color: "transparent" }}>{"\u202B"}</Text>
        <Text wrap>
          {children}
        </Text>
      </>
    );
} else
  return (
    <Text wrap>
      {children}
    </Text>
  );

[MattGeiger]

Could you please explain what this example does?

[MattGeiger]

I'm exploring react-pdf for a project that needs multilingual support, and I'm concerned about this as a breaking issue.