Story can automatically transform images into figures with captions. It can also add captions to tables. And it adds features and styling to both images and tables. This article is a demo of Story’s features for figures, tables, and captions.
Image Captions and Figures
feature-figcaption flag is set (and not negated), Story will transform
your images into figures, and add a caption. There are several ways this can be done. Story tries
each method, in the following order.
First, if an image is followed immediately by an
<em> in the same paragraph, Story treats
the content of the
<em> as the image caption. To enable this, the image and
the text must not have a blank line between them. Example:
![Water Lily](/img/unsplash-photos-vHnVtLK8rCc.jpg) _Water lily photo by Zoltan Tasi on Unsplash_
This markup results in a
<p><img...><em...></p> markup that Story converts into a captioned figure.
Hover your mouse over the picture to see the caption:
Water lily photo by Zoltan Tasi on Unsplash
If there’s no
<em> to use, Story uses the image’s
title attribute as a fallback:
![Water Lily](/img/unsplash-photos-vHnVtLK8rCc.jpg "A water lily")
Finally, Story falls back to the
Story has multiple built-in table styles that you can apply with feature flags. The default is similar to GitHub’s table styling:
||List all new or modified files|
||Show file differences that haven’t been staged|
||Record changes to the repository|
||List, create, or delete branches|
There is also a style designed for tables that are part of an
article with figures, resembling scientific papers or other more formal use
cases. This is enabled with
feature-tablefig. Click here to toggle.
|Item||Estimated||Positive and Significant||Negative and Significant|
|Demographic Variables for Head|
|Completed primary or incomplete secondary||76||76||0|
|Completed secondary or higher||60||60||0|
Tables with columns of right-aligned numbers are more readable with fixed-width numerals; click to toggle
feature-tablefw. Observe the table below and see how its columns are easier to read with fixed-width numerals. This is noticeable with Github-style table formatting, but not with academic-style.
|Date||Inclination, deg.||Longitude, Asc. Node, deg.||Mean Distance, au||Eccentricity||Mean Longitude, deg.|
Mercury’s Heliocentric Osculating Orbital Elements Referred to the Mean Equinox and Ecliptic of Date for 2013
Caption Styling And Linking
- Figures and tables get sequentially numbered
#fig-1and so on, so you can link to them.
feature-figlinkfeature flag searches the article for text such as Figure 1 and automatically links it to the appropriate figure.
- If the
feature-fignumfeature is enabled, the text of the caption is prepended with the figure number. Click here to toggle this feature, then inspect the captions again to see the effect.
feature-figcaption-hiddenfeature makes the captions hidden until you move the mouse over them. The
feature-figcaption-visiblefeature flag overrides this and makes the captions visible immediately below the image. Click here to toggle this feature.
Story doesn’t convert tables to figures, but it can add captions to tables.
See Table 3, which is followed by a paragraph whose entire content is inside an
Tables can be autolinked and table captions can be numbered, similar to images.
These features are controlled by the same
feature-fignum flags that control image captioning and linking, so they’ll be consistently applied.
Read next: Story’s image formatting features.