1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
---
title: Story's Typography
date: "2018-08-19"
url: "/typography"
description: "Story uses gorgeous typefaces and is optimized for a pleasant reading experience on any device."
credit: "https://unsplash.com/photos/h-M3O25tyvI"
image: "img/unsplash-photos-h-M3O25tyvI.jpg"
thumbnail: img/unsplash-photos-h-M3O25tyvI.tn-500x500.jpg
classes:
- feature-hyphenate
- feature-justify
- feature-highlight
- feature-tweetquote
categories:
- Demo
---
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.
<!--more-->
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 <a
id="hyph">hyphenation</a> and <a id="just">justification</a>. 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](/features) 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 <a id="fleuron">feature-hrfleuron</a> and <a id="dinkus">feature-hrdinkus</a>.
----
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.
Story has support for syntax highlighting inside of code blocks. It uses
[highlight.js](https://highlightjs.org/) for this. This feature is controlled with the `feature-[no]highlight` flag.
```javascript
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~~.^[A footnote]
> 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:
1. Item one
1. Item two
1. 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 end it with a paragraph 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.
> Monitoring tells you whether the system works. Observability lets you ask why it's not working.
>
> [Baron Schwartz](https://twitter.com/xaprb/status/921004656402321408)
<script type="text/javascript">
$( "#hyph" ).click(function() {
$("body").toggleClass("feature-hyphenate");
});
$( "#just" ).click(function() {
$("body").toggleClass("feature-justify");
});
$( "#fleuron" ).click(function() {
$("body").toggleClass("feature-hrfleuron");
});
$( "#dinkus" ).click(function() {
$("body").toggleClass("feature-hrdinkus");
});
</script>
Read next: [Story's MailChimp subscribe forms and RSS feeds](/mailchimp-features).
|
