Images, figures, and ASCII images

Ordinary <img>, <figure>, and<figcaption> elements receive scoped semantic styling insidedata-mr. Images keep their intrinsic aspect ratio and are capped to the available inline size.

Native image and figure

<figure>
  <img src="/example.jpg" alt="A descriptive alternative text">
  <figcaption>Native figure and image styling inside a data-mr scope.</figcaption>
</figure>

Keep meaningful alt text on content images. Decorative images should use an empty alt attribute rather than relying on CSS presentation.

ASCII image component

mr-ascii-image is an opt-in presentation class for preformatted ASCII art. It applies a monospace face, compact line-height, and zero letter spacing without adding JavaScript behavior.

<pre class="mr-ascii-image" aria-label="A small house">
   /\
  /  \
 /____\
 | [] |
 |____|
</pre>

   /\
  /  \
 /____\
 | [] |
 |____|
    

Lower-capability behavior

These are CSS-only features. Without Markup Refine CSS the image, figure, caption, and preformatted text remain normal semantic HTML.