React-pdf: La capa de texto no se representa con el mismo color y peso de fuente

Veo lo mismo.

El texto está desactivado verticalmente. Los intervalos generados en la capa de texto especifican la familia de fuentes del pdf (g_d0_f3), pero claramente no se está cargando. Estoy usando [email protected] ([email protected]) con la aplicación create react (usa react 16.13.1). Claramente está recurriendo a la familia de fuentes sans-serif, y es probable que las coloque incorrectamente debido a esto. Tuve los mismos resultados con 4.2.0.

¿Esa familia de fuentes es correcta? El ejemplo de solo texto de pdf.js hace un poco más de trabajo para convertir esta clave de fuente interna en un nombre de fuente real.

import React, { useCallback, useState } from 'react'
import { Document, Page, pdfjs } from 'react-pdf'
import 'react-pdf/dist/esm/Page/AnnotationLayer.css'
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`

const pdf = require('./SE3E-Ch02.pdf')

const App = () => {
  const [numPages, setNumPages] = useState(-1)
  const [pageNumber, setPageNumber] = useState(1)
  const [width, setWidth] = useState(400)
  function onDocumentLoadSuccess(pdf) {
    console.log('onDocumentLoadSuccess', pdf)
    setNumPages(pdf.numPages)
  }

  const previousPage = useCallback(() => {
    setPageNumber(pageNumber - 1)
  }, [pageNumber, setPageNumber])
  const nextPage = useCallback(() => {
    setPageNumber(pageNumber + 1)
  }, [pageNumber, setPageNumber])

  return (
    <>
      <div>
        {numPages >= 1 && pageNumber !== null && pageNumber + 1 < numPages && <span onClick={previousPage}>&lt;&lt;</span>}
        <span>
          Page {pageNumber} of {numPages}
        </span>
        {numPages >= 1 && pageNumber !== null && pageNumber + 1 < numPages && <span onClick={nextPage}>&gt;&gt;</span>}
      </div>
      <div style={{ border: '1px solid #dddddd', width: 500 }}>
        <Document
          file={pdf.default}
          onLoadSuccess={onDocumentLoadSuccess}
          options={{
            cMapUrl: `//cdn.jsdelivr.net/npm/pdfjs-dist@${pdfjs.version}/cmaps/`,
            cMapPacked: true
          }}
        >
          <Page pageNumber={pageNumber} renderTextLayer={true} width={500} />
        </Document>
      </div>
    </>
  )
}

export default App

No siempre es posible reutilizar fuentes incrustadas de PDF para renderizar la capa de texto. En tales casos, PDF.js y React-PDF utilizan fuentes genéricas (serif, sans-serif, monoespacio; dependiendo de cuál sea la más aplicable) y la escalan para que coincida con el contenedor original para una buena experiencia de selección.

La capa de texto no está destinada a ser renderizada para nada más que para fines de accesibilidad y selección de texto.

Lo que más me confundió fue que estaba comparando con otras bibliotecas ( react-pdf-viewer y el visor web vanilla PDF.js) y parecían representar el texto perfectamente. Pero ese no fue realmente el caso. Simplemente habían proporcionado reglas CSS para hacer transparente el color del intervalo de la capa de texto. Pude acercarme mucho más con un CSS que obliga al pseudo estilo ::selection a heredar color: transparent . Sin esta regla adicional, mi cromo mostraba texto blanco sobre el resaltado de selección.

.react-pdf__Page__textContent  {
  color: transparent;
  opacity: 0.5;
}
.react-pdf__Page__textContent ::selection {
  background: #0000ff;
}

Parece que esto debería ser un comportamiento predeterminado o estar documentado en las preguntas frecuentes de la wiki.

Pero lo que se notó fue que el visor de PDF.js y el visor de react-pdf-viewer y el visor de PDF.js parecen usar la función renderTextLayer incorporada de src / display / text_layer.js de pdf.js. Y el fondo destacado para esos parece ajustarse mejor al texto verticalmente. Es solo un poquito más alto y se ve mejor, en mi opinión. Las capturas de pantalla se encuentran a continuación.

Tengo curiosidad , ¿debería realmente reducir a la mitad el resultado de translateY usando en TextLayerItem.alignTextItem ? Cuando realizo este cambio localmente, todos los aspectos destacados aparecen bien y centrados alrededor del texto.

| Biblioteca | Resultado |
| --- | --- |
| Visor web PDF.js | |
| react-pdf-viewer | |
| Mi aplicación CRA usando react-pdf | |