Let’s start with a quick example timeline:
He spent his early years in Stratford upon Avon where attended Stratford Grammar School until he was 14 years old
‘William Shagspeare’ as it was spelt on the marriage bond wed ‘Anne Hathwey’ - Anne Hathaway of Shottery, Stratford
Shakespeare and other members of the company finance the building of the Globe Theatre
Now that we’ve seen a timeline in action, let’s look at how it’s built.
A timeline begins with a line containing the text ::: timeline. It ends with a line containing the text :::. No other text should be present on these lines!
::: timeline
timeline things!
:::
Within a timeline, you can add multiple items and visual breaks, but that’s it. Blockquotes, images, paragraphs, headers, etc. should not be used. The items you add flow vertically, either from oldest to most recent, or most recent to oldest. The example above goes oldest to most recent.
Items are displayed in pairs, the first on the left and the second on the right. Each item can be either a Date or an Event. To leave one side blank, you can use the special string on a line on its own to make an empty Date item.
It’s often useful to have important dates on one side with related events on the other, but that isn’t a strict rule. You can put events on both sides, leave one side blank, alternate sides, or whatever best suits the information you’re presenting. See the section of examples later on for a showcase of different item layouts.
By default, both sides of the timeline are equally sized. When all of the dates are on the same side, this can make the timeline look badly lopsided on the page. To deal with this, you can squish the timeline to the left by adding the .squish-left class to the opening line:
::: timeline {.squish-left}
2020
This item has tons of room
: Thanks to the squished date, of course.
:::
Or to the right by adding the .squish-right class:
::: timeline {.squish-right}
This item has tons of room
: Thanks to the squished date, of course.
2020
:::
Events are the real point of a timeline. Each event has a title followed by at least one detail line starting with : . If there’s just one of those, it will be displayed as a description. If there are more than one, the first will become the event’s label, with the rest added to the description in the order they appear. You can use inline markup (bold, italic, links, etc.) within any of these fields.
:::timeline
Basic Event
: I have a description!
Event Title
: Optional Label
: This event's description
:::
The only way to have multiple paragraphs within an event is to give it a label as well.
Dates serve to add temporal context that stands out from an event’s label. For example, the label might tell the viewer which month and day the event happened on, and the date element can make it clear which year the event was in.
Dates only ever have a single line, with no description or other info. You can use inline markup within a date (bold, italic, links, etc.).
::: timeline
1776
America
: Independence
:::
Breaks are a special addition that serve to visually disrupt the flow of the timeline. They are best used sparingly in-between timeline segments that relate to each other, but are separated drastically by time or by location. For example, a timeline of Tolkien’s Middle Earth might use a break for each Age.
If timelines are too different from each other, it’s probably best to put them in separate sections of the document instead of using a timeline break.
:::timeline
1776
America
: Independence
--- Next Century ---
1861
American Civil War
: Here we go again
:::
These examples show various different ways to use a timeline.
To put a date next to an event, write the left side (a date in this case) and then the right side (an event).
::: timeline
September 16
Mexican Independence Day
: On this day, Mexico won its independence from Spain
:::
To put two events next to each other, simply write one after another. This can be useful for showing dense sets of related events, or for displaying two parallel sets of events at once.
::: timeline
Mexican Independence Day
: September 16, Modern Day
: On this day, Mexico won its independence from Spain
Independence Begins
: September 16, 1810
: Father Hidalgo called for Mexico's independence from Spain
:::
To leave one side blank, insert a line with a single invisible character on it: .
::: timeline
Mexican Independence Day
: September 16
: On this day, Mexico won its independence from Spain
Independence Begins
: September, 1810
: Father Hidalgo called for Mexico's independence from Spain
:::
By leaving one side blank after a date, you can visually group events together.
::: timeline {.squish-left}
2003
The Matrix is released
: Oct. 27
: The movie's groundbreaking effects stun moviegowers and producers alike.
Concorde Retired
: Nov. 26
: The supersonic passenger jet, Concorde, makes its last ever flight from Heathrow Airport in London to Bristol Filton Airport.
World Tourism Foundation created
: Dec. 23
: The World Tourism Organization becomes a specialized agency of the United Nations.
2004
MER-A lands on Mars
: Jan. 4
: NASA's MER-A (Spirit) spacecraft lands on the surface of Mars.
: The Spirit rover immediately began its ~~3 hour tour~~ 90-sol mission on the Red Planet. This mission would be extended into 2010.
:::
The movie’s groundbreaking effects stun moviegowers and producers alike.
The supersonic passenger jet, Concorde, makes its last ever flight from Heathrow Airport in London to Bristol Filton Airport.
The World Tourism Organization becomes a specialized agency of the United Nations.
NASA’s MER-A (Spirit) spacecraft lands on the surface of Mars.
The Spirit rover immediately began its 3 hour tour 90-sol mission on the Red Planet. This mission would be extended into 2010.