Simbul / baker

The HTML5 ebook framework to publish interactive books & magazines on iPad & iPhone using simply open web standards
http://bakerframework.com
1.53k stars 378 forks source link

Embed pdf within html #944

Open fobetor opened 11 years ago

fobetor commented 11 years ago

Hello, I have succesfully embeded a pdf file within a html, so when page loads it loads the pdf file, BUT... when rendered within baker, it does not let interact with the pdf.... as when it is loaded in a modal view with href. I'm using just: <object src="Sin título.pdf" type="application/x-pdf" width="100%" height="100%"> Some idea of why I cant interact with the file? thank you

folletto commented 11 years ago

Hello! What happened? Did you solve it? :)

fobetor commented 11 years ago

Hello Davide Well.. I discovered It has nothing to do with baker, but with safari ... in ios...there seem to be some limitations from apple to scrolling or touch events in iframes & embedded objects... just apple's "maniacs"... So .. no errors in baker... problems in ios safari.... I will look for another aproach....

Thank you Fernando

Davide Casali escribió:

Hello! What happened? Did you solve it? :)

— Reply to this email directly or view it on GitHub https://github.com/Simbul/baker/issues/944#issuecomment-19059721.

folletto commented 11 years ago

Thanks for the feedback. I'm sure it will help also others. :)

fobetor commented 11 years ago

I'll try to post something more when I investigate this more and get rid of my "grgrgrgrrg" about apple ;-) Davide Casali escribió:

Thanks for the feedback. I'm sure it will help also others. :)

— Reply to this email directly or view it on GitHub https://github.com/Simbul/baker/issues/944#issuecomment-19060137.

benoitchantre commented 11 years ago

@fobetor did you try with the object tag?

Update: can load the pdf with object, iframe or embed, but can't scroll. This is an issue of Safari mobile. To scroll, you need to set the height attribute to a higher value than the page height (you need to find the height of your pdf in pixels), but links inside the pdf don't work.

The solution would be to open the PDF in the modal view directly (not an html that embed the pdf), but at this time that doesn't work if you want to open a PDF contained in your file (#609)

fobetor commented 11 years ago

Hello benoitchantre Yes, i tried the object tag, and it works as you said, setting the height to something huge, ie: 768 px (ipad horizontal height) multiplied by the number of pages... That way, it can be scrolled. I'm still experimenting , trying different solutions. Trying a single pdf with several pages or embeding tags for independent pages in the same html. Or one long and continuous page, because the object pdf tag displays with an ugly grey border arround ... Its better to make a continuous page to get rid of this border. On the other hand, as ios has so many problems with interactive pdfs, the modal option is useless because the multimedia interactivity, or links to other pages, mail, external web pages, images, other pdfs etc... Does not work in ios. Thats why it should be made in html hrefs, javascript etc.... Embedding the pdf in object tags and interactivity in html5 & javascript.... I hope this helps.. I'm still testing options and knowing ios particularities...

benoitchantre commented 11 years ago

@fobetor, what do you mean by problems with interactive pdfs in the modal view, you mean in the modal view of Baker? If yes, multimedia don't work in Safari mobile, in Safari without Adobe Reader and in Preview on the desktop. Multimedia in PDF work in Adobe Reader. To make links work, you have to make hyperlinks in the PDF (or in your original document). Adobe Reader scan the text and if it found a valid url pattern, you can click on it, but that's not the behavior of other readers. If you open a PDF with Safari mobile, links work if they are properly set (example). It works the same in Baker with the modal view.

What's missing in Baker is that you can't open the pdf in the modal view when it is located in the app (with a relative path). It would need some modifications. If you know Objective-C, that shouldn't be too difficult.

The part of the code that checks for the referrer to open the link in the modal view only looks for an absolute url, not a relative url. (Wiki page about internal links)

fobetor commented 11 years ago

Benoit I'm just talking about ios & safari, and in relation to them, Baker.... indeed acrobat reader interpret multimedia PDF's in any laptop etc.. but not in mobile. I had no problems in my testing within Baker to open a local pdf ... with or without referer, but I cant tell you much more, since I havent tested except to use it within baker with the instructions they give about refere in the url and open a simple. I'm focusing more in embedding pdf documents in html as pages and addinf html sections for multimedia etc... aswell as making a good paginated css or pdf that scrolls down from page to page. I havent experimented too much with the modal views etc....

Benoît Chantre escribió:

@fobetor https://github.com/fobetor, what do you mean by problems with interactive pdfs in the modal view, you mean in the modal view of Baker? If yes, multimedia don't work in Safari mobile, in Safari without Adobe Reader and in Preview on the desktop. Multimedia in PDF work in Adobe Reader. To make links work, you have to make hyperlinks in the PDF (or in your original document). Adobe Reader scan the text and if it found a valid url pattern, you can click on it, but that's not the behavior of other readers. If you open a PDF with Safari mobile, links work if they are properly set (example) http://manuals.info.apple.com/en/ipad_user_guide.pdf. It works the same in Baker with the modal view.

What's missing in Baker is that you can't open the pdf in the modal view when it is located in the app (with a relative path). It would need some modifications. If you know Objective-C, that shouldn't be too difficult.

The part of the code that checks for the referrer to open the link in the modal view only looks for an absolute url, not a relative url. (Wiki page about internal links https://github.com/Simbul/baker/wiki/Managing-links-and-urls#internal-links)

— Reply to this email directly or view it on GitHub https://github.com/Simbul/baker/issues/944#issuecomment-19806224.

benoitchantre commented 11 years ago

@fobetor, I'm interested to know how to open at pdf in the modal view. I wasn't able to do that, can you give me an example to make it work?

About your idea to load pdf and to add interactive elements on top of it, why don't you use a simple background image in replacement of the pdf? It would be simpler for you and probably for the device.

fobetor commented 11 years ago

Well, I have made myself a "links" html page to use within Baker and test this issue. I used this two to test

This opens the Pdf from a Directory in local...and it opens as if is a page of the magazine PDF sin referer

And this is the other way PDF Baker

I hope it helps you but I think it dont open them in modal windows

Benoît Chantre escribió:

@fobetor https://github.com/fobetor, I'm interested to know how to open at pdf in the modal view. I wasn't able to do that, can you give me an example to make it work?

About your idea to load pdf and to add interactive elements on top of it, why don't you use a simple background image in replacement of the pdf? It would be simpler for you and probably for the device.

— Reply to this email directly or view it on GitHub https://github.com/Simbul/baker/issues/944#issuecomment-19813770.

benoitchantre commented 11 years ago

Thanks. I just made a new try with ?referrer=Baker at the end of the link, but it doesn't open in the modal view (the pdf is loaded directly). I'll report that in issue #609.