Central to any timeline is how it lays out, labels, and divides time. Your document may span days, centuries, or anything in between, so TimeStory lets you easily configure and scale your timelines.
How Time is Marked
Across the top of most timelines is a header, consisting of date labels arranged to mark the divisions of time. A header may have one or more rows, representing different time units; in the above example, you see a view showing years in the first row and quarters in the second.
It’s also often useful to have vertical gridlines marking time units in your timeline. Gridlines normally correspond with date labels in the header, but you can also set up gridlines for an unlabeled unit if you want. Gridlines can be assigned different weights and styles per header row or unit.
Taken together, the set of time units, header labels, and gridlines applied to a timeline is called the timeline configuration. There are five built-in configurations: years, quarters, months, weeks, and days, and you can create and customize your own, as described below.
You can freely switch between configurations; just use the Units pop-up menu on the toolbar, or the pop-up menu within the Timeline Inspector. This adjusts your timeline’s presentation, but doesn’t alter any of your events or their actual dates.
How Time is Laid Out Horizontally
Since your timeline configuration will often have a mix of units, it’s important to note that TimeStory uses the smallest unit as the basis for horizontal layout, and what that means.
Consider a timeline configured to show years and months. Since the smallest unit is months, TimeStory will align the months on a regular horizontal grid. This means that February and March will have exactly the same width; this is normally what you’d want if you’re doing monthly planning, for a clear and attractive timeline. It does mean that a one-day event in February won’t have the same width as a one-day event in March.
Now consider a timeline configured to show months and days. Since the smallest unit is now days, every day will be given an equal width. You’re probably working with daily tasks or events, so this keeps them consistent. But an event covering February will now be a little narrower than one covering January.
Scaling Up and Down
The amount of horizontal width given to each time unit is your timeline’s time scale. Scaling up expands the size of each time unit, showing more detail and making events longer; scaling down compresses each time unit, showing less detail but fitting more time units on screen.
Scaling with a Mouse or Trackpad
Hold down the ⌘ key to use your scroll wheel or scroll gesture to scale up or down smoothly and precisely. On a trackpad, use two fingers in a “pinch” gesture to do the same.
Automatically Removing Header Detail when Scaling Down
As you scale down, your timeline’s vertical gridlines and header labels will get closer and closer together. To keep your timeline readable and clear, TimeStory will automatically start making adjustments to them as they get too close:
- Header labels will switch from less-compact to more-compact forms; for example, from “Tue” to “T”.
- Header labels and gridlines will, when it makes sense, start skipping intervals; for example, years will start incrementing by 5, then by 10, then by 20, then 50, then 100.
If a row of the header can’t be compressed any more, TimeStory will just hide it. For example, in the standard Days view, the final row shows the weekdays; once it can no longer even fit the shortest form of weekday name, it will remove that row entirely, to avoid confusion. When a row is hidden, a thick line will take its place, with a small “⋯” indicator on the left edge. Hover over that indicator to see what rows have been hidden, and click on it to expand your timescale to show all rows again. (This is equivalent to .)
TimeStory will prevent you from scaling down to the point where all of your rows disappear; it will try to always keep one visible. (Note that if you deliberately want to hide all your dates, you can do so.)
Customizing the Timeline Configuration and Units
If you open the Timeline Inspector, you will find the name of the current configuration at the top, and its design in the Design section.
The built-in configurations each have a fixed set and sequence of units, whose labeling, gridlines, and styling you can change.
To more deeply customize a configuration, click Customize under the configuration’s name; this will create and switch to a new configuration, named “Custom 1” (or similar), and allow you to add, remove, or change the time units as well. Click Rename to change that name.
A timeline configuration always has between one and four time unit levels defined. These are the different ways in which you want your timeline marked or labeled. Each one can be set to years, quarters, months, weeks, or days; you can put them in any order or use the same unit twice (if, say, you want the same units labeled two different ways).
Each time unit has a choice of header label format; for example, weeks can be formatted as date ranges, as the first day of the week, or as the week number. You can also set a unit’s header labeling to “none”, if you just want it there for gridlines.
Change Header Style if you want to select a smaller or bolder variant of the base header font, to draw the reader’s eye to the most important info. Use Gridlines to select the style and weight of gridlines associated with that unit, if any.
General Timeline Header Style Options
You can set up the header to look how you’d like, by opening the Timeline Inspector and adjusting the fields under Timeline Header Style.
- Choose the base font used for date labels in the header. Note that you can adjust this font to a smaller and/or bolder variant for each row of the header individually; this keeps a common look, while letting some labels provide context while others draw the eye.
- Choose the text alignment of labels within their respective regions of the header.
- Choose the text color and background of the header. If the background is set to “None”, then the document background is used. If the text color is set to “Automatic”, then it will be either white or black, chosen based on contrast.
- Configure borders. These are horizontal lines drawn above, within, or below the rows of the headers.
Note that these header style values are independent of the configuration. If you set up your colors, borders, and font, and then switch from, say, Days to Weeks, the colors, borders, and font stay the same even as the content of the header totally changes.
Choosing the First Weekday
Each document has a specified first weekday, used to mark gridlines and labels when you’re using weeks in your configuration. For example, in the US, weeks are generally considered to start on Sunday.
For a new document, this is taken from your Mac’s system settings, and should match your calendar and other apps. If you want to change it for a specific timeline, go to the Timeline Inspector and find the field named “Weeks Start On”, and choose the day you’d like.
Hiding the Timeline Header (and all dates)
Sometimes, you may want to present a timeline without committing to specific dates. For example, an early project plan may have rough durations and sequences of events, but an uncertain start date, and you’d like to discuss it without being distracted by the actual dates in the plan.
Use on a specific timeline, and TimeStory will:
- Hide the timeline header;
- Hide any automatic date labels attached to events;
- Not show the date tooltip that normally shows when dragging or resizing events in the timeline.
This doesn’t remove the dates stored in the document; every event still has a specific start and end date, it’s just not visible. Dragged events will still snap to the same boundaries, and vertical gridlines will still appear according to your timeline configuration.