Investigate enabling additional pdf.js UI features

thatbudakguy commented 10 months ago

The UI for our current viewer is very different from the pdf.js v4 default. Is this because we've disabled parts of the default pdf.js UI?

Viewing a Stanford PDF from stacks: https://mozilla.github.io/pdf.js/web/viewer.html?file=https://stacks.stanford.edu/file/druid:bh502xm3351/CAS_bh502xm3351.pdf?download=true

PDF.JS Website: https://mozilla.github.io/pdf.js/ FAQ: https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions

We would like to revisit how the PDF viewer gets rendered, and if possible turn some of the default UI elements on so that they are available to users.

peetucket commented 10 months ago

After further research, it looks like the lack of default PDF toolbar as shown in Mozilla's example is by design. It seems Mozilla does not want the viewer that is used as the default in their browser to be the same one used by other websites when embedded in webpages, since this may confuse users. So they don't appear to provide a facility to just drop in the default toolbar, but instead require you to implement the UI yourself.

From the PDF.js Getting Started page:

The viewer is built on the display layer and is the UI for PDF viewer in Firefox and the other browser extensions within the project. It can be a good starting point for building your own viewer. However, we do ask if you plan to embed the viewer in your own site, that it not just be an unmodified version. Please re-skin it or build upon it.

See other people asking this question and getting this answer:

So perhaps the next step is identify which parts of the toolbar we'd like to implement (we already have zoom controls and page forward/back) and then figure out how hard it would be to add them. The functions may be available to call in the PDF.js API, so this may be an exercise in (1) design/layout, (2) looking up API docs, and (3) wiring up the design to the appropriate methods in the API.

dbranchini commented 10 months ago

Thanks, @peetucket, for investigating this further. I tried their demos/examples on Safari and Chrome and it rendered like the Firefox pdf viewer, so I thought it was built in. I suggest the following features - zoom in/out,and paging - but move that to the toolbar instead of to the left and right of the document for better usability. I'd also suggest search because it's a highly desired feature overall per conversations with @dinahhandel and @andrewjbtw, and there's currently a workaround in place that includes publishing the content to use the image viewer and/or book viewer because those include a way to search the content. That said, the most important feature in order to meet accessibility compliance is that the screen reader should enter the PDF itself and read the content (the PDF must be OCR'ed).

peetucket commented 10 months ago

Creating new tickets for the requested work. See #1816 and #1818 and #1819

peetucket commented 10 months ago

Note: for reference and potential re-use under the Apache license:

Mozilla viewer HTML page: https://github.com/mozilla/pdf.js/blob/master/web/viewer.html Mozilla viewer JS/CSS/images: https://github.com/mozilla/pdf.js/tree/master/web

sul-dlss / sul-embed

Investigate enabling additional pdf.js UI features #1791