Описание
Странное поведение шрифта при попытке выделить текст в слое аннотации с помощью тега mark.
Я показываю PDF-файл в модальном диалоговом окне реакции-начальной загрузки. Я пытаюсь выделить условия поиска на странице, используя свойство customTextRenderer компонента Page. Выделенный текст отображается другим шрифтом и находится не совсем в нужном месте.
Действия по воспроизведению
Шаги по воспроизведению поведения:
Код выглядит так:
<Modal show={this.state.showPDF}
onHide={this.handleClose} dialogClassName="modal-100w">
<Modal.Header closeButton>
</Modal.Header>
<Modal.Body style={{margin: "auto"}}>
<Document file={this.state.pdfURL} onLoadSuccess={(page) => this.onDocumentLoadSuccess(page)}>
<Page renderMode="svg" scale={1.0} pageNumber={1} customTextRenderer={(textItem) => this.customTextRenderer(textItem)} onLoadSuccess={(page) => this.onPageLoadSuccess(page)} />
</Document>
</Modal.Body>
</Modal>
и customTextRenderer
выглядит так:
return textItem.str
.split(this.terms[0])
.reduce((strArray, currentValue, currentIndex) => (
currentIndex === 0
? ([...strArray, currentValue])
: ([...strArray, (
// eslint-disable-next-line react/no-array-index-key
<mark key={currentIndex}>
{this.terms[0]}
</mark>
), currentValue])
), []);
}
(я думаю, взят в основном из одного из ваших образцов)
Ожидаемое поведение
Выделенный текст должен отображаться в том же месте, тем же шрифтом и в том же месте.
Дополнительная информация
Я пробовал как с svg, так и с холстом, но вижу то же поведение.
Такое же поведение было обнаружено в # 189, но мне не удалось найти обходных путей. Я также посмотрел на № 212.
Окружающая обстановка
Привет,
из-за того, как PDF-файлы отображаются, не всегда возможно, чтобы текстовый слой точно соответствовал тексту под ним. Я сожалею об этом :( Мы с Mozilla используем множество уловок для выравнивания этого текста. Я могу предложить реализовать <mark
> аналогично тому, как это делает Mozilla, поэтому с прозрачным текстом , и полупрозрачный фон. Таким образом, правильно выровненный и правильно отрисованный текст будет «просвечивать» выделение.
Я попробую. спасибо за предложение.
Это то, что я использую в своем собственном тестовом наборе. Кстати :) Не стесняйтесь копировать и вставлять!
Это сработало отлично. Большое спасибо за предложение, по какой-то причине недостаточно подумал о CSS. И спасибо за вашу работу над библиотекой! Было приятно использовать его.
Самый полезный комментарий
Это то, что я использую в своем собственном тестовом наборе. Кстати :) Не стесняйтесь копировать и вставлять!
https://github.com/wojtekmaj/react-pdf/blob/5f9a1928a4ce49f97bca2b5d5e68df63c99725c8/test/Test.less#L126 -L132