With a graphical application like Blender, answers often require instructions that include navigating the interface. The standards recommend using <kbd>
for this, but the current styling looks like a keyboard key and which is inappropriate (and not something we want to lose).
Proposed solution:
Append the following to the blender.SE stylesheet:
em kbd {
font-size: 12px;
font-style: normal;
color: white;
text-shadow: none;
background-color: rgba(25, 25, 25, 0.9);
border: 1px solid black;
border-radius: 4px;
padding: 0 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, .6);
vertical-align: middle;
}
em kbd + kbd {
margin-left: -0.5em;
}
em kbd:after {
content: url("https://i.sstatic.net/naX0c.png");
display: inline-block;
margin: -3px 0 0 6px;
line-height: 0;
vertical-align: inherit;
}
em kbd:last-child:after {
content: none;
}
So we can use the following to markup interface interactions:
_<kbd>Add</kbd> <kbd>Mesh</kbd> <kbd>Cube</kbd>_
This'll result in it rendering similarly to Blender's own menus:
<kbd></kbd>+
in the clipboard when I have to type long or multiple shortcuts :P) I do have a question though, is there a way with this to have separate looks for keyboard shortcuts and interface directions? Is such a separation of keyboard and interface considered necessary? $\endgroup$<samp>
isn't allowed.. $\endgroup$em
? $\endgroup$em kbd { background-color: #5680C2;}
andem kbd:last-child { background-color: #3F3F3F;}
to match Blender's menu colors, the implication being that all but the last are selected (or including the last, if you want to remove thelast-child
if it makes more sense). For example: rendering in Chrome. $\endgroup$<em><kbd>
for forward compatibility? $\endgroup$