Je vous accorde le point, mais pas sûr que c’est un problème d’OS. J’ai testé quelques fois avec Firefox et les flèches s’affichent normalement à tous les coups.
I’ll grant you the point, but I’m not sure it’s an OS problem.
I’ve tested it a few times with Firefox and the arrows always display normally.
EDIT: I just tested with Microsoft Edge (Chromium based) and I get the same issue as with Chrome.
I made another change based on my personal taste. I’m not a big fan of all uppercase displayed text.
It took me a while to find what to edit to stop the text from being displayed in uppercase in the right column.
Turned out it’s in the JavaScript script at the bottom of the HTML file.
Since I know nothing about JavaScript, I asked Copilot for help. After some trials and errors it finally worked:
By default the Character encoding of HTML is UTF-8. The 4 arrow chracters are the relevant UTF-8 glyphs (you can’t put HTML entities like “←” in the :content" field of a CSS psuedo-element (:before).
The default font for Chrome on Windows is “Times New Roman” (T-N-R), so if it takes a while to download the “Google” font (Roboto condensed) it will initially display in T-N-R. However T-N-R does support the UTF-8 glyphs for the arrows and nevertheless the image shows the rest of the text is in the Roboto Condensed font. So I’m afraid I’m at a loss to explain why the correct arrow glyphs are not being displayed without a refresh.
I removed “font-family: "Roboto Condensed";” from the body styles. But I still get the same problem, even with Chrome’s default font.
By the way I also tested with Opera and the arrows are displayed correctly on every attempts.
So no problems on Firefox and Opera
I only get this on Chrome and Edge.
Glad to have been of assistance. I have updated the original file in post #1 and also tidied up the margins and made the upper-case text normal mixed case.
Added a background colour (ivory) which I think makes the white background of the table stand out nicely,
Added a Shotcut logo at the head of the page,
Added a slight gentle animation so that the elements of the page fade-in and/or move up slightly upon loading. This may not be to everyone’s taste, but I think it makes the webpage look quite classy. It would be interesting to hear other peoples’ views on this.
I thought originally that it might be an idea to offer this website link as a resource for users, however there are limitations, so maybe it’s not a good idea. Limitations I can think of so far are:
It looks fine on my desktop and laptop, but it doesn’t collapse for viewing on tablets and mobiles,
I can’t guarantee that it will be updated when new shortcuts are created in future SC versions,
Ooops, forgot to post the amended HTML: Elusien - SC keyboard shortcuts HTML (MB amended).zip (24.1 KB)
(Note to all - the image (shotcut-logo-with-ivory-background.jpg) must be in the same folder as the HTML file to show the SC logo).
Also @elusien, apologies, I did this yesterday before I noticed you had made some amendments.