Docs

Abbr

Use the abbr shortcode to show the long form of an abbreviation.
Overview   Data   Styling   Arguments  

Overview  

Added in v0.19.0     

Use the abbr shortcode to show the long form of an abbreviation on hover. The abbreviation data is retrieved from a central data file. By default, the shortcode uses data/abbr.yaml with translation support.

HTML html
markdown 
{{< abbr HTML >}}
{{< abbr key="html" class="initialism" >}}

Data  

Define a file in the data folder that contains the abbreviation data. The format expects the following attributes:

Attribute Required Description
id Yes Required key of the abbreviation. Store the key in lower case to ensure it can be matched.
long Yes Required long form of the abbreviation.

The following snippet defines three entries in yml format.

- id: css
  long: "Cascading Style Sheets"

- id: html
  long: "HyperText Markup Language"

- id: svg
  long: "Scalable Vector Graphics"

Styling  

The file assets/scss/components/_abbr.scss defines the Hinode-specific styling of the abbr shortcode.

@media (hover: none) {
    abbr[title] {
        position: relative;
        text-decoration: underline dotted;
    }
    
    abbr[title]:hover::after,
    abbr[title]:focus::after {
        content: attr(title);
        position: absolute;
        left: 0;
        bottom: -30px;
        width: auto;
        white-space: nowrap;
        background-color: var(--bs-body-bg);
        color: var(--bs-tooltip-color);
        border-radius: 3px;
        box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.4);
        font-size: 14px;
        padding: 3px 5px;
    }
}

Arguments  

The shortcode supports a single unnamed argument, which maps to the key argument. When using named parameters, the following arguments are supported:

Name Type Required Default Comment
class string Class attribute of the abbr element. For example, specify initialism for a slightly smaller font size.
data string abbr Filename of the abbreviation input. You can omit the file extension. The file should reside in the data folder. The data supports language extensions. For example, abbr.en.yaml refers to the English translation of the abbreviation data. The filename abbr.yaml is used when no suitable translation is found.
key string yes Case-insensitive key of the abbreviation. In shorthand notation, this is the first (and only) matched argument. Non-alphanumeric keys must be quoted.
Name Type Required Default
class string
Class attribute of the abbr element. For example, specify initialism for a slightly smaller font size.
data string abbr
Filename of the abbreviation input. You can omit the file extension. The file should reside in the data folder. The data supports language extensions. For example, abbr.en.yaml refers to the English translation of the abbreviation data. The filename abbr.yaml is used when no suitable translation is found.
key string yes
Case-insensitive key of the abbreviation. In shorthand notation, this is the first (and only) matched argument. Non-alphanumeric keys must be quoted.
On this page