This is a guide to the preferred style and coding for various editorial elements. Tasteful, disciplined and uniform style is very important to Chicago magazine. Please do not improvise.
Most styling should be addressed with HTML tags and classes. Let the tags do all the work. If you find yourself selecting colors, font sizes, or typefaces within Rivista’s editor, you are probably doing something wrong and should seek a second opinion.
Tags can be confusing at first, but great care has been taken to make these tags as simple as possible. Using them correctly, however, makes a big difference and will be worth the small effort required. If you have any questions about their use, Luke is happy to help.
There is a separate guide for super articles, which have a few extra tricks and styles.
This is also a living, changing document that is open to revision. Visit Luke with suggestions or requests.
To use these tags: If an article needs extra tags, click the “Source” icon in the upper-left corner of the Rivista text editor. You are now in source mode, and you can type raw HTML. Until you are fluent with the tags, feel free to copy tags from the right column of this style guide and edit the content as needed.
Blockquotes
Blockquotes are useful when we run excerpts that are long or multiple paragraphs. Paragraphs within a blockquote should still be wrapped within <p> tags. Unlike a pull-quote, quotation marks are not used. It's a bit of a pain to add a blockquote in Rivista, but it is much preferrable to using the “add indent” icon in the Rivista editor. Attributions are optional, but they should be get a special <div>. Note that you do not enter a dash before the attribution. Dashes get added by magic.
This is a lead-in to a longer quotation:
The reversion of Windows to a CLI when it was in distress proved to Mac partisans that Windows was nothing more than a cheap facade, like a garish afghan flung over a rotted-out sofa.
For their part, Windows fans might have made the sour observation that all computers, even Macintoshes, were built on that same subtext, and that the refusal of Mac owners to admit that fact to themselves seemed to signal a willingness, almost an eagerness, to be duped.
But occasionally, such as in cases with more elaborate attributions, we should include the attribution within the blockquote.
The reversion of Windows to a CLI when it was in distress proved to Mac partisans that Windows was nothing more than a cheap facade, like a garish afghan flung over a rotted-out sofa.
For their part, Windows fans might have made the sour observation that all computers, even Macintoshes, were built on that same subtext, and that the refusal of Mac owners to admit that fact to themselves seemed to signal a willingness, almost an eagerness, to be duped.
Neal Stephenson, “In The Beginning Was The Command Line”
By the numbers
That old newspaper and magazine staple.
1
The loneliest number
1,079
Number of pages in “Infinite Jest”
Chartbuilder chart
Chartbuilder is a tool we can use to generate an image of a simple chart. To use, go to the Chartbuilder tool and paste in data that you have copied from a spreadsheet. Place the resulting image into a Rivista article. (It will be 1200x680 pixels, twice as big as we need, but that's fine.)
Chart sources
For footnotes and other source materials with tables.
| Rank | Neighborhood | Crime rate* per 100,000 |
|---|---|---|
| 1 | Fuller Park | 13,456 |
| 2 | Washington Heights | 12,870 |
| 3 | Englewood | 12,713 |
| 4 | Riverdale | 12,512 |
| 5 | West Garfield Park | 12,272 |
SOURCE: City of Chicago
Corrections and changes
When we correct an error or make a significant change, we should acknowledge it by inserting the following code at the bottom of the article body. Consult these guidelines.
Multiple changes:
Drop cap
An extra grace note for more substantial stories, such as features from the magazine.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt quos impedit omnis repellendus laborum nemo in officia nobis ab dolorem quasi qui vero sapiente ea enim maxime voluptate placeat id.
Editor’s note
Insert this either at the top or the bottom of a story.
Footnotes
Author notes or other errata at the bottom of a story. Make sure the Rivista editor does not insert unwanted <p> tags within the <footer>.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt quos impedit omnis repellendus laborum nemo in officia nobis ab dolorem quasi qui vero sapiente ea enim maxime voluptate placeat id.
Grid, three across
For editorial packages that require refers to several stories. Photos should be 175 pixels wide. They can be any depth, but a consistent depth works best. (Can't go wrong with squares.)
Jump lines
In general, avoid these, because breaking stories into multiple pages is dumb and not friendly to the reader. But when we must, use this for the link to the subsequent page.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt quos impedit omnis repellendus laborum nemo in officia nobis ab dolorem quasi qui vero sapiente ea enim maxime voluptate placeat id.
Lists
Do not simply use asterisks when you desire a list of bulleted items. Use the code below (which can be generated easily in Rivista's editor).
This is a bulleted—or “unordered”—list:
- The Year of the Whopper
- The Year of the Tucks Medicated Pad
- Year of the Trial-Sized Dove Bar
This is an ordered list (note that the numbers are automatically generated):
- Vanilla
- Chocolate
- Strawberry
Lists, with fancy numbers
For numbered lists that call for extra treatment, such as top-10 lists. Don't overdo these. Also, make sure the numbers serve as labels and not content. If it is the latter, it may be a candidate for By the Numbers.
1 List item with a headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt quos impedit omnis repellendus laborum nemo in officia nobis ab dolorem quasi qui vero sapiente ea enim maxime voluptate placeat id.
Or maybe the headline is overkill and you just use a leadin.
2 Introductory chatter: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt quos impedit omnis repellendus laborum nemo in officia nobis ab dolorem quasi qui vero sapiente ea enim maxime voluptate placeat id.
Or maybe it doesn't need a headline.
3Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt quos impedit omnis repellendus laborum nemo in officia nobis ab dolorem quasi qui vero sapiente ea enim maxime voluptate placeat id.
A simple map
This is a simple map with just a single location. Copy this code and replace the numbers after var latitude and var longitude with the respective latitude and longitude of the destination. (To find the latitude and longitude, use a look-up service like this one.) For help with placing more than one map on a page, maps with more than one location, or other bells and whistles, consult Luke.
Photo credits
Photo credits need the “Photo: ” prefix manually added, whether it's the lead photo for a story or a photo in a photo gallery. This gives us the flexbility to have different language for non-photo visuals, such as illustrations.
In photo galleries, credits should be added for each individual photo.
Set off a photographer's publication with a slash, with no spaces, and wrap the publication in a <em> tag.
Finally, always be sure you have rights to any given photo. Use "courtesy of" only if you have permission of the copyright holder, or if it is clearly intended for publicity purposes. Do not use "Courtesy of" as a synonym for "Stolen from the following blog." If you are using a Flickr photo, be sure it has a Creative Commons commercial link; include a link to the original source and a link to the Creative Commons license. (Never use "Flickr" itself as the attribution. Flickr is merely the medium, not the source. It makes as much sense as crediting a photo to "Kodak.")
Photos
Sometimes we place photos within the story. If we need text to wrap around the photo, give the <figure> tag a "pull-right" class. However, avoid using photos wider than 300px unless you go for the full 600px width.
Important: On wrapped photos we must manually add the width and height—width="XXX" height="YYY"—or their sizes will not be rendered correctly.
Observe that our online style for photo credits is "Photo: John Doe." If there are several photos, you may use "Photos: John Doe" with the lead photo only, and then not with the others.
Please do not capitalize credits (or any other elements). The system will do it for you.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores earum ullam repellendus exercitationem dolor corporis aliquam pariatur libero qui ipsam officiis voluptatibus accusantium nemo nobis iure ducimus hic quae deserunt? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt quos impedit omnis repellendus laborum nemo in officia nobis ab dolorem quasi qui vero sapiente ea enim maxime voluptate placeat id.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt quos impedit omnis repellendus laborum nemo in officia nobis ab dolorem quasi qui vero sapiente ea enim maxime voluptate placeat id.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt quos impedit omnis repellendus laborum nemo in officia nobis ab dolorem quasi qui vero sapiente ea enim maxime voluptate placeat id.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt quos impedit omnis repellendus laborum nemo in officia nobis ab dolorem quasi qui vero sapiente ea enim maxime voluptate placeat id.
Photos with capsules
Often the photos and their captions take a more prominent role in a story. Such an example would be a series of short product reviews. In these cases we center the photo and the caption, but this is achieved by adding a class="capsule" to the <figure> tag, and we place the photo credit, if present, below the caption. Photos can be any width up to 600px, and they should not have any unnecessary white space.
Bub City
435 N. Clark St.312-610-4200
$17.95
You wouldn’t normally go trolling for lobster rolls in a barbecue joint that boasts a solid wall of whiskey bottles and something called Giddy Up Fries. But Doug Psaltis knows to apply his mayo to the side of the griddled rolls, not to the lobster meat itself, which is dressed in butter, lemon juice, and a vibrant dose of oregano, garlic salt, and “secret spices.” Texturally, it can’t be beat: warm bread, crunchy as Texas toast, set against the chill of high-quality lobster, cool as a breeze from the Northeast.
Photos on the side
These examples show how we can run copy alongside a photo without a photo without wrapping. It involves some extra code but it can be very useful in organizing content, and it behaves well on mobile devices. This is a good option for photos with short chunks of text.
Subhead
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia error quod ducimus hic minima recusandae repellat impedit atque doloremque placeat voluptates molestiae expedita consequatur quibusdam iste aperiam nam soluta ex. Dhic minima recusandae repellat impedit atque doloremque placeat voluptates molestiae expedita consequatur quibusdam iste aperiam nam soluta ex
Subhead
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia error quod ducimus hic minima recusandae repellat impedit atque doloremque placeat voluptates molestiae expedita consequatur quibusdam iste aperiam nam soluta ex. Dhic minima recusandae repellat impedit atque doloremque placeat voluptates molestiae expedita consequatur quibusdam iste aperiam nam soluta ex
Subhead
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia error quod ducimus hic minima recusandae repellat impedit atque doloremque placeat voluptates molestiae expedita consequatur quibusdam iste aperiam nam soluta ex. Dhic minima recusandae repellat impedit atque doloremque placeat voluptates molestiae expedita consequatur quibusdam iste aperiam nam soluta ex
Pull quotes
Pull quotes can be used within longer stories if visual breaks are needed. They can be used with or without attribution. Since these run so large, please be sure to use “curly” quotes instead of 'straight' quotes. On a Mac, this is accomplished with option-] and option-shift-] for ‘ and ’ respectively, or option-[ and option-shift-[ for “ and ”. Note that you do not enter a dash before the attribution. Dashes get added by magic.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis molestiae nemo animi facilis eum odit sit natus quia officia suscipit tempore illum non! In nam commodi amet tempora dignissimos tempore?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque vero quis nesciunt excepturi commodi necessitatibus repellat facilis mollitia laudantium assumenda repudiandae aliquid ratione ullam recusandae provident. Dicta provident soluta consequuntur?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate necessitatibus voluptates atque accusamus nemo harum cum fuga facilis a aspernatur minima distinctio omnis placeat et tempora fugiat molestias corporis modi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque vero quis nesciunt excepturi commodi necessitatibus repellat facilis mollitia laudantium assumenda repudiandae aliquid ratione ullam recusandae provident. Dicta provident soluta consequuntur?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate necessitatibus voluptates atque accusamus nemo harum cum fuga facilis a aspernatur minima distinctio omnis placeat et tempora fugiat molestias corporis modi.
Q&A
This is the preferred style for interviews. Everything is wrapped in a <p> tag, just like any other story, but questions get class="question" added to each question's <p>.
How do you like Chicago magazine?
I like it very much.
Is that so?
Yes, it is.
Q&A with longer questions
For longer questions, such as our Deal Estate Question faeture, give each paragraph in the question a p class="question" treatment. If there is an attribution, it should get an extra class of question-attribution. You'll have to go into the source to do this. (Note that the class does the italicizing for you.)
Q: Dennis, we live in Rogers Park and there’s a house that has us scratching our heads. It’s on a busy street, in a little cluster of houses when everything else on the street is businesses and apartment houses. A really ordinary street. The house looks kind of pretty but nothing special.
Well, they put it on the market this spring, and when I looked it up online, they wanted almost $850,000 for it! That seemed like lunacy.
They put the price lower a couple of times, and the last time I looked it up, it was just below $750,000. That still seems like a lot for a house on a busy street in Rogers Park. We like living here, but it’s not Andersonville or Lake View. That house doesn’t have closeness to the beaches or the El to brag about.
Is there something I’m not seeing about this house that makes it worth that much?
—Susan
A: Susan, I think the only thing you’re not seeing is the sellers’ hope for a solid return on their investment.
Q&A with multiple subjects
Sometimes we will need to differentiate between speakers. This could be done with a simple <strong> tag, but the preferred formatting is to start each answer with <span class="leadin">Name:</span>. (Note that names will be all-capped automatically.)
Good lads, how do ye both?
Rosencrantz: As the indifferent children of the earth.
Guildenstern: Happy, in that we are not over-happy; on fortune’s cap we are not the very button.
Rating stars
For dining reviews primarily
Story breaks
For really long stories and features from the magazines, we may want to introduce a pause or chapter break.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid suscipit cumque nihil et beatae laboriosam impedit ullam dicta aperiam delectus hic incidunt temporibus. Quo sed necessitatibus magnam molestiae a perspiciatis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat reprehenderit deleniti aliquam praesentium sunt facere reiciendis fugit pariatur dolorem officia maiores ullam ducimus laborum eos cumque! Tempora rem veritatis doloribus!
Story label
For when a story needs a label above the headline.
Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid suscipit cumque nihil et beatae laboriosam impedit ullam dicta aperiam delectus hic incidunt temporibus. Quo sed necessitatibus magnam molestiae a perspiciatis.
Subheads
<H2> is our primary tag for subheads within a story. If a second level of hierarchy is needed, go to <H3>.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid suscipit cumque nihil et beatae laboriosam impedit ullam dicta aperiam delectus hic incidunt temporibus. Quo sed necessitatibus magnam molestiae a perspiciatis.
This is a subhead
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae amet sunt cumque eius itaque alias iure eligendi! Voluptatem corrupti libero beatae possimus sequi adipisci quo aut vitae animi voluptatum repudiandae.
This is another subhead
This is a sub-subhead
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat reprehenderit deleniti aliquam praesentium sunt facere reiciendis fugit pariatur dolorem officia maiores ullam ducimus laborum eos cumque! Tempora rem veritatis doloribus!
This is a sub-subhead
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat reprehenderit deleniti aliquam praesentium sunt facere reiciendis fugit pariatur dolorem officia maiores ullam ducimus laborum eos cumque! Tempora rem veritatis doloribus!
Tables
Most tables should have a class of "table". Header cells should be placed within a <th>, and the row should be wrapped within a <thead> tag. Avoid extra stylistic flourishes, such as all-caps or centering, unless there is a compelling reason to have them.
| Number | Name | Kilometer |
|---|---|---|
| 1 | Kluisberg | 99 |
| 2 | Nokereberg | 118 |
| 3 | Molenberg | 157 |
Tables with zebra stripes
If a table has a large amount of data, subtle zebra stripes can help the reader. Add table table-striped to your table's class. If there is a header row, wrap it in a <thead> so that it does not get the striping.
| Number | Name | Kilometer |
|---|---|---|
| 1 | Kluisberg | 99 |
| 2 | Nokereberg | 118 |
| 3 | Molenberg | 157 |
| 4 | Oude Kwaremont | 181 |