Can't get Links to work in Chrome or Firefox when exported as single web page

[donnelson5779]

• Operating system: Windows 10
• Pencil version: 3.1.0 Export Document with 6 pages with links between each set of three. None of the links work when I open the Index page created in Firefox or Chrome.
  Is there a setting somewhere in the browsers or Pencil to make this work.

[kcergfalo]

Same situation here. Plus tested in Edge "Links to" does not work in Firefox, Chrome nor Edge.

[jedigirl]

Same here. Tested on Chrome, Edge, and IE11.

[dgthanhan]

Please let me know which export template you are using when performing the export.

[jedigirl]

I tried the Default HTML Template and the Clickable Prototype HTML Template. The links weren’t working on either of them. I downloaded the Pencil Showcase Template and tried to install it but while the app seemed to recognize the file it never installed anything. That last piece is probably a separate issue but I figure more information is always good.

[jxinging]

我也遇到了同样的问题。我发现链接是有生成的，但位置偏移了，如下图

I encountered the same problem. I found that the link is generated, but the position is offset, as shown below

[jxinging]

我找到原因了。当我设置了系统显示缩放(settings -> display ->scale and layout)时导出 HTML 就会出现链接位置偏移，将显示缩放设置为 100% 再导出就正常了。

I found the reason. When I set the system display scaling (settings-> display-> scale and layout), the link position will be shifted when exporting HTML. It is normal to set the display scaling to 100% and then export.

[AntoineTurmel]

I have the same issue, but I'm unable to fix it. (The link is mispositioned) I don't see Settings -> Display -> Scale and layout ? There is no Display section in Pencil

[donnelson5779]

I don't have a Display tab under settings either.

[jxinging]

不好意思，是我描述的不清楚。我指的是 windows 系统的设置

Sorry, it's not clear what I described. I am talking about the settings of the windows system.

@donnelson5779 @AntoineTurmel

[AntoineTurmel]

I tried and it fixed the issue thanks. But I think it should be fixed in Pencil.

[donnelson5779]

I agree. It is not practical with modern monitors to run at 100%. Windows recommends 125% or 150% on my monitors.

[Josch600]

I've got the same problem. If I work at windows 10 with a text scaling setting of 125% and do an export to HTML, the generated links are shifted some upside-left. It seems that the scaling factor has not been taken into account while calculating the link positions.

[mohsenuss91]

So, as @xing-tai said to fix that you must change OS "display settings" to 100% before exporting the html clickable ptototype and that works fine but it must be fixed in the source code as mentionned by @AntoineTurmel .

[PedroGranadosRamos]

Hi, The following site provide a workaround editing the script.js file with "img.onload = function()": https://stackoverflow.com/questions/16342936/how-do-i-get-natural-dimensions-of-an-image-using-javascript-or-jquery

Example: if (W && H) { if (window.lastSize && window.lastSize.W == W && window.lastSize.H == H) return;

    var imgs = document.querySelectorAll("body > div.Page img");
    imgs.forEach(function (img) {
       img.onload = function() {
           var r = Math.max(img.naturalWidth / W, img.naturalHeight / H);
        
           if (r < 1) r = 1;
           var w = Math.round(img.naturalWidth / r);
           var h = Math.round(img.naturalHeight / r);
       }