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 |
Color conversion | .prince-pdf-color-conversion-none |
Block or inline | Prevents Prince fomr applying the document’s output-intent color profile to an element, e.g. an image that you want to keep grayscale. | 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:
shrink
tighten
,tight
,x-tight
,xx-tight
,xxx-tight
loosen
,loose
,x-loose