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

问题描述

我试图在我的项目中使用 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])
                  ),[]))}

这是结果（小片段）：

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

解决方法

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

.react-pdf__Page__textContent span {
    direction: rtl;
}