Multi-lingual Colour-coded Cheatsheet of Keyboard Shortcuts

I have created a (not so) simple HTML that you can use to display a colour-coded cheat sheet of the keyboard shortcuts. You can display just those for Windows/Linux or for MacOS, or for both and you can change the font-size. You can relatively easily add your own shortcuts to the list (and display the shortcut keystrokes in your own language) by editing the file, where you see the comment

/*
  ####################################################################################
  # START OF KEYBOARD SHORTCUTS - YOU MAY MODIFY THESE TO REFLECT YOUR OWN SHORTCUTS #
  ####################################################################################
*/

See the posts below for more information.
Just download the following HTML file, remove its phoney “.txt” suffix and run it in a browser. Enjoy:

Shotcut_Keyboard_Shortcuts.html.txt (25.1 KB)

3 Likes

This is not approved in the docs category, which is a managed space. I maintain a page for this on the web site and there is Help > Actions and Shortcuts

That’s OK. After I submitted it I had a good look at the “Documentation” topics and felt this wasn’t a good place for it. I almost asked you to move it to “Resources”.

I processed your “Keyboard Shortcuts” webpage to get the basic info for the utility, so it shouldn’t contain any errors. Users can modify it to suit their needs, e.g. they have changed a key combination, or they want to reorder to get their “favourites” to the top of the table.

2 Likes

Yes it looks like a good resource to make a reference organized the way you prefer and include your customizations!

Related

https://www.keyboard-layout-editor.com/

Thanks for sharing this @Elusien.

I like it, but I feel that finding a particular item in the list would be easier if there was only one column (maybe with a width of around 1000 pixels) centered on the screen. I can get one single column if I increase the font size to around 32 pixels, but that makes the text too big in my opinion.

Also I found a little bug (?)
On the View > Full screen line, the last 1 of F11 is displayed outside the magenta box.

2 Likes

thanks for finding the F1 bug. I thought I’d fixe by searching for F11 before searching for F1, but I must have reverted the change. I’ll put it back.

The single column I can easily fix too.

I’m going out for the day now, but will sort it later this afternoon. Also, I am looking at an easy way of translating to other keyboards in different languages.

2 Likes

For me this is very useful - thanks @elusien for your hard work on this. It’s a useful resource to compliment this page:

Being able to add/amend my customised shortcuts is a real bonus.
I differ slightly from @musicalbox about just having one column though - for me, three columns is better (less vertical scrolling needed) - but it’s really a minor point:


I actually immediately looked at the HTML page and learned some shortcuts that I never knew about - eg hat you can advance one frame at at time with K + L, for example.
The colour coding makes it really clear. Thanks!

1 Like

You can make it display 2 columns, or a single column simply by making the browser window narrower.

1 Like

I have uploaded the latest version of the HTML file to the first post above. Just download it remove the phoney “.txt” suffix and run it in a browser.

The “F11” problem is fixed. I have also added some comments on how to tailor it to change the colours of the keys and the text displayed on the keys. I’ve reproduced that information below. Enjoy.

    #######################################################################################
    # START OF KEYBOARD SHORTCUTS                                                         #
    # ---------------------------                                                         #
    #                                                                                     #
    # You may modify these to reflect the shortcuts that you may have changed and to      #
    # include any new ones that you have created. Please note though that the keys that   #
    # use must be designed as the English version, e.g. "Ctrl", not "Strg" in German,     #
    # and "Shift", not "Maj" in Frech. You can change the names of these keys as          #
    # described in the section below on "KEY CONFIGURATION" below these definitions.      #
    # You may also re-order the shortcuts e.g. to place your favourites (the ones you use #
    # most) at the top of the tables.                                                     #
    #######################################################################################

    ###########################################################################################
    # START OF KEY CONFIGURATION                                                              #
    # --------------------------                                                              #
    #                                                                                         #
    # You may change the color of any of the keys e.g.                                        #
    # to change the "Ctrl" key from "red" to "pink" or the "Cmd" key from "navy" to "#770066" # 
    #                                                                                         #
    #                      k-[v="Ctrl"  ] {background-color: pink;}                           #
    #                      k-[v="Cmd"   ] {background-color: #770066;}                        #
    #                                                                                         #
    # You may change the text printed on the keys e.g.                                        #
    #                                                                                         #
    #  (German)            k-[v="Ctrl" ]:before {content: 'Strg';}                            #
    #  (French)            k-[v="Shift"]:before {content: 'Maj';}                             #
    #  (French)            k-[v="Key"  ][k="Ent"]:before {content: 'Entrée' ;}                #
    ###########################################################################################

2 Likes

Great, thanks @elusien!

I was able to modify the code to display one centered column.

True. But if I’m looking for one particular thing, I can do Ctrl+F to open Chrome’s Find tool.

Now I’m looking for the way to make the page display the Windows/Linux layout by default. Or only the Windows layout (I doubt I’ll ever own a Mac :slight_smile: )

1 Like

You can do this simply by changing:

        body     {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; font-family: "Roboto Mono"; font-size: 11px;}

to:

        body     {display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-between; align-items: center; font-family: "Roboto Mono"; font-size: 11px;}

Change the line:

<body class="All">

to

<body class="WinLux">

To get the space between tables change the “table” style to:

        table    {width: 100%; border-collapse: collapse; border: 4px solid black; font-size: 1em; margin-bottom: 5px}

To get rid of the Operating System options, change the <fieldset> element to:

        <fieldset>
            <legend>Text Size</legend>
            <input type="number" id="fs" name="fs" value="11 ><label for="fs"    >px Font Size  </label>
        </fieldset>

This is why I choose HTML/CSS/Javascript for my web-apps - making changes is so easy.

2 Likes

Ah! That easy… Obvious now that I know it :slight_smile:

I removed the “All” option, but I kept the “MacOs” one… just in case.

Also, since I wanted as few double-lines as possible in the table rows, I removed all the line breaks (<br>) in the shortcuts column and highlighted the words “or” and “then”

I also made a few minor changes to fit my personal taste. Like different fonts and colors.

Here’s how it looks now:

As @jonray mentioned, it makes for a long page to browse. However, since I intend to use the cheat sheet primarily for my custom shortcuts (especially those I haven’t completely memorized yet), the page will end up being much shorter.

Thanks for the help @Elusien !!

1 Like

Looks really good, @musicalbox. Would it be possible for you to post your amended HTML? The idea of a single column is growing on me and I like your font choices…

Will do later today @jonray. Right now I’m going back to bed. No way I’m getting up at 7 am on new years day :sleeping: :stuck_out_tongue_winking_eye:

1 Like

Here’s my 1-column version @jonray. As always, just remove the .txt suffix.
Elusien_Shotcut_Keyboard_Shortcuts_vMB01.html.txt (25.8 KB)

1 Like

Thanks, @musicalbox. Will try it.

1 Like