# Abbr

Use the abbr shortcode to show the long form of an abbreviation.

## 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.

```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.

```yml
- 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.

```scss
@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 | Description |
| --- | --- | --- | --- | --- |
| `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. |