React-pdf: Странное поведение шрифта при попытке выделить текст в слое аннотации с помощью тега mark.

Созданный на 21 июн. 2019  ·  4Комментарии  ·  Источник: wojtekmaj/react-pdf

Описание

Странное поведение шрифта при попытке выделить текст в слое аннотации с помощью тега 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.

Screen Shot 2019-06-21 at 11 33 00 AM

Окружающая обстановка

  • Браузер (если применимо) [например, Chrome 57, Firefox 59]: я тестировал последнюю версию Chrome в firefox. В обоих случаях поведение глючное.
  • Версия React-PDF [например, 3.0.4]:
  • Версия React [например, 16.3.0]:
  • Версия Webpack (если применимо) [например, 4.16.2]:
question

Самый полезный комментарий

Это то, что я использую в своем собственном тестовом наборе. Кстати :) Не стесняйтесь копировать и вставлять!

https://github.com/wojtekmaj/react-pdf/blob/5f9a1928a4ce49f97bca2b5d5e68df63c99725c8/test/Test.less#L126 -L132

Все 4 Комментарий

Привет,
из-за того, как PDF-файлы отображаются, не всегда возможно, чтобы текстовый слой точно соответствовал тексту под ним. Я сожалею об этом :( Мы с Mozilla используем множество уловок для выравнивания этого текста. Я могу предложить реализовать <mark > аналогично тому, как это делает Mozilla, поэтому с прозрачным текстом , и полупрозрачный фон. Таким образом, правильно выровненный и правильно отрисованный текст будет «просвечивать» выделение.

Я попробую. спасибо за предложение.

Это то, что я использую в своем собственном тестовом наборе. Кстати :) Не стесняйтесь копировать и вставлять!

https://github.com/wojtekmaj/react-pdf/blob/5f9a1928a4ce49f97bca2b5d5e68df63c99725c8/test/Test.less#L126 -L132

Это сработало отлично. Большое спасибо за предложение, по какой-то причине недостаточно подумал о CSS. И спасибо за вашу работу над библиотекой! Было приятно использовать его.

Была ли эта страница полезной?
0 / 5 - 0 рейтинги