Use more natural zooming on mobile

[snorp]

Right now you have to hit the plus/minus buttons even on mobile in order to zoom the document. This is really strange especially since pinch-to-zoom is active as well. I think the best way to go on mobile is maybe to render at a "natural" size, and let the browser control the zoom, similar to a web page.

[brendandahl]

This is what we wanted to do, but for V1 the pinch to zoom was having issues so we had to use the zoom buttons.

[snorp]

Can you elaborate on the issues? I think we could probably prioritize those for you in order to get PDF.js working well.

[wesj]

I really don't think you want the browser to do the zooming in this case. If pdf.js renders a document at 800x600, and you pinch zoom in, the browser is just going to continue to render that 800x600 content at a new higher resolution which may or may not look like crap depending on the resolution of the device and how much you've zoomed. (I assume pdf.js still uses canvas for rendering and not svg?)

[brendandahl]

@Snuffleupagus @timvandermeij Are either of you interested in working on this? It seems it shouldn't be too hard using the shared library in gaia https://github.com/mozilla-b2g/gaia/blob/master/shared/js/gesture_detector.js

[timvandermeij]

@brendandahl I'll definitely put it on my to-do list and start experimenting with it soon. https://github.com/mozilla-b2g/gaia/blob/862de8489b648a9af7e8a5b88be031b5479404ba/apps/camera/js/panzoom.js#L15 seems to have a good example, as 'transform' is used for 2-finger pinch events. It would be really great if pinch to zoom would work, as it's used quite often on mobile.

[timvandermeij]

I'm working on this. Interested users can keep an eye on https://github.com/timvandermeij/pdf.js/tree/pinch-to-zoom for the progress. It is already catching the pinch-to-zoom command on my tablet and phone, but the accuracy must be improved, as well as the actual re-rendering (I'll need to find a way to calculate the new scale with the old scale and the new middle point, or some other way).

[brendandahl]

@timvandermeij One thing we may need to do before we implement this is improve the zoom. We've talked about first just using css transforms to to scale the canvas, then start re-rendering and then once re-rendering is done show the new canvas.

[snorp]

I strongly believe the best solution here is going to be one that relies on the browser's compositor to do the transient zoom (the animation during the pinch or double tap) and then just let pdf.js redraw at the new resolution. The sad part here is that right now content is oblivious to zoom changes, and I don't think resizing the canvas to the new resolution will work. We may need to enhance the canvas spec to handle this.

[skruse]

I had some success with hammer.js. I allowed the "native" pinch of the browser (which leads to blurry PDF) and upon pinchend I redraw the PDF canvas, with scale = scale*zoom and give the canvas the css "transform: scale(1/zoom)". So all will be in the same place (especially text and anchors). Looks neat.

[timvandermeij]

@skruse I prepared a patch for implementing pinch to zoom a while ago (see #3708), also with Hammer.js, but I have not yet succeeded in getting it to work properly on mobile/tablet devices. The pinch motions caused a lot of performance and stability problems. Do you mind sharing your implementation with us? If not, could you create a pull request with your pinch to zoom implementation? Perhaps it could replace mine if it works more fluently on mobile/tablet devices. :)

[rodoabad]

Hey skruse, how were you able to calculate the zoom ratio at end of zoom?

[skruse]

var zoom = document.documentElement.clientWidth / window.innerWidth;

And I got performance issues too: One should not zoom in "too far" on a mobile device, in terms of the "scale" parameter. I guess 2 or 3 is the very maximum.

[sasikanth513]

+2 for this

[MickL]

Someone got a solution for this 2 year old issue?

[timvandermeij]

Nothing has been done about this as far as I know. I refer to my previous comment in #2582 (comment). We invite anyone to submit a PR for this once there is working code.

[rorysmorris]

Would love to see a solution for this. At the moment this is the only thing that is stopping me from using pdf.js

:(

[Manmade]

Pinch zoom would be great! I found this jquery plugin that uses pdf.js and has pinch zoom and swiping pages. http://touchpdf.net/demo/index.htm But it would be good if it was build in pdf.js from the start :-)

[ltullman]

+1 Would love to see this here.

[msvargas]

For me working more natural setting this:

<meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=10.0, minimum-scale=1.0"
    />

[KazysNoobiys]

How do I set the minimum zoom? I can reduce the image so much that it turns into a dot.

[vniehues]

I have the same question as @KazysNoobiys.
minimum-scale on the viewport doesn't affect the zooming

[bradporter]

I'm working on another work around: a transparent css layer overlaying pdf.js to handle various swipe functionality. The overlay portion works now, but I don't know what functions to call.
if(swipe=='left') ????
What function would I call in order to advance to the next page or backup to the previous page or zoom?

[WeiFei365]

save your time & life, edit your .html file like this

// delete the 'maximum-scale'
<meta name="viewport" content="width=device-width, initial-scale=1">

eg. https://github.com/mozilla/pdf.js/blob/master/web/viewer.html#L26

[438198602]

https://github.com/manuelstofer/pinchzoom is good

[cepm-nate]

I'm designing for Android and iOS. Several people mentioned modifying the meta tag in the viewer.html file to something like this:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10.0, minimum-scale=1.0" />

On Android, this does not seem to have any effect. Pinching does nothing on the PDFs in the viewer. Has anyone successfully used the native zooming on Android within the stock viewer.html? (I was able to get it working by appending javascript as mentioned above, but am curious about a strictly native approach)

[angelaki]

Any news on this? Isn't this a super desired feature? Scrolling on desktop using Ctrl+Mousewheel is so super smooth, why not just offer this behavior for pinching?

[KarstenK77]

Seven years later? No one interessted anymore in using PDF.js with gestures? Or what I have missed?

[szaimen]

🎉🎉🎉🎉🎉