Welcome to the in5 Answer Exchange! This a place to get answers about in5 (InDesign to HTML5) and make requests.
0 votes
InDesign CC 2020 v. 15.0.3
in5 v. 3.64
OS Catalina 10.15.5

Export options:
Page Format: Slider (Fade-in)
Text Rendering: SVG
Output: Web

URL and email links are showing up in the lightbox text as "image," and the hyperlink moves to a random location on the next line.

See screenshots and .indd file: https://www.dropbox.com/sh/c9vpqmohkjon8vo/AABvBwf-V6R7AxKF0_vr6_Kra?dl=0

Website: http://www.nelsonpics.com/michelenelson/loginmag/
in bugs by (120 points)
  

1 Answer

0 votes
Instead of using SVG for the Text Rendering, use Images (preserves exact appearance), and then the text is formatted properly in the lightbox. In case it helps, I also noticed that the "S" at the end of "Copy Editors" is capitalized with the All Caps style, so when that style isn't applied to the text in the lightbox, it's still a capital letter while the others are lowercase.
by (29.9k points)
Thanks for the reply. This solved the problem of the URL links showing up as images, but the hyperlinks were still showing up in the wrong place. I tried again, with Desktop Scaling set to "Best Fit" and Moblie Device Viewport Zoom set to "Use Desktop Scaling" and that fixed the problem with the hyperlinks. However, the text in the viewport on my phone is ginormous. https://www.dropbox.com/s/i8ncmny8uosopzv/mobile_lightbox.jpg?dl=0
Which device and which browser are you using to get the result in the screenshot? I tested the output on a few different devices and browsers using the export settings where the hyperlinks worked and the text was formatted properly from yesterday--Text Rendering: Images (preserves exact appearance), Mobile Device Viewport Zoom: Let in5 Choose, and Desktop Scaling: None). I also tried the export settings that you just used. Neither example shows the output enlarged like in the screenshot. The only way I can get it to look like that is if I test it on the desktop with the browser window scaled down to the size of a phone and increase the zoom on the browser to 200%. Is there a chance that the zoom might have been increased on the browser or that accessibility features might be on and enlarged it?
Hi, I really, really appreciate your help.

The text size problem wasn't on the desktop, it was on my Galaxy A10 viewed in Firefox.

I just did a new export: Text Rendering: Images (preserves exact appearance), Mobile Device Viewport Zoom: Let in5 Choose, and Desktop Scaling: None and everything looks good. I could have sworn that was the first thing I tried this morning, but there was a lot going on and it's possible that I wasn't as focused as I should have been.

I did several tests this afternoon, and I can say for sure that if I export with desktop scaling set to "best fit," no matter which Mobile Device Viewport setting I choose, the text displays on my phone like the screenshot.

r7_test3 displays enlarged test like the screenshot on my phone:
http://www.areaviiclub.com/mntest/r7_test3/

r7_test8 (the one I just did) displays everything correctly on desktop and phone:
http://www.areaviiclub.com/mntest/r7_test8/

I think I've got it!
I'm so glad you got it fixed. Yeah, I'm sure it was the Desktop Scaling set to Best Fit that was enlarging it. I think I missed that you had set it to that. I had it set to None when I was testing--no wonder I couldn't replicate it.