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.
Medio ambiente
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!
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.
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