Edit ModuleEdit Module
Edit Module
Edit Module Edit Module Edit Module

Style Guide for Editors

Edit Module

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.)

A sample chart

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
*Includes homicide, assault, battery, sexual assault, arson, and burglary.
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.

Helen Steeply is a reporter for Moment magazine.
Multiple footnotes are allowed but should get separate tags.

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.)

Buddy Guy

Buddy Guy

Blues guitarist; owner, Buddy Guy’s Legends

Buddy Guy

Sandy Goldberg

Founder, A Silver Lining Foundation

Buddy Guy

Lulú Martinez

Student, University of Illinois at Chicago

Buddy Guy

Buddy Guy

Blues guitarist; owner, Buddy Guy’s Legends

Buddy Guy

Sandy Goldberg

Founder, A Silver Lining Foundation

Buddy Guy

Lulú Martinez

Student, University of Illinois at Chicago

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.

Next page

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):

  1. Vanilla
  2. Chocolate
  3. 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.")

Photo: Ansel Adams/Yosemite Times
Illustration: Banksy
Photo: Courtesy of Mega Corp.
Photo: Ferguson via Flickr/cc 2.0

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.

This is the caption for this inset photo. Photo: Henri Cartier-Bresson

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.

Mugshot

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.

This is the caption for this wide photo. It should be no wider than 600 pixels. Photo: Henri Cartier-Bresson

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
Photo: Henri Cartier-Bresson

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

Related content

Related information can be a list or a paragraph (or series of paragraphs). Although this shares similar coding and style with related links, chunks of related information should be kept separate.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem veritatis esse nisi impedit dolorum debitis at expedita quas ut minima nemo amet earum veniam eum ad incidunt nobis reiciendis necessitatibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem veritatis esse nisi impedit dolorum debitis at expedita quas ut minima nemo amet earum veniam eum ad incidunt nobis reiciendis necessitatibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem veritatis esse nisi impedit dolorum debitis at expedita quas ut minima nemo amet earum veniam eum ad incidunt nobis reiciendis necessitatibus.

Related content, aligned right

Sometimes we will want to have related content (or links) appear on the right side of the story. Add a "related-content-right" class to the <section> tag.

Related content with a map

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 or for more elaborate maps, consult Luke. Here is an example of this map on a typical dining review.

Pro tip: You can adjust the zoom level of a map by including an optional number in the line that starts with makeMiniMap. This number should be between 0 and 19. The default is 14. A lower number (such as 12, in the example below) will zoom out and show more of Chicago. A higher number will zoom in. It will often make sense to adjust the zoom, depending on whether the location is in the deep suburbs (zoom out) or downtown (zoom in).

Here are three examples of maps. Pick the one that is most appropriate for your story.
1. A map with label and optional listing information
2. A map with no label
3. A map with no label, zoomed in a bit

Related links

We often link to other stories. This section of code should be placed above the <p> where you would like it to appear—usually the second graf of a story.

Related links, inline

If it's a single link, it might be better to embed the text inline. This can interupt the flow of the story, however, so use cautiously.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Related links with photo

Images should be at least 200 pixels wide and they should be placed within the <a href ...> tag.

Related links with more hierarchy

We can also include a list within a list, such as if we are linking to a package of stories. Note that the related-sub class has been added to the parent <li>. A link is optional. In the example below, for instance, we would not link "More reviews" anywhere, but we would probably want "Best new restaurants" to link to the corresponding landing page.

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.

Story navigation

Many times it's helpful to have a previous/next navigation in a story.

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
Edit Module