pencil
pencil copied to clipboard
Can't get Links to work in Chrome or Firefox when exported as single web page
- 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.
Same situation here. Plus tested in Edge "Links to" does not work in Firefox, Chrome nor Edge.
Same here. Tested on Chrome, Edge, and IE11.
Please let me know which export template you are using when performing the export.
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.
我也遇到了同样的问题。我发现链接是有生成的,但位置偏移了,如下图
I encountered the same problem. I found that the link is generated, but the position is offset, as shown below
我找到原因了。当我设置了系统显示缩放(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.
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
I don't have a Display tab under settings either.
不好意思,是我描述的不清楚。我指的是 windows 系统的设置
Sorry, it's not clear what I described. I am talking about the settings of the windows system.
@donnelson5779 @AntoineTurmel
I tried and it fixed the issue thanks. But I think it should be fixed in Pencil.
I agree. It is not practical with modern monitors to run at 100%. Windows recommends 125% or 150% on my monitors.
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.
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 .
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);
}