Quote

To quote someone means to recognize her or his thoughts as part of our own. We may agree or disagree, but we should refer to them correctly.

A single word or short piece of text is usually quoted in the running text and is called an inline quote. A longer text segment is usually quoted as separate block and called a blockquote.

Some quotes should attract immediate attention while scanning the page. These are hero quotes and Perplex provides the attribute {.blockquote-hero} to style them.

Inline Quotes

Quotes in the running text just need to be enclosed by quotation marks.

When we type “I quote you” we simply get “I quote you”.

But our keyboard usually doesn’t show these typographically correct curly quotation marks and we like to use the directly available straight ones, which get then replaced by our software.

Substitution of English quotation marks

Hugo replaces the typographically dumb straight quotes with the correct curly ones by default — this is the responsibility of the typographer extension. We can use " — straight quotes — like this:

"An inline quote" for “An inline quote”

And a single word or a quote inside a quote is marked with ' — single straight quotes:

"A quote 'inside'" for “A quote ‘inside’”

In French, Swiss. and German (partially)

We can open French and Swiss quotes with two < angled brackets and close them with two > in the other direction. They get replaced with nice guillemets (not guillemots!).

<<Pardon my French>> for «Pardon my French»

In German publishing we usually find guillemets the other way around:

>>Zahnstocher<< for »Zahnstocher«

We get into trouble with these, when we start a line with >>, because the > is also the sign for a quotation block. We can begin the line with an invisible entity like the zero width joiner ‍ for a quick workaround:

‍»Noch einen Zahnstocher, bitte!«

But now we miss out on the micro-typographic feature of hanging quotes.

General Solutions

Because the typographer can’t handle other languages, we need to think about a way to include them directly

Keyboard Shortcuts

We can learn key combinations to include often needed punctuation. Unfortunately, they depend on the operating system and the keyboard layout. On some systems, they are relatively easy to remember, on others, they are practically useless. But you could give it at least a try and look them up for your configuration.

HTML entities

We get the German Gänsefüßchen „ and “  with „ and “ for example. Entities look weird in text files, but the result is as good as the original Unicode characters.

Blockquote

Every line of a block quotation has to start with a right angled bracket, empty lines included:

> It is a paradisematic country, in which roasted parts of sentences fly into
> your mouth. Even the all-powerful Pointing has no control about the blind
> texts it is an almost unorthographic life.
>
> One day however a small line of blind text by the name of Lorem Ipsum decided
> to leave for the far World of Grammar.[^1]

The result is an indented block with a slightly smaller font size and two paragraphs:

It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life.

One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.¹

Blockquotes may include additional markup because we need emphasis, inline quotes, links, footnotes and other inline markup and maybe even lists inside quotations. The CommonMark specification allows to use all elements of Markdown inside of a blockquote — theoretically.

But think of nested blockquotes or tables inside of blockquotes in practice. They can become an aesthetic nightmare. This theme does not support every possibility. Feel free to file an issue in the theme repository, if some important option has no suitable layout.

Hero quote

Because there is only one possible markup for blockquotes described above, we have to use the attribute .blockquote-hero. The last lines of a hero quote look like this:

> name of Lorem Ipsum decided to leave for the far World of Grammar.
>  ---  Famous Person
{.blockquote-hero}

This produces the following layout:

It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
 —  Famous Person

The author of a hero quote — the “hero” — is usually cited by name. To move the name to the right, it has to be tagged with the replacement code for a citation.

Hanging quotes

Micro-typography is usually missing on the web, but it’s possible to generate hanging quotes at the beginning of a paragraph for Unicode quotes. They are applied to English “quotes”, French «guillemets», »German guillemets«, and German „Gänsefüßchen“.

“This is a quote surrounded by English double quotes”

«Pardon my french»

»Könnte ich bitte einen Zahnstocher bekommen?«

„Könnte ich bitte noch einen Zahnstocher bekommen?”