Does rendering a PDF file in a HTML window retain hyperlinks?

General
1

I’m currently writing the help system for my software solution which I’m creating in Adobe InDesign (CS2).

At his point I’m exporting a high res JPEG file out of InDesign (Method One), then displaying it in Xojo via a canvas. The canvas is a “scroll” and therefore can be “scrolled” to any point. From my current estimations, if printed on paper then the whole Steve Kelepouris “scrolls” thingy when finished could be some 20 meters or more (approx. 60 A4/Letter pages). Surprisingly, this solution is working fine and the Xoxo canvas can handle a very long bitmap image and able to go to the point of interest, without dealy.

The issue now becomes hyperlinks and how to employ them using a canvas and a JPEG file. Yeah, I could possibly do this via some insane (mentally challenged) method using small transparent canvas/es within the main canvas as the location - but let’s not go there at this point.

An alternate solution (Method Two) is a possibility. I have the advantage that I’m creating the graphics in InDesign and therefore can create hyperlinks and export as a PDF file. However, If I do do it that way, ARE those predefined hyperlinks picked up in the HTML window in Xojo?

If that is so, then how do I refer to those links and how do I render the PDF in high quality?

Cheers.

2

Apparently, the links are lost: only an image rendered is displayed.

Now, if you want to use an HTMLViewer, create the help files as html.

You can add in each of your html files a link to download a pdf (pdf of that page) that will be used to print (full quality) the help file.
That pdf file can also be used as a reminder ( la Xojo, the new framework help).

Ask if this is not enough clear.

Edit: The pdf file I tested was created using an html file (and png images) with internal links.
I had a sudden doubt about my links because the original file(s) was an html, so I loaded my tested pdf and clicked in a link: the link works fine (just like if I have the html file in a browser).

3

Appreciated Emile.

Pure HTML will not be able to render my pages in the way that I want. For example, I want to use certain fonts and use transparency where I want. HTML can’t do that.

Exporting out of InDesign as html, drops the transparency and also loses the fonts. Also exporting as a PDF reduces the quality of the images (slightly but noticeable).

I want everything. Create the grahics in InDesign (easy), Create the hyperlinks in InDesign (easy), export in a format that retains the links in Xojo or any other tool for creating software applications . . . (a hard task) . . . and I don’t know how to solve it.

One good thing is that I can continue to create using InDesign, then look at other possible solutions later. My hard work will not be lost except for some random solar flare :slight_smile: :frowning: . . .

4

Embedding fonts into html isn’t too hard. At least for the lovely GPRD it was the work of some minutes. What transparency problems do you have?

5

html can do that.

Of course, if you use some web blogspot software, you may fall into troubles with transparency. But you can work-around that setting the background color (instead of transparency) directly in the graphic.

BTW: I never use transparency with jpg files (I avoid using jpg files because of a lack of quality if the compression sheme is used: go to wikipedia for more information about that).

BTW: you can pack a page (as html with images) and share that / i can take some times to understand the problem(s) you are facing (do not use special fonts in it, there I do not know/remember fi I knew how to do that).

Nota: you can get an eye here:

for everything about html. It is a tremendous resource for html, not only.

Change the pdf export settings. You can set the graphics compression quality.

6

The “correct” way to author help for macOS X is to use HTML. There is a help topic in App Wrapper “Application Help” which will walk you through converting a a folder of HTML into an Apple Help Book (which being HTML based, should work on Windows with a regular HTML Viewer).

Included is the code you need for a Mac application to display the help also.

7

To be fully honest: I finally used an HTMLViewer based (html) help by accident. I found it faster to build, better looking, etc.

Before that, I started using Pictures (same look, more or less), but far less convenient when I’ve made a typo, want to add a sentence (or shrink my text to be in the Picture).

And a nice plus is… the HTMLViewer based help I use let me view web pages: sometimes I need to not rely on FireFox (or Safari) and watch how the page looks (my html page or not).

I think Sam is right here.

8

I appreciate all the advice about using HTML. But I cannot see that this can be the solution in my case.

There is NO WAY (that I can see) to provide the graphic information I need using HTML. I can’t have text and graphic elements moving around (willy nilly) all over the place, at the whim of the user resizing windows. That is pure anarchy!! :slight_smile:

My window is a “fixed” size for that exact reason. That’s the way it is in this software solution. Other future software I may write could demand more flexibility. But this isn’t one of those cases.

Here’s an example of what I’m talking about:

It’s quite involved and intricate in that there are “pointers” showing direct information. I can’t have that moving around, otherwise it would not make sense. Therefore the window is a fixed size on purpose.

So, now I need to explain things further. Don’t forget that you only have to read it, I had to actually write it :).

The below example shows a “mock” representation of the help window. The point being to try to explain the relationship between the image above and my “pseudo” links method.

The above example shows the “Help” window.

On the left pane are links. These links go to the exact position in the canvas using the Y scroll position. The number (Ypos) is temporarily shown at the bottom L/H corner (17368) in this case, to go to the Graph Editing Tools section.

This method works surprisingly well. However, if you look at the very last part of the first image, you’ll see some text that says: Refer the Graph Editing Tools section. Of course it would be great if the user could just select that text as a link (tag) and go straight there as well. I suppose the fact that the links are shown at left, then the user can simply select there, but not as direct.

The way this works means that if I do edit the original text, then the position will have to be changed. I know this is not an ideal solution, but I can’t see that re-designing it in HTML is going to fix it.

For the record, I did study HTML/CSS and also a bit of PHP (approx. 10 years ago). I did this to the point I was proficient enough to code HTML in a text editor. I thought that perhaps I could change my career. Then I realised that my competitors were people in other countries with a cost of living approx. 1/5th of here in Aus. A “level playing field” indeed!!!

So in the end, for me, it’s all about ideas.

There’s no disadvantage for me to just plod along doing what I’m doing. The images and text are all there. I can create a final PDF and e-book and also create an actual printed version.

Given that I’ve abandoned the idea of HTML, what else is there?

9

Hi Joost,

the above explanation is nice, but a bit complex for me (right now), so I will only say two things:

a. in html, using a table (then put all your objects in one “document” sized Cell), you can set the html document to a specific size (left center or right aligned).

b. you seems to believe that html is not enough good to store (and keep) data of your own. Think: Microsoft - during a time - used to save Word documents as an html file. I cannot talk much more about that because I left Word so many years ago.

In what you called “mock”, I see nothing that cannot be done using html (maybe the CheckBox and the Button ?).

Now, it is your software and you are in charge / your ideas / your implementation. Maybe some people here can share other ideas.

I nearly forget:
I love the look of that “mock” window presentation.

10

  1. When you create an HTML page, it’s possible to specify the dimensions of the page and explicitly specify where you want elements to go. This is often shunned, because it doesn’t work across different size devices.

  2. If PDF links don’t work in a HTMLViewer, then try using folderitem.launch to open the PDF in the users preferred PDF reader, which should support links.

11

Good…

What’s funny is that the pdf I checked was… from an html based document created as pdf with Safari. :wink:
(I took what I had on hand).
The links appears as links, but do not worked as links.

I love your suggestion.

12

Thanks Emile, and much appreciated - I checked out your example and it looks really good for the second image (posted above), but to achieve the detail I want in the first image, and writing that in pure HTML would be very difficult for me to do and not a path I want to go down.

That’s a good idea Sam - apologies if my wording seems ungrateful and disregards your solution, but I’ve already entertained that idea (ie. an external PDF) which is easy enough to create out of InDesign. Doing that is useful and certainly worth doing, but would be an adjunct, and not the solution I need.

If I really want what I want, (which I do), then it does seem that I have to do this via a brute force method in that I have to create “regions” within the scrolling canvas as a “pseudo link”. ie. X1,Y1 to X2,Y2.

I know it’s non-standard and likely an insane crazy solution. There would possibly be around 100 or so regions (links) which may change if I make edits to the original artwork, therefore the links would have to be updated. This is sort of ok. If I “hard-wire” in this way, and it all works, then that’s fine. I may never ever come back to edit this code or solution anyway. It is a “one-off”.

If anyone has ideas regarding tracking positions within a canvas, well that may well be my only way out.

13

Hello Steve. In our experience, even if you get the HTML hotspots going with coordinates the positioning may change when the html is rendered on different devices. This can happen even if you embed the fonts: e.g. the interline spacing is not the same between browsers. So if you go the HTML route you will have to absolute position all your text somehow. So I think you are right to do as much as possible in Adobe.

We have beta code that can transform a page by rasterising the page into a picture + creating an image map to recreate all the hyperlinks in the underlying information. This allows complex art to be guaranteed pixel-for-pixel rendering on any device. We believe this will allow a lot more creativity on the Web by giving publishers control (among other things) without requiring font downloads which can be a security risk also. But we are only testing this service at the moment. So if you send us a PDF containing hyperlinks we can process it and send back the HTML 1.1 for you. You can then display this in an HTML viewer or any broswer known to man. But we automate responses to such hyperlinks by intercepting them using Xojo web’s HandleURL (which can compile to an executable app).

Drop us a line at ask@docblaster.com if you’re interested. We are based between Melbourne and Bendigo BTW.
Cheers,
Eric

14

Thanks Eric, sounds interesting. I haven’t yet created any links in the InDesign document.

I’m not sure I understand what you are saying. Can you show an example of how this works? At this point, I’m not considering the Xojo HTML window and I have no plans to deploy on the web.

Also, I’m pretty much too far down the rabbit hole now to change things.

Cheers.

15

Steve,

Not to take you in a different direction but do you have a mechanism in Indesign (whether by JavaScript or AppleScript) to figure out where on that gargantuan picture each of the links actually are? If you can get the left, top, width, height and destination of each link, store them to a text file or in a text constant. While scrolling, create a second array of links that are currently on-screen and only check those coordinates when the user moves the mouse (to change the cursor) or clicks the mouse (to go to the link).

Is that what you’re looking for?

16

Hi.

I know it may not be what you’re looking for but I’ve frequently used pdf.js (from the mozilla foundation) to display PDFs in pure HTML. It’s an automated converter and can handle very complex documents with ease.

I haven’t integrated it in Xojo but I’ve integrated it with many tools in the past. Since it’s essentially embedding a viewer and feeding it the PDF, it shouldn’t be tood hard.

It renders PDFs with links (to the internal document and to external sites) correctly, and maintains all layout no matter how complex or colorful.

https://github.com/mozilla/pdf.js/tree/master/examples

Basic working example: https://jsfiddle.net/pdfjs/9engc9mw/

Example of complex document rendering: https://mozilla.github.io/pdf.js/web/viewer.html
(in this example you can load your own PDFs and see how they look)

(PDF.JS is under the Apache License 2.0. You should be able to use it freely as long as you include the proper disclaimers and license text by reference in your work. A caveat is that in the unlikely event that you modify the source code, you can’t patent those changes)

17

[quote=400598:@Greg O’Lone]Steve,

Not to take you in a different direction but do you have a mechanism in Indesign (whether by JavaScript or AppleScript) to figure out where on that gargantuan picture each of the links actually are? If you can get the left, top, width, height and destination of each link, store them to a text file or in a text constant. While scrolling, create a second array of links that are currently on-screen and only check those coordinates when the user moves the mouse (to change the cursor) or clicks the mouse (to go to the link).

Is that what you’re looking for?[/quote]

Thanks Greg, what you’re saying is along the lines of what I’m thinking. Also I think gargantuan does beat ginormous and humongous, so kudos to you :slight_smile:

I can export an XML file out of InDesign, so I guess it could give me pointers to the link locations.

I know I’m doing it all the wrong way, but I think I’m stuck with the way I’m doing it. That is, a reasonable solution but very difficult to update in a dynamic sense.

18

Eduardo’s suggestion looks cool if you are happy with the standard browser behavior when someone clicks on a link. Because what you supply in the PDF is pretty much as far as you can take the user unless you want to dive into PDF.js code and test test test.
My reading of Greg’s suggestion is pretty much how I understand a Web browser works internally via hit testing - e.g. an HTML viewer.
So by converting the content to an image + image map you would not to have to build such yourself, yet still do non-standard things under Xojo control when the link was clicked, such as pop up a menu or display a plackard, modal dialog box etc since you would still be in the Xojo environment, albeit Web. But the advantage with Xojo Web is you could expose the same help engine on your Web site also as a sales tool maybe. Just a thought…

19

[quote=400635:@Eric Wilson]Eduardo’s suggestion looks cool if you are happy with the standard browser behavior when someone clicks on a link. Because what you supply in the PDF is pretty much as far as you can take the user unless you want to dive into PDF.js code and test test test.
My reading of Greg’s suggestion is pretty much how I understand a Web browser works internally via hit testing - e.g. an HTML viewer.
So by converting the content to an image + image map you would not to have to build such yourself, yet still do non-standard things under Xojo control when the link was clicked, such as pop up a menu or display a plackard, modal dialog box etc since you would still be in the Xojo environment, albeit Web. But the advantage with Xojo Web is you could expose the same help engine on your Web site also as a sales tool maybe. Just a thought…[/quote]

I am currently working on a project and I may need to implement pdf.js in it (I have used it many times in the past, but never embedded in a Xojo web app). I’ll report back.

From my experience, the simplest is using pdf.js, since there’s zero work that needs to be done for it to show, but I admit I’ve never had to do anything other than display the PDF and let it be whatever it is (I usually build my help in Word or Pages and print it to PDF, as it retains all internal and external links).

20

Retaining all internal and external links means twhat? How can I access those tags/links via Xojo?

If it can’t be done easily, then I’ll say: “Thanks for all the fish”, otherwise, if someone can explain this in really simpleton terms, then . . .