non-latin font (Persian fonts) upside-down

I did try register Persian fonts, everything looks fine unless text gets larger than one line. this is my codes:

mock text:

export const data = {
    text_persian: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.',
    text_english: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.',
};

and this is my template:

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

const styles = StyleSheet.create({
    page: { fontFamily: "iransans" },
    textRight: { textAlign: 'right' },
});

export function invoicePdfTemplate() {
    return (
        <Document>
            <Page size="A4" style={styles.page}>
                <View>
                    <Text>
                        {data.text_english}
                    </Text>
                    <Text style={styles.textRight}>
                        {data.text_persian}
                    </Text>
                </View>
            </Page>
        </Document>
    )
}

and this is the final result:

the problem is in Persian font if the text gets larger than a line, it will be rendered upside-down

[diegomura]

I have some progress made on supporting RTL text using the style direction: rtl although it’s not yet finished. I’m clos to, but need more time unfortunately, which I lack lately 😅 Will post updates as soon as I have them

[hrkazemi]

I should mention that registering font, works fine (both URL and import).

import React from 'react';
import { PDFDownloadLink, Font } from '@react-pdf/renderer';
import { invoicePdfTemplate } from './pdfTemplate';
import font from './IRANSansWeb.ttf'

Font.register({
    family: "iransans",
    format: "truetype",
    // src: `${process.env.PUBLIC_URL}/static/fonts/IRANSansWeb.ttf`
    src: font
});

export class Gholi extends React.Component{
    render() {
        return <PDFDownloadLink document={invoicePdfTemplate()} fileName={`invoice-1.pdf`}>
            {({ blob, url, loading, error }) => {
                return <>{(loading ? 'Loading...' : 'Download now!')}</>;
            }}
        </PDFDownloadLink>
    }
}

the only problem is when the text gets larger than one line