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

这是结果（小sn-p）：

您可以看到第一个单词“על”在原始单词的右侧，但下一个实例位于它的左侧。他们离左边的距离也不一样，所以这很奇怪。请问有什么建议吗？

Answer 1

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

.react-pdf__Page__textContent span {
    direction: rtl;
}