Usually, when making up texts for the web, the design of quotes is not paid enough attention. Trying to correct this unfortunate misunderstanding, we will touch upon two issues: the typographical design of quotes (in the part where errors are most often made during layout) and the implementation of this design in HTML code.

We will also not touch upon the questions of checking the semantic accuracy of citations, the proper use of bills, abbreviations and additions - the “Publisher and Author Handbook” by A.E. Milchin and L. K. Cheltsova is waiting for all those interested.

We hope that this record will be conveniently used as a guide to frequently encountered questions of the design of quotations.
')

Typographical typography

Quotes

Quotations inside the text, typed in the same way as the main text, are enclosed in quotes. If the quotation is highlighted in color, font size, another font, italic, or the quotation is in a separate graphically selected block of text, then the quotes are not placed. Also quotes-epigraphs are not distinguished by quotes if they are not accompanied by non-quotational text.

Quotes are put only at the beginning and end of the quotation, regardless of the size of the quotation and the number of paragraphs in it.

Quotes are in quotes of the same pattern as used in the main text as the main ones - in the overwhelming number of cases these are quotes-Christmas trees "".

If inside a quote there are words (phrases, phrases), in turn, enclosed in quotes, the latter should be of a different pattern than quotes that close and open the quotation (if external quotes are Christmas trees "", then internal quotes are “„, ”and vice versa ). For example: Vasyl Pupkin declared in a recent interview: “Pupstroytrest Company took the honorable six hundred and twelfth place in the rating of construction companies in Zaporizhia”.

If the quotation contains quotation marks of the “third degree,” that is, inside quotational phrases, quotations are, in turn, words, quoted, as the latter, quotation marks of the second pattern are recommended, that is, paws. An example from Milchin and Cheltsova: M. M. Bakhtin wrote: “Trishatov tells a teenager about his love for music and develops the idea of ​​an opera in front of him:“ Listen, do you like music? I love terribly ... If I composed an opera, then, you know, I would take a plot from "Faust". I love this topic very much. ” But in general, it is better to try to reorganize the design of the quote in such a way that such cases do not arise.

Punctuation after a quote at the end of a sentence

If the sentence ends with a quote, the dot is always put after the closing quote. The point is not put in the following cases.

1. If there are ellipsis, exclamation mark or question mark before the closing quotes, and the quotation enclosed in quotes is an independent sentence (as a rule, all quotations are after the colon separating them from the words of the quoting person). In this case, the punctuation mark is placed inside quotes . An example from Milchin and Chelcova:
   Pechorin wrote: “I don’t remember a morning bluer and fresher!”
   Pechorin confessed: “I sometimes despise myself ...”
   Pechorin asks: "And why was the fate of throwing me into a peaceful circle of honest smugglers?"
2. The same, if a quotation ends with a separate sentence, the first sentence of which begins with a lowercase letter. For example: Pechorin reflects: “... why was the fate of throwing me into the peaceful circle of honest smugglers? Like a stone thrown into a smooth spring, I alarmed their calm ... "
3. If a quotation mark precedes the quotation marks with a question or exclamation mark, the quotation is not an independent sentence, and after the whole phrase with the quotation there should be a question or exclamation mark. For example: Lermontov exclaims in the preface that this is “an old and pitiful joke!”

We emphasize once again, in other cases a full stop is put at the end of the sentence, and it is put after the closing quotation mark.

Quote with words quoting inside

Despite the fact that there is a quotation inside the quotation, quotation marks are still put only once - at the beginning and at the end of the quotation. It is not necessary to put a closing quote before quoting and again opening words after them.

If there are no punctuation marks in the place of a quote break, or a break occurs at the place of a comma, a semicolon, a colon or a dash, then the quoting words are separated from both sides by a comma and a dash ", -" (do not forget that there must be an unbreakable space before the dash! ).

In source	In the text with a quote
I became incapable of noble impulses ...	“I,” Pechorin admits, “have become incapable of noble impulses ...”
... My heart is turning to stone, and nothing will warm it again.	"... My heart is turning to stone," Pechorin hopelessly concludes, "and nothing will warm it up again."
Too one-sided and strong interest excessively increases the tension of human life; one more push and the person goes crazy.	“Too one-sided and strong interest excessively increases the tension of human life,” D. Kharms reflects, “one more push, and the person goes crazy.”
The goal of every human life is one: immortality.	“The goal of every human life is the same,” writes D. Harms in his diary, “immortality.”
Real interest is the main thing in our life.	“Genuine interest,” says D. Harms, “is the main thing in our life.”

If there is a dot in the source of a quote break in the source, then a comma and a dash ", -" are put in front of the quoting words, and after his words - a dot and a dash ". - "(do not forget about the inseparable space!), And the second part of the quotation begins with a capital letter (in common people also called" big "or" capital ").

In source	In the text with a quote
... My heart is turning to stone, and nothing will warm it again. I am ready for all sacrifices except this ...	“... My heart turns to stone, and nothing will warm it again,” Pechorin concludes. “I am ready for all sacrifices except this one ...”

If there is a question mark, exclamation mark or ellipsis in the place where the quotation breaks out in the source, then this sign and a dash “? -; ! -; ... - ", and after his words - a point and a dash". - "if the second part of the quote begins with a capital. If the second part of the quotation begins with a lowercase letter (in common people also called “small”), then after the words of the quoting a comma and a dash “, -” are put.

In source	In the text with a quote
I sometimes despise myself ... is it because I despise others as well? .. I have become incapable of noble impulses; I'm afraid to look ridiculous to myself.	“I sometimes despise myself ... is it because I despise others too? ..,” Pechorin admits. “I have become incapable of noble impulses ...”
... Forgive love! my heart turns to stone and nothing warms it up again.	“... Forgive love! - writes Pechorin in his journal, - my heart turns to stone ... "
This is some innate fear, an inexplicable foreboding ... After all, there are people who are unconsciously afraid of spiders, cockroaches, mice ...	“This is some innate fear, an inexplicable foreboding ...” Pechorin is looking for explanations. “After all, there are people who are unaccountably afraid of spiders, cockroaches, mice ...”

Making quotes in the code

Many people forget that the HTML 4.01 standard already contains elements for formatting quotes typed inside the text, and either do not use them at all, or (worse,) put quotes inside the tags … or … It was also cited to observe the use of the blockquote element to create indents, which is also unacceptable from the point of view of observing the semantic of the layout.

So, to highlight quotes, two elements are used: a blockquote block and an inline q . In addition, the inline element cite used to describe the source from which the quote was taken. Please note that cite used solely and is necessary to indicate a link to the source, the quote itself inside the cite element is not included!

According to the HTML 4.01 specification , the blockquote and q elements can use the attributes cite="…" indicating the URL from which the quote was borrowed (not to be confused with a separate cite element), and title="…" , the contents of which will pop up as a hint when hover on quote by mouse.

Unfortunately, browsers don't handle these HTML elements very well. So, the attribute cite="…" not rendered by any browsers at all. In order to circumvent this flaw, there is a Paul Davis script that displays a tooltip on a separate layer with a link specified in the cite attribute.

The second global flaw associated with the withdrawal of inline quotes is connected (surprise, surprise!) With the Internet Explorer family of browsers. Again, according to the specification, the author of the document should not type quotes when using the q element. Quotes should be rendered by the browser, and in the case of the presence of nested quotes - also a different picture. Okay, let's say Opera does not comply with the latter requirement, and the quotes in nested quotes are the same. But IE to the seventh version inclusive does not render them at all!

In addition, IE does not understand the CSS properties quotes , before , after and content , which, brute, completely buries the hopes of solving a problem with the help of semantically correct layout using CSS.

This problem is solved in several ways:

• using the proprietary CSS property behavior ( Paul Davis solution ), which launches JavaScript, arranges quotes in IE, and the picture of nested quotes alternates;
• using conditional comments, simply executing JavaScript when the page loads (the solution of Jez Lemon from Juicy Studio), while the pattern of nested quotes is constant;
• or zeroing quotes in CSS using the quotes property and placing quotes in the text manually, but (attention!) outside the q element, so as not to violate the recommendations of the W3C ( Stacy Cordoni's solution on the A List Apart website).

The latter method seems to me the same deal with conscience as an attempt to find a way to get around the restrictions on Shabbat - a violation of the spirit while observing the letter of recommendations.

Therefore, choosing the second method from the first two, we use the Jez Lemon script, which is slightly modified for the Russian language. Yes, with javascript disabled, the IE user will be left without quotes, we take it as a necessary evil.

Our solution for quotes

So, in order to adequately create text with quotes, you need to download the quotes.js script , and then connect it inside the head element using conditional comments:

<!--[if < IE 7]>
<script type="text/javascript" src="quotes.js"></script>
<![endif]-->

In addition, for browsers that adequately render quotes, you need to specify the quotes for the Russian language in the CSS file. Fortunately, in Russian typography, nested quotes have one image regardless of the nesting level (which is easy to implement in CSS without attracting additional classes), but we once again strongly recommend avoiding deep nesting quotes at the stage of writing the text.

// CSS-
// -
q { quotes: "\00ab" "\00bb"; }

// -
qq { quotes: "\201e" "\201c"; }

It is clear that, if necessary, this mechanism can be complicated in the case of alternating quotation patterns with deep nesting, by introducing classes, for example, q.odd and q.even and pointing the class with the hands directly during the layout of the quotation.

Now we easily and semantically impose the following quotation: “The success of the Zalgiris campaign,” said Vladimiraras Pupkins in an interview with Russia Today, is due not only to the choice of vendors of toothpaste, but also to what Mark Twain called “leap beyond the door leading in” "".

<q cite="http://russiatoday.com.org.uk.lv" title=" «Russia Today»"> „“,&nbsp;— „Russia Today“ <cite> </cite>,&nbsp;— , , <cite> </cite> <q title=" "> , </q></q>.

Most gusto is that the title="…" attributes for nested tags are processed by browsers correctly.

Writing an example for correctly sharing nested blockquote , q and cite elements is left to the reader as homework. :)

Update: Amendment from besisland - of course, to set the quotes in CSS, you do not need to describe nested styles, the standard functionality of the quotes property is enough: q {quotes: "\00ab" "\00bb" "\201e" "\201c";}