Multi-lingual Colour-coded Cheatsheet of Keyboard Shortcuts

You’re welcome @jonray

The only problem I get now is with the arrow keys.
After opening the HTML file in my browser (Chrome) they look like this:

To fix it, I have to click Chrome’s Reload this page button.

I don’t know why this happens. Maybe my choice of font?
Please let me know if you get the same issue.

A confirmer par @Elusien
Peut être ajouter dans le Head l’encodage du texte?
Chez moi cela fonctionne.
PC 1 - Mac 1 :rofl:

To be confirmed by @Elusien
Maybe add in the Head the encoding of the text?
For me it works.
PC 1 - Mac 1 :rofl:

1 Like

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:

Before & after:

If someone is interested, here’s the updated file:
Elusien_Shotcut_Keyboard_Shortcuts_vMB02.zip (6.6 KB)

1 Like

Worked fine for me. On Chrome too.

1 Like

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.

@MusicalBox, can you try putting the following line as the first line of the HTML file:

<!DOCTYPE html>

and let us know if that sorts the problem?

No change @Elusien
Still the same problem in about 9 out of 10 attempts.

But if neither you, @jonray or @Namna experience this thing, it must be a local issue. I’ll try later with different fonts.

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.

Can you change the LEFT ARROW definition to:

    k-[v="Arrow" ][k="L"  ]:before {content: '\2190\FE0E' ;}

and see if that works?

1 Like

Pour ma part, ma version de Chrome est obsolète, il me le rappelle à chaque démarrage, mais elle fonctionne encore sur de nombreux sites.

For my part, my version of Chrome is obsolete, it reminds me every time it starts, but it still works on many sites.

1 Like

I think you found a workaround for my problem @Elusien :slight_smile:

In that case remove the 4 arrows and replace with:

    k-[v="Arrow" ][k="L"  ]:before {content: '\2190\FE0E' ;}
    k-[v="Arrow" ][k="U"  ]:before {content: '\2191\FE0E' ;}
    k-[v="Arrow" ][k="R"  ]:before {content: '\2192\FE0E' ;}
    k-[v="Arrow" ][k="D"  ]:before {content: '\2193\FE0E' ;}

Glad we could sort out Chrome’s idiosyncrasies.

2 Likes

All done and no more issues in about 10 attempts.

Thanks for the help @Elusien :+1:

1 Like

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.

2 Likes

I love the styling of @musicalbox’s version!

If it’s OK with @elusien and @musicalbox, I made a few alterations to @musicalbox’s amended script, thus:

  1. Added a background colour (ivory) which I think makes the white background of the table stand out nicely,
  2. Added a Shotcut logo at the head of the page,
  3. 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.
  4. Uploaded the HTML to a free web-server. The link is:
    https://shotcut-keyboard-shortcuts.netlify.app

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:

  1. It looks fine on my desktop and laptop, but it doesn’t collapse for viewing on tablets and mobiles,
  2. I can’t guarantee that it will be updated when new shortcuts are created in future SC versions,
  3. There’s already an “official” comprehensive webpage showing keyboard shortcuts:
    Shotcut - Keyboard Shortcut Reference

Screenshot of the webpage:

Video of the animated page upon loading:

1 Like

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.

Jon,

You can get rid of the need to have a shotcut image in the folder by using a Base64-encoded version of it.

Change the <Img> element to the text in this file:
img.txt (28.9 KB)

1 Like

How brilliant! Thanks!

@elusien - it works! But - how on earth DOES it work? Is there a tool or method of converting any image to HTML code? Just very curious!