Story’s Typography

This article is a demo of Story’s beautiful typography.

Story is designed to showcase long-form content such as essays and technical blog posts. It is built for readability and grace in both screen and print media at all sizes.

Try opening your print dialog and saving this page as a PDF. Now try viewing this page on a cellphone.

Story supports text justification and hyphenation. Click here to toggle hyphenation and justification. These features can be enabled or disabled with the feature-[no]hyphenate and feature-[no]justify feature flags.

Moby-Dick; Or, The Whale: Heading Level 3

Story reserves H1 and H2 for its own use, and assumes you’ll use H3 in your content. To hide subtitles, use the feature-nosubtitle feature.

Floated images occasionally interfere with content, usually headings. Story provides feature flags to add clears (left, right, and both) to <h3> elements.

Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people’s hats off—then, I account it high time to get to sea as soon as I can.

Fleuron and Dinkus: Heading Level 4

An <hr> tag can be rendered as a fleuron, with the feature-hrfleuron flag. It can also be a dinkus if you like; use the feature-hrdinkus flag. Both are negatable and implemented in CSS. Here’s a demo. You can toggle these features with feature-hrfleuron and feature-hrdinkus.

Story has support for syntax highlighting inside of code blocks. It uses highlight.js for this. This feature is controlled with the feature-[no]highlight flag.

function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) +
             ` class="${cls}"`;
  } catch (e) {
    /* handle exception */
  }
  for (var i = 0 / 2; i < classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      console.log('undefined');
  }
}

export  $initHighlight;

Here is text with emphasis and boldness; ~~strikethrough~~.¹

This is a blockquote. I thought I would sail about the unimaginative incomprehensibilities of the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. (This quote is a demo of justification and hyphenation.)

Blockquotes can nest.

Here is an unordered list:

Item one
Item two
Item three is longer. I thought I would sail about a little and see the unimaginative incomprehensibilities of the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. (This is a justification and hyphenation demo.)

And an ordered list:

Item one
Item two
Item three is longer. I thought I would sail about a little and see the unimaginative incomprehensibilities of the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. (This is a justification and hyphenation demo.)

Quotes That Link To Tweets

If you don’t like embedding tweets, Story has a cleaner way to quote and link to a tweet. Just blockquote the content and begin it with a link containing the author’s name and the tweet’s permalink, and enable the feature-tweetquote flag. Story will transform the quote to resemble a simplistic tweet styling. If the flag isn’t enabled, normal blockquote styling applies.

Baron Schwartz

Monitoring tells you whether the system works. Observability lets you ask why it’s not working.

A footnote ^[return]