Article Markup Specification

Last modified March 25, 2020

Turnstyle provides out-of-the-box templates to provide a publishers a way to quickly produce rich, responsive magazine issues across all platforms. These templates are built in HTML, CSS and Javascript which rely on a particular markup for article content. Our PDF Extraction capabilities extract to this specification though customers sending article content to GTxcel in a different way (uploading articles in the Publisher Dashboard for instance) need to comply with this specification to use the unmodified out-of-the-box templates.

Title page elements

An article title is required. The rest of the title page elements are optional.

Article title

The article title is edited in separate field from the article body. If you are supplying your own HTML files, see the notes at the end about setting the article title within the HTML file.

Roof header (section header)

<div class="roofHeader">

The roof header appears at the top of the first page of the article. Typically the roof header is used to label recurring columns or sections within your edition. Turnstyle will look for the first roof header in your article and will display it at the top of the first page. You should only use one roof header per article.

Subtitle (deck)

<div class="subtitle">

The subtitle (deck) appears below the article title. Turnstyle will look for the first subtitle in your article and will display it at the top of the first page. You should only use one subtitle per article.

Byline

<div class="byline">

The byline appears below the article title, after the drop head. Turnstyle will look for the first byline in your article and will display it at the top of the first page. You should only use one byline per article.

Article body

Headings

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

We recommend that these headings be used semantically to convey hierarchy. You should always start with <h1> as your top level heading. Try to avoid using the lower levels of heading unless your article also contains all of the preceding levels.

However, if your existing HTML uses headings differently, the default styles can be overridden for a better presentation. This happens during the Turnstyle customization process.

Drop caps

<span class="dropCap">

Use to apply a drop cap to the first letter of a paragraph, e.g.:

<p><span class="dropCap">L</span>orem ipsum</p>

Paragraphs

<p>

Lists

Use <ul> for bulleted lists and <ol> for ordered lists. Use <li> for each item in the list. You may use the type attribute for ordered lists that do not use decimal numbers

<ol type="1|a|A|i|I">

Allowed values for the type attribute are described in the following table.

Value
Description
1 Default. Decimal numbers (1, 2, 3, 4)
a Alphabetically ordered list, lowercase (a, b, c, d)
A Alphabetically ordered list, uppercase (A, B, C, D)
i Roman numbers, lowercase (i, ii, iii, iv)
I Roman numbers, uppercase (I, II, III, IV)

Non-paragraph text

<div class="block">
    <p>...</p>
    <p>...</p>
</div>

Use for text that is formatted differently from normal paragraph body text. Typically this is done to prevent indenting of non-paragraph content. Do not use <br> to create line breaks.

<a href="[link target]">Link text</a>

Pull quotes

<aside class="pullQuote">
    <p>Text of the pull quote</p>
    <p class="attribution">Text of the attribution</p>
</aside>

The attribution is optional.

Block quotes

<blockquote>
    <p>Text of the block quote</p>
</blockquote>

Use for quoted text that should remain in flow with the article body.

Text formatting

Bold and italic

Use <b> and <i>. You can also use <strong> and <em>.

Subscript and superscript

Use <sub> for subscript and <sup> for superscript. For footnotes, see details in the Footnotes section below.

End of article

Attribution

<span class="attribution">

Use when the name of the author appears at the end of an article. There should also be an enclosing <p> element, e.g.:

<p>This is the last sentence in the article. <span class="attribution">-Author Name</span></p>

Or if you want the author name on it’s own line:

<p>This is the last sentence in the article.</p>
<p><span class="attribution">-Author Name</span></p>

It may also be appropriate to use attribution within the body of an article, such as for the author of a letter.

Supplementary

<div class="supplementary">
    <p>...</p>
</div>

Use supplementary for short additional content at the end of an article, such as an author bio.

Images and graphics

Images

<figure class="picture">
    <img src="./img/[name of image].jpg"/>
</figure>

Only one image per figure.

Captions

<figure class="picture">
    <img src="./img/[name of image].jpg"/>
    <figcaption>Caption text.</figcaption>
</figure>

Photo credits

<figure class="picture">
    <img src="./img/[name of image].jpg"/>
    <figcaption>Caption text. <span class="attribution">Credit text</span></figcaption>
</figure>

Graphics and charts

<figure class="graphic">
    <img src="./img/<name of graphic>.png"/>
</figure>

Currently graphics are styled the same as pictures, but this may change in the future.

Sidebars

Short sidebars (one column)

<aside class="sidebar shortSidebar">
    <p>...</p>
</aside

Long sidebars (full width)

<aside class="sidebar longSidebar">
    <p>...</p>
</aside

Content within a sidebar

  • Paragraph text should be set in <p> tags
  • Lists, non-paragraph text, and images all should be formatted per standard body text guidelines.
  • Do NOT use any of the following tags/classes within sidebars:
    • roof header: <div class=”roofHeader”>
    • title: <title>
    • subtitle/deck:  <div class=”subtitle”>
    • byline: <div class=”byline”>
  • If the sidebar begins with a title or other headings, follow the guidelines from the Headings section of this document.

Sections

<section>

Articles that feature chunks of similar content with repeated formatting should have each chunk wrapped in a <section> tag. Follow our standard markup conventions for the content within the section.

Example uses for <section> might include an article that profiles a series of people or an article that describes several new products.

Embedded content

If you are hosting your own video or audio content, you can embed it in the article using the <video> or <audio> tags.

You can also use <iframe> embed codes to include content from third-party hosting services such as YouTube, Vimeo and SoundCloud.

Footnotes

Place footnote reference (number or symbol) inline with the surrounding paragraph and wrap it with <sup class=”footnoteReference”> and <a href=”#FOOTNOTEID”> tags.

For the footnote iteslf: place the text at the end of the article and wrap it in a <div class=”footnote” id=”FOOTNOTEID”> tag. Note that the values of FOOTNOTEID must match for a particular footnote and must be unique within the article (this is so that we can potentially support interactive footnotes in the future).

An example:

<sup class="footnoteReference"><a href="#footnote3">3</a></sup>
...
...
...
<div class="footnote" id="footnote3">3. Lorem ipsum dolor sit amet.</div>

If a footnote contains more than one paragraph, wrap each paragraph in a <span>. Do NOT use <p> elements within a footnote:

<div class="footnote" id="footnote3">
    <span>3. Lorem ipsum dolor sit amet.</span>
    <span>Second paragraph.</span>
    <span>Third paragraph.</span>
</div>

Other elements

All characters outside the normal ascii characters (characters with codes 0-127) should be encoded as numbered entities: &#nnnn; where nnnn is the character’s unicode value. Except for <,>,”, and & which should be encoded as &lt; &gt; &quot; and &amp;

In general, you should assume that elements not listed here are unsupported and may be automatically stripped from your content before it is presented in Turnstyle.

If you are providing your own HTML files

The following structure should be applied to each HTML file:

<!DOCTYPE html>
<html>
<head>
<title>[article title]</title>
</head>
<body>
<div class="htmlBody" id="article_div">
...
</div>
</body>
</html>

Article title

The article title should be set as metadata in a <title> tag.

File naming

Place each article in it’s own HTML file. The filenames will determine the default order of your articles. We typically recommend starting your articles with a number so that you can control the order. Do not use any special characters in your filenames. You can also reorder articles in our Dashboard later in the process. Example naming scheme:

001-Name_of_First_Article.html

002-Name_of_Second_Article.html

003-Name_of_Third_Article.html

Need Help?
The Digital Help Desk is the process for communicating with GTxcel regarding new title setups, questions, and technical issues for the Web Reader and/or Apps.

You can submit a request to us through the Request Help button located in the Publisher Dashboard or call the support number: 800-609-8994, option 3.
Contact Us GraphicContact Support
8AM - 5PM EST
Monday to Friday
800-609-8994, option 3
Response Times
General Question/Requests – A Customer Success team Member will begin working on your request within one to two hours of receipt. We will complete the request as soon as possible; we aim to have all requests completed within 24 hours.