React-pdf: Comportamiento extraño de la fuente al intentar resaltar texto en la capa de anotación con la etiqueta de marca.

Creado en 21 jun. 2019  ·  4Comentarios  ·  Fuente: wojtekmaj/react-pdf

Descripción

Comportamiento extraño de la fuente al intentar resaltar texto en la capa de anotación con la etiqueta de marca.

Estoy mostrando un pdf en un diálogo modal react-bootstrap. Estoy tratando de resaltar los términos de búsqueda en la página usando el accesorio customTextRenderer del componente Page. El texto resaltado se representa en una fuente diferente y no en la ubicación correcta.

pasos para reproducir

Pasos para reproducir el comportamiento:
El código tiene este aspecto:

<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>

y customTextRenderer ve así:

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

    }

(tomado principalmente de una de sus muestras, creo)

Comportamiento esperado

El texto resaltado debe mostrarse en la misma ubicación, con la misma fuente y en la misma ubicación.

Información Adicional
Lo intenté con svg y canvas, pero veo el mismo comportamiento.

El mismo comportamiento se encontró en # 189, pero no he tenido suerte con ninguna solución. También miré el número 212.

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

Medio ambiente

  • Navegador (si corresponde) [por ejemplo, Chrome 57, Firefox 59]: he probado la última versión de Chrome en Firefox. El comportamiento es defectuoso en ambos.
  • Versión de React-PDF [por ejemplo, 3.0.4]:
  • Versión de reacción [por ejemplo, 16.3.0]:
  • Versión del paquete web (si corresponde) [por ejemplo, 4.16.2]:
question

Comentario más útil

Eso es lo que uso en mi propio conjunto de pruebas, por cierto :) ¡Siéntete libre de copiar y pegar!

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

Todos 4 comentarios

Hola,
debido a cómo se procesan los PDF, no siempre es posible que la capa de texto coincida exactamente con el texto que se encuentra debajo. Lo siento por eso :( Hay muchos trucos que Mozilla y yo estamos usando para alinear este texto. Lo que puedo sugerir es implementar <mark > de manera similar a como lo hace Mozilla, así que con texto transparente y fondo semitransparente. De esta manera, el texto correctamente alineado y correctamente renderizado "brillará" a través de la selección.

Le daré una oportunidad. Gracias por la sugerencia.

Eso es lo que uso en mi propio conjunto de pruebas, por cierto :) ¡Siéntete libre de copiar y pegar!

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

Esto funcionó perfectamente. Muchas gracias por la sugerencia, por alguna razón no había pensado lo suficiente en CSS. ¡Y gracias por tu trabajo en la biblioteca! Ha sido un placer usarlo.

¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

douglasrcjames picture douglasrcjames  ·  4Comentarios

zambony picture zambony  ·  3Comentarios

saadq picture saadq  ·  3Comentarios

GManzato picture GManzato  ·  4Comentarios

Solitaryo picture Solitaryo  ·  5Comentarios