Rescale broken

[micred]

rescale doesn't work in git201305051429r92eab neither in online demo.

Tested with different docs and different browsers.

[coolwanglu]

Can you please post a screenshot and specify your environment?

[micred]

Screenshot is not useful since nothing happen.

Tell me if I'm wrong, I go to http://coolwanglu.github.io/pdf2htmlEX/demo/cheat.html

And in console I do:

$('#page-container').html('');
viewer = new pdf2htmlEX.Viewer({
    container_id : 'page-container', 
    sidebar_id : 'sidebar',
    outline_id : 'outline',
    page_urls : [
'cheat1.page','cheat2.page','cheat3.page','cheat4.page','cheat5.page','cheat6.page','cheat7.page','cheat8.page','cheat9.page','cheat10.page']});

and then

viewer.rescale(1.1, true);

Nothing happen.

[coolwanglu]

@micred Are you using IE8? rescale actually uses CSS transform.

[micred]

In Firefox 20 and Chromium 25 on Ubuntu 13.04 I get this:

For IE8 compatibility I will try using zoom in place of CSS transform (http://stackoverflow.com/a/7806191/930720).

[coolwanglu]

I see, rescale has been inconsistent with the content now. I'll try to fix it.

But right now rescale is not used anywhere by default. Kind of abandoned.

[micred]

Ok, no problem. Just to report. Thank you.

[micred]

I was wondering: can I use a relative unit of measurement (em in place of pt) and change font-size to zoom content?

[coolwanglu]

'em' is not likely to work, since it cascades. I've been thinking about using 'rem', which should work, but might not be a good idea for embedding documents.

On Tue, May 7, 2013 at 10:11 PM, micred notifications@github.com wrote:

I was wondering: can I use a relative unit of measurement (em in place of pt) and change font-size to zoom content?

— Reply to this email directly or view it on GitHubhttps://github.com/coolwanglu/pdf2htmlEX/issues/137#issuecomment-17544435 .

[micred]

And what about applying CSS transform to the whole page? e.g. $('#pf1').css('transform', 'scale(0.5)');

[coolwanglu]

Isn't that what is being done in the code now?

On Tue, May 7, 2013 at 10:42 PM, micred notifications@github.com wrote:

And what about applying CSS transform to the whole page?

— Reply to this email directly or view it on GitHubhttps://github.com/coolwanglu/pdf2htmlEX/issues/137#issuecomment-17546437 .

[micred]

no, now transform is applied to #pc1 and height and width are changed in #pf1

[coolwanglu]

pf is for layout, for example, you may switch among single page, double page or reading mode etc. I guess setting transform instead of width/height would make it harder, or at least more discomfortable.

On Wednesday, May 8, 2013, micred wrote:

no, now transform is applied to #pc1 and height and width are changed in

pf1

— Reply to this email directly or view it on GitHubhttps://github.com/coolwanglu/pdf2htmlEX/issues/137#issuecomment-17555213 .

[micred]

I find the problem:

.pc {
...
width: 100%;
height: 100%
...
}

The page is scaled with css transform on .pc and width and height are changed on .pf, so when I rescale div .pc is scaled both by css transform and by inherit width/height by .pf.

I think solutions can be: 1) css transform on .pc and width/height on .pd, setting absolute pc width/height. 2) css transform on .pd (where w0 and h0 are set) fixing spacing between pages.

Am I right?

[coolwanglu]

Yes, seems so. So the function was implemented when there was no pd, and has not been updated accordingly since them. I'll fix it in a few days.

[micred]

I've already fixed it, take a look at branch zoomfix of https://github.com/micred/pdf2htmlEX

I've also add fit_width/fit_height. Anyway I've not done a pull request yet because I'm not satisfied with the user experience: zoom works but, as you know, page flickers when zooming because 1) content is hidden, 2) page_frame is resized and 3) the content shown up again. I've tried to prevent hiding and putting a CSS3 transition to zoom in and zoom out, but looks bad because content (pc) is zoomed smoothly but frame (pf) is not tied to. Here a video: http://www.youtube.com/watch?v=8Re0yOcE0h4&feature=youtu.be

I have a suggestion to resolve the problem and give a better user experience but it's needed to add a div and I don't know if you agree. If we apply CSS transform to page_decoration (pd) we can have a fluid result and without flickering, but we have to add a div for layout (e.g. pl). pl will be parent of pd and will change in height as now is page_decoration (but with overflow:hidden).

What do you think about it?

[coolwanglu]

I'm not getting it. Can you please elaborate the 'but fram eis not tied to' part?

[micred]

eheh, sorry for my english :-) As you see in the video, scaling of the frame is not tied to scaling of the content. So if you want to avoid hide-show flickering you see: resize of the frame, resize and reflow of the content separately.

[coolwanglu]

Hi, now I'm coming back for this issue.

Please elaborate more about your solution with pl, I'm feeling that we can apply CSS transformation on pf without introductin a new <div>, but I'll change pf to absolute width/height

[micred]

Yes, I've applied transformation on pf but if page border is on pd results are not good, because animation is not in sync as I said above. And it's slow due to content reflow when changing pd size. Honestly I've no idea how to do it smoothly without adding a new <div>. I can apply transformation to pd but I don't like it because positioning will be mess up.

[coolwanglu]

Ah, now I truly understand what you meant 'not tied'. Let me try to figure it out...

[micred]

ok :-) let's work to a solution that let's us easily implement 2-pages view or a more advance page layout.

[coolwanglu]

Originally, pf was introduced to hold the place when pc is scaled. At that moment there was no pd.

I guess now we can move pf outside pd to do the trick, what do you think? I may create a branch for this.

[micred]

Sounds good, I can't see any drawbacks at the moment. OK create a new branch, in the weekend I'm merging my mods to it. I've also done some nice tweaks, like keeping the page view aligned while zooming.

[coolwanglu]

Oh I found something while trying to do this.

pf was introduced to help locate page and determine if a page is visible. There should be no border of it because of the offset calculation.

Now the border (of pd) and the transformation might cause problems for that part of code, let me see if it can be resolved.

[micred]

Which offset? border and padding on pd are 0px and top/bottom margin are fixed. No? I don't get the point

[coolwanglu]

I mean the broders for pd

[micred]

Border of pd should be 0px right now. I don't understand, what's the exact problem? Push the new branch so I can take a look.

[coolwanglu]

Haven't finished yet. I'll show you later.

[coolwanglu]

Please check out the rescale_fix branch. Seems that there's no problem as I predicted. Can you please test your rescale fixes there?

[micred]

Sure, I'll do as soon as I can.

[micred]

I've do my best integrating smooth scrolling as I thought but I am in a dead line. There is a time gap between CSS transform and HTML re-positioning (when changing height) that make all the stuff choppy. Anyone wants to help can see results on my rescale_fix branch, I'll dismiss it.

Anyway I find a nice way to import the changes on the main branch (without pf/pd switched).

Take a look at the pull request.

[coolwanglu]

I guess I can close this issue due to your pull request? Thanks!

[coolwanglu]

Recently I removed page_decoration without hurting the visibility test of each page. I also test the code without smooth rescaling, which seems to work, so I removed that part of code. Would you like to have a try the dev branch? Thanks!

[micred]

Sure, give me a couple of days I'm out of town.