No doubt this has been covered somewhere before, but what are the little .png images that Sparkle generates with names such as <android-chrome-196x196-20200723085815.png> and <apple-touch-icon-20200723085815.png>? Are they to do with touch screens and do I need them all on my site?
I am just getting started with Sparkle, and still feeling my way into it.
Thanks,
Ian
Hey @ianrid, welcome! When you set a website icon Sparkle creates the variants for all devices, so that itâs always shown as such. We are improving that to place the many small images in the images folder, but Iâd suggest that they are the technical counterpart to what you requested in the Sparkle user interface by setting the website icon, so yes you need them.
By âwebsite iconâ do you mean what I know as the Favicon? Currently I havenât added one. Does it have to be in any particular format, such as jpeg? In my old site, which was made with Quark, it was called favicon.ico and showed up fine.
Oh, thatâs unexpected. But yes, favicon is just one flavour, there are many different images used for bookmarks or home screen or touchbar or pinned icon or tile etc. You add an image via the site settings, website icon section.
Thanks for the explanation. In the end I decided to stick with my favicon.ico.
I am now starting to make up my first pages with Sparkle and have found one annoying display problem on this page
http://www.ianridpath.com/books/starchart.html
When zooming in and out on Safari, the text either runs short of the box with pictures near the end, or overlaps the bottom of the frame and is lost. The behaviour changes with each zoom level. (Seems to be OK on Firefox.) Is there any way to avoid this? Any advice most welcome.
I donât see the issue on Safari. I can zoom in and out quite easily and everything stays in place. Maybe you need to update your browser or maybe itâs something unique to your Safari setting that is causing the problem.
@ianrid, Like @francbrowne Iâm not seeing that either?
Unfortunately Safari is only updated per OS update so if you are running an older macOS then your Safari would not be the latest, where the independent browsers are alway updated - like Firefox.
Also make sure you have no red text boxes on the Sparkle canvas. If you do lengthen them in hight or in width so all the text shows.
Same here, no problems with Safari Version 13.1.2 when using âView > Zoom Inâ.
On the other hand, when using âView > Make Text Biggerâ, then I get this:
The text under the image is cut off.
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 âŚ
Dear All,
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.
Thanks,
Ian
Thank you for the screenshots âŚ
Iâm using the latest version of Safari: 13.1.2
At the second zoom level, I get this:
So everything seems to be okay.
The latest Safari (13) still has âMake Text Biggerâ functionality âŚ
Although Iâm not sure that has anything to do with it.
Sorry, I canât help more ⌠maybe someone else has the solution to this problem. I hope.
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.
My safari view menu isnât showing the make text bigger option either. I think only the mobile version has this option.
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 confirming that the different View menus are from different versions of Safari!
Cheers,
Ian
Hello Ian
Iâm using the Safari version on my MacBook Pro âŚ
Develop menu activated âŚ
But I have no idea, why my âViewâ menu shows options, that you donât have. Thatâs a mystery to me ⌠
Donât know if it is helpful ⌠but more screenshots for you:
Zoom level 1, 2, 3, 4 and 7 âŚ
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.
Cheers,
Ian
