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?