CODEWITHSUNDEEP
reactjspdftexthyperlinkreact-pdf
vertigo
vertigo

Reputation: 165

react-pdf text renders in different positions

im trying to use react-pdf in my project to display Hebrew pdf files on my page. I also want to make certain words clickable with links to other pages (like Wikipedia). I'm trying to use customTextRenderer like this (only word "על" for as an example):

            customTextRenderer={({ str, itemIndex }) => (
                str
                  .split('על')
                  .reduce((strArray, currentValue, currentIndex) => (
                    currentIndex === 0
                      ? ([...strArray, currentValue])
                      : ([...strArray, (
                        // eslint-disable-next-line react/no-array-index-key
                        <a href="/whatever" key={currentIndex}>
                            על
                        </a>
                      ), currentValue])
                  ), []))}

this is the result (small snippet):

enter image description here

as you can see the first word "על" is right on original word, but the next instances are to the left of it. they are also not the same distance to left, so its just weird. any suggestions please?

Upvotes: 1

Views: 2942

Answers (1)

vertigo
vertigo

Reputation: 165

Solution found: add direction: right to left on spans only.

.react-pdf__Page__textContent span {
    direction: rtl;
}

Upvotes: 1

Related Questions