← Menu

Content tags (classes)

Our template includes styling for a range of classes by default. You can apply these to elements in markdown.

Formatting

Use these classes in your markdown to create specific formatting effects.

Feature Workflow class Block or inline Explanation Supports edition suffix
Bibliography list .bibliography Block Styles a list as a bibliography, for instance at the end of an academic book. To apply this class, place {:.bibliography} directly under the list you would like to target. No
Box .box Block Puts the element in a box, to set it off from the rest of the text. To apply this class, place {:.box} directly under the block of text you would like to target. No
Chapter number .chapter-number Block Used for a chapter number before a chapter heading. (See the tip at Bold in the chapter on Markdown for another way to handle chapter numbers.) To apply this class, place {:.chapter-number} under the chapter number. No
Dedication .dedication Block A dedication, for instance at the start of a book or chapter. To apply this class, place {:.dedication} directly under the block of text that you’d like to target. No
Dialogue .dialogue Block Dialogue, as in a play script. Apply to a definition list, where dt is the name, and dd the speech. No
Epigraph source .epigraph-source Block The person to whom the epigraph is attributed. To apply this class, place {:.epigraph-source} dircetly under the source of the epigraph. No
Epigraph .epigraph Block An epigraph at the start of a book or chapter. To apply this class, place {:.epigraph} under the epigraph you’d like to target. No
Figure .figure Block A figure is an image with a caption. Add {:.figure} immediately below a blockquote containing an image and a separate paragraph of text to make it behave as a figure. Read about other options for adding figures in our workflow guide. No
Figure: fixed position .fixed Block Add to the .figure tag, e.g. {:.figure .fixed}. For figures that must keep their position in the text flow, and must not float to the top of the page. No
Figure height .height-1 to .height-50 Block Sets the height of an element to a multiple of the default line height. Use in figures, on line after image, add it to the figure tag like this {:.figure .height-12} for an image whose height should be 12 lines. Yes
First paragraph .first Block For any paragraph that starts a new set of paragraphs, which should be flush left and with a gap above it. Add {:.first} immediately below this first paragraph. No
Float to top .float-top Block Floats the element to the top of its page. Useful for boxes. Applies to print output only. Apply {:.float-top} under the element which you’d like to float to the top. Or add it to an existing class like {:.box .float-top}. Yes
Float to bottom .float-bottom Block Floats the element to the bottom of its page. Useful for boxes. Applies to print output only. Apply {:.float-bottom} under the element which you’d like to float to the top. Or add it to an existing class like {:.box .float-bottom}. Yes
Footnote .sidenote .bottom Block or inline When you add .bottom to .sidenote, the note appears at the foot of the page in print output. It remains on the side on screens. (Also see the chapter ‘Footnotes, endnotes and sidenotes’.) No
Fractions .fractions Block or inline If your font supports it, converts characters like 1/2 into fraction characters. Add {:.fractions} to a span (e.g. italics, bold or link) or to a block element (e.g. list, paragraph) by adding it to the line immediately below it. No
Frontmatter references .frontmatter-reference Inline Tag links in the Table of Contents whose page numbers must match your frontmatter reference style set in its .sass variables (e.g. print.scss). You apply this class differently depending on how your Table of Contents is generated. In the current Electric Book template, the TOC is built from the book’s metadata in _data/works. In the toc: section, add class: "frontmatter-reference" below the label you need to target. No
Glossary .glossary Block Add {:.glossary} below the last entry in a series of definition lists to format the entire list of definitions as a glossary. No
Hide from print .non-printing Block or inline Hides the element from print output. Useful for things like clickable buttons, which are only intended for screens, not paper. Apply {:.non-printing} below or next to the element. No
Image height .image-height-1 to image-height-50 Block or inline Sets the height of images inside an element, in lines Yes
Image with caption .image-with-caption Block Used for paragraphs that start with an inline image, and turns the text in the paragraph into a caption. Makes simple images with captions quick and easy. Apply {:.image-with-caption} directly after the paragraph that contains an inline image. No
Indent paragraph .epub-indent, .pdf-indent, .web-indent Block Page-refinement utility class to ensure a paragraph begins with a text indent, when CSS isn’t sufficient to apply one automatically. Yes
Keep together .keep-together Block or inline Prevents an element from breaking across pages. (E.g. you want to keep a short list on the same page.) Apply {:.keep-together} to the end of the entire element. You can also apply it to a span (e.g. a phrase, like <span class="keep-together">24/7</span>) to prevent it breaking over a line. Yes
Keep with next .keep-with-next Block Prevents a page break between this element and the next one. Apply {:.keep-with-next} below the first element, to make sure it stays with the following element. No
Letter .letter Block Formats a blockquote as a letter, by spacing the paragraphs in it. Add > to the beginning of each line of the letter, to create a blockquote, then apply {:.letter} directly below the entire blockquote. No
Logo image .logo Block Used for making images small, especially for small logos in text like on acknowledgements pages. Add {:.logo} immediately below the markdown image tag. No
Page break after .page-break-after Block Creates a page break after the element. Place {:.page-break-after} directly below the element preceding your desired page break. No
Page break after, end of book .page-break-after-right Block When applied to the very last element in the book, ensures a blank verso for an even-numbered page extent. Apply {:.page-break-after-right} to the last element. No
Page break before .page-break-before Block Starts its element on a new page. Apply {:.page-break-before} after the element that should come after the page break. No
Page break: allow .allow-break Block Allows an element to break over a page where the default styles would normally prevent that (for example a three-bullet list might not break over a page). Apply the class to the parent element, for example place {:.allow-break} directly below the entire list. No
Page numbering restart .page-1 Block Restarts page numbering from 1. Can be added to the first block element on a page by using {:.page-1} after the first element, or to the YAML header, in addition to the main style, e.g. style: halftitle-page page-1 or style: default-page page-1. Recommended for any document that starts a book interior (e.g. title page), to retain correct pagination when creating a screen PDF that has a front cover page. No
Poetry .verse Block Designing poetry is tricky and important. Read about how to manage this in our workflow guide. No
Pull quote .pullquote Block Displays a paragraph as a pull quote. Apply {:.pullquote} directly below the block of text. No
Redact content .redact Block or inline Redacts text and images in PDF outputs No
Shift element down .shift-down, .shift-down-n Block Shifts an element down in the document on output, where n is the number of sibling elements to shift it down by. No
Shift element up .shift-up, .shift-up-n Block Shifts an element up in the document on output, where n is the number of sibling elements to shift it up by. No
Show URL .show-url, .pdf-show-url, .epub-show-url Inline Apply to a link to show the URL in parentheses after the linked text in epub and PDF, PDF only, or epub only. For epub, this applies only to some e-ink ereaders. No
Show page number .show-page-number Inline Apply to a link to show the page number in parentheses after the linked text in PDF. No
Show roman page number .show-page-number-lower-roman Inline Apply to a link to show a roman-numeral page number in parentheses after the linked text in PDF. No
Sidenote .sidenote Block or inline A sidenote appears in a sidebar to the right of the text. Apply {:.sidenote} below the block of text. No
Small caps (lowercase only) .smallcaps Block or inline Works if your font supports proper small-caps glyphs. Only affects the lowercase letters. Apply {:.smallcaps} to the span inline (e.g. use * like italics) or directly below the block of text. This class avoids making * and ** spans bold or italic. So add .italics or .bold if you also need to italicise the small caps or make them bold. No
Small caps throughout .allsmallcaps Block or inline If your font supports proper small-caps glyphs, this makes all characters small caps, including capital letters. Apply {:.allsmallcaps} directly after a span element inline or directly below a block of text. Add .italics or .bold if you needed to italicise or make bold. No
Source after a quotation .source Block Add this to the source (e.g. name and/or title) for a preceding quotation. Apply {:.source} below the block of source text. No
Start on right .start-on-right, .start-on-recto Block Creates a page break to start a new right-hand page. Apply to page frontmatter to start a chapter on the right, e.g. style: default-page start-on-right. No
Table caption .table-caption Block Add {:.table-caption} in the line immediately after a table caption. Table captions must always appear above tables, not after them. No
Title page: author .title-page-author Block The book’s author(s) on the title page. No
Thumbnail figure .thumbnail, .pdf-thumbnail, .web-thumbnail, .epub-thumbnail Block Apply to figures to create a small, floated thumbnail. Format-specific classes allow different layouts for PDF, web and epub. No
Title page: logo .title-page-logo Block A logo, as an image, on the title page. Apply {:.title-page-logo} below the markdown image tag. No
Title page: subtitle .title-page-subtitle Block The book’s subtitle on the title page. Apply {:.title-page-subtitle} directly below the subtitle. No
Title page: title .title-page-title Block The book’s title on the title page. Apply {:.title-page-title} directly below the title. No
Tracking: tighten .tighten-1 to .tighten-50 Block or inline Each increment tightens the space between letters by 0.001em (1/1000 of a em). E.g. add {:.tighten-5} directly below a paragraph to reduce its letter-spacing by 5/1000em. Affects print output only. Yes
Tracking: loosen .loosen-1 to .loosen-50 Block or inline Each increment loosens the space between letters by 0.001em (1/1000 of a em). E.g. add {:.loosen-5} directly below a paragraph to increase its letter-spacing by 5/1000em. Affects print output only. Yes
Valediction .valediction Block Used for the sign-off at the end of a letter, preface or foreword. Add {:.valediction} directly below the sign-off line. No
Visually hide .visuallyhidden Block or inline Used to hide elements from view, but not from screen readers. No
Width .width-1 to .width-100 Block Applied to .verse (only for PDF output) and to figures to set their width as a percentage No

Reserved classes

You may also need to create your own classes for other uses. If you do, avoid using the same already-supported class names above. You should also avoid using the following ones, which are reserved for specific structural elements.

Class name Reserved for
home The landing page for the web edition.
cover-page A front cover, which will appear in ebook editions, used for the style value in file YAML headers
halftitle-page A book’s halftitle page, used for the style value in file YAML headers
previous-publications-page A book’s list of the author’s previous publications, used for the style value in file YAML headers
title-page A book’s title page, used for the style value in file YAML headers
copyright-page copyright or imprint page, used for the style value in file YAML headers
contents-page A book’s table of contents, used for the style value in file YAML headers
dedication-page A dedication page, used for the style value in file YAML headers
epigraph-page An epigraph page, used for the style value in file YAML headers
frontispiece-page A frontispiece page, used for the style value in file YAML headers
frontmatter-page For other prelim pages not accounted for otherwise, used for the style value in file YAML headers
default-page A book’s default page (and the global default), used for the style value in file YAML headers

The edition suffix

If you want to produce more than one print edition of a book from the same source file, you can’t use the same classes that affect text-flow – like .tighten-1, for instance – in both editions, because the text will flow differently in each edition.

Our workflow has a way to manage that. In the print CSS file, you can specify an edition suffix. For instance, if you’re producing a schools edition of a book, you might make your suffix -schools-edn. That suffix will be appended to the end of certain class names for that stylesheet. The default .tighten-1 class will become .tighten-1-schools-edn in your final print CSS.

(It’s a good idea to start a suffix with a hyphen and use all lowercase letters, to keep your output CSS neat. Never use spaces.)

Only some classes are affected – see the table above for which ones. The most important are the classes used for tightening and loosening letter-spacing, which are mostly used to control widows and orphans in print layout.

In your markdown, then, you’d use {:.tighten-1-schools-edn} instead of {:.tighten-1}, and that class will then only have an effect on your schools edition. If you had another edition, say a large-print edition with a -large-print suffix, you’d use a {:.tighten-1-large-print} tag in the markdown. These would match the classes automatically generated in each edition’s CSS.

Of course, one element can carry both classes. For instance, you might end up with a paragraph tagged with {:.tighten-1-schools-edn .tighten-1-large-print}. That paragraph would then be tightened in both print layouts.

Deprecated classes

Early versions of the EBW used the following classes, which are no longer supported: