UI Macro Styles
Asciidoctor supports three UI element representations out of the box, which are made from corresponding inline UI macros.
-
button (btn macro)
-
keybinding (kbd macro)
-
menu (menu macro)
The UI elements are output using semantic HTML elements, so they inherit some default styling from the browser. However, to look proper, they require some additional styling.
1. Button
A button is meant to represent an on-screen button (btn:[Save]).
However, it should not appear like an actual button as that could confuse the reader into thinking it’s interactive.
Therefore, a button is rendered as a bold text by default:
<b class="button">Save</b>Traditionally, a button reference is styled by surrounding the text with square brackets, as shown here:
btn:[Save]
2. Keybinding
A keybinding can be a single key (kbd:[F11]) or a sequence of keys (+kbd:[Ctrl+F]).
Here’s the HTML that’s generated for these two forms.
<kbd>F11</kbd>
<span class="keyseq"><kbd>Ctrl</kbd>+<kbd>F</kbd></span>Here’s how these might appear:
kbd:[F11]
kbd:[Ctrl+F]
3. Menu
A menu can be a top-level menu reference (menu:File[]) or a nested selection (menu:File[Save]).
Here’s the HTML that’s generated for these two forms.
<b class="menuref">File</b>
<span class="menuseq"><b class="menu">File</b> <b class="caret">›</b> <b class="menuitem">Save</b></span>This might be rendered as:
menu:File[]
menu:File[Save]
The default styling applied to a menu reference is usually sufficient.