@ou-imdt/css/docs/native/i.md

The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.

# i : the idiomatic text element

Though this historically 'used' to be a presentational only italic tag, the 'i' tag has been repurposed iin HTML as the idiomatic text element which is used to enclose a range of text that is set off from the normal text for some reason, such as idiomatic text, technical terms, taxonomical designations, among others.

The `i` tag has custom styles applied allowing the addition of a data-start and data-end attributes to get screen readers to read the start and end of text enclosed in the tag. Without those attributes no labels are read. __Be aware text in these attrubutes is not translated to different languages either by google translate or screen readers handling the lang attribute.___

## Example

<div class="card">
<p><i class="latin">Musa</i> is one of two or three genera in the family <i class="latin">Musaceae</i>;
  it includes bananas and plantains.</p>

<p>Where is the cookie <i aria-label="cookie icon">🍪</i> monster</p>
</div>

<details class="compact">
  <summary>HTML</summary>

```html
<p><i class="latin">Musa</i> is one of two or three genera in the family <i class="latin">Musaceae</i>;
  it includes bananas and plantains.</p>

<p>Where is the cookie <i aria-label="cookie icon">🍪</i> monster</p>
```

</details>