react-pdf 文本呈现在不同的位置

Question

我正在尝试在我的项目中使用 react-pdf 在我的页面上显示希伯来语 pdf 文件。我还想让某些词可以点击并链接到其他页面（如维基百科）。我正在尝试像这样使用 customTextRenderer（仅以单词“על”为例）：

            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])
                  ), []))}

这是结果（小片段）：

如您所见，第一个单词“על”在原始单词的右边，但接下来的实例在它的左边。它们到左边的距离也不相同，所以这很奇怪。有什么建议吗？

Answer 1

找到解决方案：添加方向：仅在跨度上从右到左。

.react-pdf__Page__textContent span {
    direction: rtl;
}

react-pdf 文本呈现在不同的位置

react-pdf text renders in different positions

reactjs

pdf

text

hyperlink

react-pdf