These are two different ways to “zoom” … “Making Text Bigger” will almost always break the layout of a website … because only the text is “zoomed” (made bigger) and the size of the text frame stays the same. So the text will no longer fit in the box …
When using “Zoom In”, the whole website content is zoomed, text, text boxes and images …
Thanks for taking the time to look at this, and for your responses. The behaviour I am seeing happens with Safari both on my laptop with the latest version of Catalina and on my desktop with the most recent version of Mojave. I am using the ‘Zoom in’ facility in Safari — I don’t think Safari has a ‘make text bigger’ option anymore.
I attach two screenshots. The first is how it looks with the first Zoom In level, i.e. one step up from Actual Size. There is a big gap between text and the box below. At the second zoom level, the last couple of lines are cut off. The third level of zoom is OK again, but in the next zoom level the last line is cut off (screenshot not shown).
Firefox handles it OK. I am seeing similar behaviour on another page as well. Is it a Safari issue? I can’t see anything in my Safari Preferences that could account for this. Suggestions welcome.
That’s not how my Safari View menu looks! Nor Safari Technology Preview. Are you perhaps using the iOS version?
In any case, your screenshot is the same as my first one, i.e. too much space between the bottom of the text and the box. When I go to the next step up in Zoom, the text then overflows the box. What happens when you do that? I don’t understand the technicalities, but it looks like a font scaling problem in Safari.
Anyway, thanks for checking.
Also checked again on Safari (Desktop version 13.1.1) and I cannot recreate the issue. Everything zooms perfectly. Clearly, the only way this could possibly happen is if the text content itself is somehow getting enlarged. If this is the case, the text will overspill the text container, but I’m not sure how this can be happening on Safari Desktop. This is the page at full zoom. and as can be seen, everything is working fine.
That’s not the area I sent the screenshot of, though. Can you scroll further down and tell me what you see, please.
I notice something similar happens on your own site, although it’s not as noticeable – these examples are from the Page Setup page on your site at different levels of zoom:
Thanks for taking the trouble to capture and post these. You are showing a varying gap between text and box at the different levels of zoom, but not the cutoff of the last lines of text that I am seeing at certain levels. According to my layout, there should be a gap of just a single line between text and box.
Clearly your browser is behaving differently from mine!
Very strange that you should have a different View menu! As a wild guess – do you perhaps have a different version of Webkit loaded up?
Thanks again for taking the trouble to join in,
Ian
Okay … I just checked with a friend and on his Mac. He has the same Safari “View” menu as you have, without the “Make Text Bigger” option.
When he clicks the Safari “View” menu and at the same time presses the “Option (alt)” button on the keyboard, the text changes from “Zoom In” to “Make Text Bigger” … so the option is there hidden in the background, and for some reason it shows up on my Safari “View” menu all the time. My guess is, this may be a “leftover” from an old preferences file or something … I’m sure if I did a clean install, it would be gone …
So my menu is clearly the odd exception, and yours is the correct one!
Yes, with my Safari there is a gap … on Firefox there is no gap …
Strange.
I don’t have any special version of Webkit installed …
I wonder if it has to do with the font rendering … maybe I have a setting, that is different from yours, but I’m not sure. It would be interesting to see other screenshots from other users.
@ianrid, Are you using Web Fonts or System Fonts?
If you are using System Fonts then at times if the user doesn’t have those fonts on their computer their browser will substitute for something similar, and similar can spill over in your set sized text containers.
The Google Web Fonts are universal so will always give a consistent viewing across browsers.
Yep, we are converging here a last! As you say, it must be to do with font rendering, or scaling, although I have no understanding of the technicalities.
As to why you have different Menu choices, have a look at your Develop menu and see what you have got selected under “User Agent”, which is the second line down. I have the Default selected, but perhaps you have chosen something else (Chrome, perhaps?).
Thanks to your friend for pointing out the “Option (alt)” alternative – I didn’t know about that!
We are all learning something.
Ah! So it is a font issue …
The font should be Verdana, but my Safari version uses Geneva instead (from the font stack in the CSS file). I have Verdana installed and activated … but Safari doesn’t use it.
So that’s why we have this difference …
Newer versions of Safari don’t like certain “system fonts” because they are deemed “unsafe” (because of tracking) … Duncan wrote about this some time ago in this thread:
It seems as if your zoom in and out shortcuts are set to a non-standard key combination. The default settings in Mac are command + for zooming in and command - for zooming out. On your system you have command Ä for zoom in and Command Ö for zooming out. However, the make text bigger and smaller options use the default + and - but with the addition of Alt Command. This may be what is causing the issue. There is no option in Mac OS to change the default zoom in and out shortcuts so it maybe that if you use those shortcuts, its triggering the make text bigger and smaller options.
It is possible that you have set up zoom options in your accessibility preferences. Doing this will override the default zoom functions in OSX. If you have this option selected, you should try deselecting it and then try your default zoom functions of command + and command - again to see if that does the trick.
It is correct that I have set up my own keyboard shortcuts for certain menu commands.
I use a MacBook Pro with a Swiss German keyboard layout, that varies greatly in some areas compared to a standard US keyboard, so some of the default macOS key combinations just don’t work for me or are too inconvenient unless you want to break your fingers.
I checked my keyboard shortcut settings but strangely enough I don’t find any personalised shortcuts for the “Zoom” options.
However … as I mentioned before, I suspect an old preferences file. Ah well, I’m too lazy to look for that now and I’m not really bothered that these two options show up under the “View” menu in Safari.
I guess it will be time to do a clean install when macOS Big Sur will be released …
Did you have any further thoughts about the font scaling problem I reported on Safari? (We got rather diverted by the discussion with Shadowfax about Menus) I have reproduced it on multiple devices, and it affects your own pages as well as mine, as in the screen shots I posted above. The rendering in Firefox is rock solid, so it seems that it is a result of how Safari renders your code. Needs to be fixed as it must be affecting other users as well.
@ianrid
Hi Ian, I don’t think the screenshots you provided were from my site - I don’t have a site with such content. However, there could be some issues with the way Safari is set up on your system. The problem is we can never predict how people will have their browsers configured. If you want to test one of my sites, you could check out THIS ONE or THIS ONE and see how they render in your browser. Admittedly, these sites are not 100% Sparkle - some pages are, some are not. But it should give you an indication if you have a browser problem or if it’s a site problem.
Dear Franc,
Apologies – I thought you were part of the Sparkle operation. Please ignore the previous message.
I will have to aim my message at Duncan instead!
Cheers,
Ian
