I am now making up my first pages with Sparkle and have found an annoying display problem when zooming in Safari. Go to this page and scroll down to the box near the bottom http://www.ianridpath.com/books/starchart.html
When zooming up one level, the gap between the text and the box becomes too large:
The behaviour changes again with subsequent zoom levels. I have reproduced this on multiple devices under Catalina and Mojave.
I see that something similar happens on your own site, although it’s not as noticeable. These examples are from the Page Setup page on the Sparkle site at different levels of zoom note the difference in the lines above the image at each zoom level:
Firefox by contrast is rock solid. I don’t understand the technicalities but I guess that there is a problem with the way Safari scales fonts. Any chance of a fix?
As discussed in the other thread, what you are doing there is scaling the text, not zooming the page. My safari doesn’t even have the text scaling option, and as far as I know all modern browsers only ever scale the full content.
We can’t reproduce the issue, I do see it in your screenshots, but what’s the case where this happens?
No, that was another user who was scaling the text. My Safari has only the Zoom In and Zoom Out options, i.e Command + and Command –.
I have viewed my page on two MacBook laptops running Catalina plus a third running Mojave, and two iMac desktops, one running Mojave and one running Catalina, all with the same result. (The second iMac belonged to a friend.) Chrome gives too great a gap, but does not clip the text at the bottom. I am in the UK using an English-language system.
So I am as baffled as you! Can you ask anyone else to have a look and see what results they get?
Cheers,
Ian
The gap is due to the use of system fonts (verdana). You should use a web font to get better text consistency.
The “make text larger” option messes up many websites I looked at, and while it is in theory possible to work around it, in practice it is very disruptive and I don’t think anybody using it expects things to work. We will not be supporting that in the short to medium term in Sparkle.
I understand that, and (as I said) I am not using Make Text Larger, just the usual Command Plus and Minus which zooms the whole page.
Even with a web font the rendering changes somewhat at different zoom levels in Safari, although it is fine in Firefox – your own site is an example (see my earlier screen shots). For whatever reason, Safari is not scaling fonts in the same way as Firefox. If anyone else has noticed this perhaps they can chip in.
Cheers,
Ian
You can’t 100% expect all browsers to show font rendering exactly the same because they have different rendering engines so that has to be taken into account. I don’t have any statistics but I wondering how often a user enlarges a web page.
Safari (webkit) and Chrome’s (webkit but now Blink) font rendering of you page is nearly the same. Firefox with its Geko rendering engine is different so shows a different take on rendering the font.
As I mentioned in your previous thread, your zoom shortcuts are not set up as command + and -, I think this may have much to do with the issue you’refacing. For some reason, your system, and maybe others that have experienced the same issue maybe activating the text size option when using these shortcuts. I would go into your keyboard preferences and reset the keyboard shortcuts to their default settings.
Agreed and understood. The problem that affects my page is that the box titled “The case of the missing mast” is not moving up and down along with the different text length above it. On my old pages, made with Quark 9 (would you believe), the box moved with the text.
Thanks for chipping in,
Ian
Just to reiterate the point I am trying to get across, the real problem is that boxes and pictures are not moving up and down in step with the different text lengths when I zoom. In the sample page I have linked to, there is either too much space above the box or the text gets clipped. As Greenskin noted, it happens in Safari, and to a lesser extent in Chrome, but not in Firefox. My old pages made in Quark did not suffer the problem so I suppose it is something to do with the different coding in Sparkle.
Cheers,
Ian
And to reiterate my answer, yes there is different rendering, but no actual breakage. What you see in the screenshot of our documentation there is text wrapping bumping a line above or below the wrapped image. This is not breaking the page like text clipping would be, and it’s actually a relatively rare issue because relatively few people actually zoom the pages in.
Understood, but the text on my page is being clipped, which is what my original screenshot showed, and it wasn’t happening in the old Quark 9 layouts.
Anyway, it gives me a chance to say that Sparkle is a lovely new tool for me to work with, now that I have had to abandon Quark. Once I have done a few more pages I will no doubt have a wish list of features to help improve it in future.
Cheers,
Ian
Agreed and understood. The problem that affects my page is that the box titled “The case of the missing mast” is not moving up and down along with the different text length above it. On my old pages, made with Quark 9 (would you believe), the box moved with the text.
Thanks for chipping in.
@ianrid, Oh are you meaning the text box should flow (extending its height) as you enlarge the text. If that it what you mean then the answer is simple… Sparkle works as a fixed width responsive platform and all the elements you place on the canvas is fixed and do not flow relative to one another like in what they call fluid width design.
So the solution is let you “canvas breath” (white space) and allow for adjustments (like enlarging the page) by giving the text containers extra white space at the bottom of the text container. Everything squashed up on a page can have more things go wrong with it, like zooming into the page.
Yes, I am expecting pictures and other boxes to retain their position in the text as I enlarge or shrink the page, which is what happened on my old pages made with Quark. I normally set the Page Zoom to 115% or 125% in the “Settings for this website” option in Safari, and unfortunately the result now looks wrong, as my screenshots showed. As you mentioned above, Firefox has a different rendering engine which keeps text the same at all levels of zoom, but sadly this doesn’t happen with Safari. I will experiment with web fonts to see what effect that has.
Thanks for your input,
Ian
