Оформление цитат на сайтах

    Обычно при вёрстке текстов для веба на оформление цитат не обращают достаточного внимания. Стараясь исправить это досадное недоразумение, мы коснёмся двух вопросов: типографического оформления цитат (в той части, где чаще всего допускаются ошибки при вёрстке) и реализации этого оформления в HTML-коде.

    Мы также не будем касаться вопросов проверки смысловой точности цитирования, правильного использования купюр, сокращений и дополнений — всех интересующихся ждёт «Справочник издателя и автора» А. Э. Мильчина и Л. К. Чельцовой.

    Надеемся, что эту запись будет удобно использовать как справочник по часто встречающимся вопросам оформления цитат.

    Типографическое оформление цитат

    Кавычки


    Стоящие внутри текста цитаты, набранные так же, как и основной текст, заключаются в кавычки. Если цитата выделена цветом, кеглем шрифта, другим шрифтом, курсивным начертанием, либо цитата вынесена в отдельный графически выделенный блок текста, то кавычки не ставятся. Также не выделяются кавычками цитаты-эпиграфы, если они не сопровождаются нецитатным текстом.

    Кавычки ставятся только в начале и конце цитаты, независимо от размера цитаты и количества абзацев в ней.

    Цитаты заключаются в кавычки такого же рисунка, что и применяемые в основном тексте в качестве основных — в подавляющем числе случаев это кавычки-ёлочки « ».

    Если внутри цитаты есть слова (словосочетания, фразы), в свою очередь заключённые в кавычки, то последние должны быть другого рисунка, чем кавычки, закрывающие и открывающие цитату (если внешние кавычки — ёлочки « », то внутренние — лапки „ “, и наоборот). Например: Василий Пупкин заявил в недавнем интервью: «Компания „Пупстройтрест“ заняла почётное шестьсот двенадцатое место в рейтинге строительных компаний Запорожья».

    Если в цитате встречаются кавычки «третьей ступени», то есть внутри заключённых в кавычки словосочетаний цитаты есть, в свою очередь, слова, взятые в кавычки, в качестве последних рекомендуются кавычки второго рисунка, то есть лапки. Пример из Мильчина и Чельцовой: М. М. Бахтин писал: «Тришатов рассказывает подростку о своей любви к музыке и развивает перед ним замысел оперы: „Послушайте, любите вы музыку? Я ужасно люблю… Если бы я сочинял оперу, то, знаете, я бы взял сюжет из „Фауста“. Я очень люблю эту тему“». Но вообще, лучше попытаться так перестроить оформление цитаты, чтобы таких случаев не возникало.

    Знаки препинания после цитаты, стоящей в конце предложения


    Если предложение заканчивается цитатой, то точка всегда ставится после закрывающей кавычки. Точка не ставится в следующих случаях.
    1. Если перед закрывающими кавычками стоит многоточие, восклицательный или вопросительный знак, а цитата, заключенная в кавычки, является самостоятельным предложением (таковы, как правило, все цитаты после двоеточия, отделяющего их от слов цитирующего). При этом знак препинания ставится внутри кавычек. Пример из Мильчина и Чельцовой:
      Печорин писал: «Я не помню утра более голубого и свежего!»
      Печорин признавался: «Я иногда себя презираю...»
      Печорин спрашивает: «И зачем было судьбе кинуть меня в мирный круг честных контрабандистов?»
    2. То же, если самостоятельным предложением заканчивается цитата, первое предложение которой начинается со строчной буквы. Например: Печорин размышляет: «…зачем было судьбе кинуть меня в мирный круг честных контрабандистов? Как камень, брошенный в гладкий источник, я встревожил их спокойствие...»
    3. Если перед закрывающими цитату кавычками стоит вопросительный или восклицательный знак, а цитата не является самостоятельным предложением и после всей фразы с цитатой должен был бы стоять вопросительный или восклицательный знак. Например: Лермонтов восклицает в предисловии, что это «старая и жалкая шутка!»
    Ещё раз подчеркнём, в остальных случаях в конце предложения ставится точка, и ставится она после закрывающей кавычки.

    Цитата со словами цитирующего внутри


    Несмотря на то, что внутри цитаты находится речь цитирующего, кавычки всё равно ставятся только один раз — в начале и в конце цитаты. Ставить закрывающую кавычку перед словами цитирующего и снова открывающую после них не нужно.

    Если в месте разрыва цитаты отсутствуют знаки препинания, либо разрыв происходит на месте запятой, точки с запятой, двоеточия или тире, то слова цитирующего отделяются с двух сторон запятой и тире «, —» (не забывайте, что перед тире должен стоять неразрывный пробел!).
    В источнике В тексте с цитатой
    Я стал неспособен к благородным порывам... «Я, — признается Печорин, — стал неспособен к благородным порывам...»
    …Моё сердце превращается в камень, и ничто его не разогреет снова. «… Моё сердце превращается в камень, — безнадёжно заключает Печорин, — и ничто его не разогреет снова».
    Слишком однобокий и сильный интерес чрезмерно увеличивает напряжение человеческой жизни; ещё один толчок, и человек сходит с ума. «Слишком однобокий и сильный интерес чрезмерно увеличивает напряжение человеческой жизни, — размышляет Д. Хармс, — ещё один толчок, и человек сходит с ума».
    Цель всякой человеческой жизни одна: бессмертие. «Цель всякой человеческой жизни одна, — записывает в своём дневнике Д. Хармс, — бессмертие».
    Подлинный интерес — это главное в нашей жизни. «Подлинный интерес, — утверждает Д. Хармс, — это главное в нашей жизни».
    Если на месте разрыва цитаты в источнике стоит точка, то перед словами цитирующего ставят запятую и тире «, —», а после его слов — точку и тире «. —» (не забываем про неразрывный пробел!), причём вторая часть цитаты начинается с прописной буквы (в простонародье называемой также «большой» или «заглавной»).
    В источнике В тексте с цитатой
    …Моё сердце превращается в камень, и ничто его не разогреет снова. Я готов на все жертвы, кроме этой… «…Моё сердце превращается в камень, и ничто его не разогреет снова, — заключает Печорин. — Я готов на все жертвы, кроме этой…»
    Если на месте разрыва цитаты в источнике стоит вопросительный знак, восклицательный знак или многоточие, то перед словами цитирующего ставят этот знак и тире «? —; ! —; … —», а после его слов — точку и тире «. —», если вторая часть цитаты начинается с прописной. Если вторая часть цитаты начинается со строчной буквы (в простонародье называемой также «маленькой»), то после слов цитирующего ставится запятая и тире «, —».
    В источнике В тексте с цитатой
    Я иногда себя презираю… не оттого ли я презираю и других?.. Я стал неспособен к благородным порывам; я боюсь показаться смешным самому себе. «Я иногда себя презираю… не оттого ли я презираю и других?.. — признаётся Печорин. — Я стал неспособен к благородным порывам…»
    …Прости любовь! моё сердце превращается в камень, и ничто его не разогреет снова. «…Прости любовь! — пишет Печорин в своём журнале, — моё сердце превращается в камень…»
    Это какой-то врождённый страх, неизъяснимое предчувствие… Ведь есть люди, которые безотчётно боятся пауков, тараканов, мышей… «Это какой-то врождённый страх, неизъяснимое предчувствие… — ищет объяснения Печорин. — Ведь есть люди, которые безотчётно боятся пауков, тараканов, мышей…»

    Оформление цитат в коде

    Многие забывают, что в стандарте HTML 4.01 уже предусмотрены элементы для оформления цитат, набранных внутри текста, и либо вообще их не используют, либо (что ещё хуже) помещают цитаты внутрь тегов или . Также приводилось наблюдать использование элемента blockquote для создания отступов, что так же недопустимо с точки зрения соблюдения семантичности вёрстки.

    Итак, для выделения цитат используется два элемента: блочный blockquote и инлайновый q. Кроме того, инлайновый элемент cite используется для описания источника, откуда была взята цитата. Обратите внимание, что cite используется единственно и необходимо для указания ссылки на источник, сама цитата внутрь элемента cite не включается!

    Согласно спецификации HTML 4.01, элементы blockquote и q могут использовать атрибуты cite="…", указывающий на URL, откуда была заимствована цитата (не путать с отдельным элементом cite), и title="…", содержимое которого будет всплывать в качестве подсказки при наведении на цитату мышкой.

    К сожалению, браузеры ещё не совсем хорошо обрабатывают эти HTML-элементы. Так, атрибут cite="…" никакими браузерами не рендерится вообще. Для того, чтобы обойти эту недоработку, есть скрипт Пола Дэйвиса, выводящий в отдельном слое всплывающую подсказку со ссылкой, указанной в атрибуте cite.

    Вторая глобальная недоработка, связанная с выводом инлайновых цитат, связана (сюрприз, сюрприз!) с семейством браузеров Internet Explorer. Опять же, согласно спецификации, автор документа не должен набирать кавычки при использовании элемента q. Кавычки должны рендериться браузером, причём в случае наличия вложенных цитат — ещё и разного рисунка. Ладно, допустим, Опера не соблюдает последнего требования, и кавычки у вложенных цитат одинаковые. Но IE до седьмой версии включительно не рендерит их вообще!

    Кроме того, IE не понимает CSS-свойства quotes, before, after и content, чем, скотина, полностью хоронит надежды решить проблему с помощью семантически корректной вёрстки с использованием CSS.

    Решается эта проблема несколькими способами:
    • с использованием проприетарного CSS-свойства behavior (решение Пола Дэйвиса), запускающего JavaScript, расставляющий кавычки в IE, при этом рисунок вложенных кавычек чередуется;
    • с помощью условных комментариев, простым выполнением JavaScript при загрузке страницы (решение Джеза Лемона из «Juicy Studio»), при этом рисунок вложенных кавычек постоянен;
    • или обнулением кавычек в CSS с помощью свойства quotes и расстановкой кавычек в тексте вручную, но (внимание!) вне элемента q, чтобы не нарушать рекомендации W3C (решение Стейси Кордони на сайте «A List Apart»).
    Последний способ мне кажется такой же сделкой с совестью, как попытка изыскать способ обойти ограничения в шаббат — нарушением духа при соблюдении буквы рекомендаций.

    Поэтому, выбирая из первых двух второй способ, мы пользуемся слегка модифицированным для русского языка скриптом Джеза Лемона. Да, при отключённом JavaScript пользователь IE останется без кавычек, мы принимаем это как необходимое зло.

    Наше решение по оформлению цитат

    Итак, чтобы адекватно сверстать текст с цитатами, необходимо скачать скрипт «quotes.js», после чего внутри элемента head подключить его с помощью условных комментариев:

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

    Кроме того, для браузеров, адекватно рендерящих кавычки, нужно в CSS-файле указать рисунок кавычек для русского языка. К счастью, в русской типографике вложенные кавычки имеют один рисунок независимо от уровня вложенности (что легко реализовать на CSS без привлечения дополнительных классов), но мы ещё раз настойчиво рекомендуем избегать кавычек глубокой вложенности на стадии написания текста.

    // Добавление в CSS-файл
    // Внешние кавычки-ёлочки
    q { quotes: "\00ab" "\00bb"; }

    // Вложенные кавычки-лапки
    q q { quotes: "\201e" "\201c"; }

    Понятно, что этот механизм при необходимости можно усложнить на случай чередующегося рисунка кавычек при глубокой вложенности, введя классы, например, q.odd и q.even и указывая класс руками непосредственно при вёрстке цитаты.

    Теперь легко и семантично верстаем следующую цитату: «Успех кампании „Жальгириса“, — заявил в интервью „Russia Today“ Владимирас Пупкинс, — обусловлен не только выбором вендоров зубной пасты, но и тому, что Марк Твен называл „прыжком за дверь, ведущую внутрь“».

    <q cite="http://russiatoday.com.org.uk.lv" title="Интервью Владимираса Пупкинса для «Russia Today»">Успех кампании „Жальгириса“,&nbsp;— заявил в интервью „Russia Today“ <cite>Владимирас Пупкинс</cite>,&nbsp;— обусловлен не только выбором вендоров зубной пасты, но и тому, что <cite>Марк Твен</cite> называл <q title="Один из рассказов Марка Твена">прыжком за дверь, ведущую внутрь</q></q>.

    Самый смак в том, что атрибуты title="…" для вложенных тегов браузерами отрабатываются корректно.

    Написание примера для корректного совместного использования вложенных элементов blockquote, q и cite оставляется читателю в качестве домашнего задания. :)

    Update: Поправка от besisland — конечно же для установки рисунка кавычек в CSS не нужно описывать вложенные стили, достаточно стандартной функциональности свойства quotes: q {quotes: "\00ab" "\00bb" "\201e" "\201c";}
    Поделиться публикацией
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 59

      +1
      Большое искреннее спасибо!
        –2
        Спасибо, многим будет полезно!
          0
          Лебедевский вариант простановки знаков препинания в нестандартных ситуациях.
            +33
            Э-э-э… А что тут лебедевского, простите? Я даже слова «хуй» ни разу не употребил…
              +2
              Извините просто хотел немного дополнить вашу статью, но ссылка на слово "Лебедевский" не проставилаь (http://www.artlebedev.ru/kovodstvo/paragraphs/143/)
              (=
                0
                А, ясно. :)

                Что касается этого параграфа Ководства, я глубоко не согласен с тезисом про кавычки в ссылках: «Поэтому при любом удобном случае ссылку нужно ставить до кавычек». ИМХО, в данном случае внешность не так убога, а семантика страдает.
                  0
                  Исправлюсь.
                  Представляю ваш гнев по поводу сравнения с Лебедевым.. :)
                  Статья мне очень понравилась.
                    +1
                    Отнюдь, я к Лебедеву нормально отношусь. Просто он не является последней инстанцией в вопросах дизайна и типографики, несмотря на крайний профессионализм. На самом деле, у многих спорных вопросов такого рода вообще нет «правильного» ответа. :)
                    0
                    Чем страдает семантика?
                      +1
                      Тем, что это ссылка на название, а не название, состоящее из ссылки.
                        0
                        Здесь вопрос в том, являются ли кавычки частью названия? Насколько мне известно, название обрамляется кавычками, то есть кавычки располагаются снаружи названия. То, что при этом название является ссылкой, семантику не нарушает.
                          0
                          Это один из вопросов, на которые не существует «правильного» ответа, а традиция ещё не появилась.

                          Я считаю, что первичен текст, а оформление для веба вторично. То есть, у нас уже есть текст, где название уже обрамлено кавычками. После этого обрамления оно уже составляет с ним единое целое, и ссылка должно охватывать его полностью.

                          У Лебедева аргумент — «Кавычки… просто выглядят по-уродски». На мой взгляд, это немного странный аргумент.
                            0
                            Но они действительно выглядят по-уродски. И, поскольку в данном случае не существует правильного ответа, а традиция ещё не появилась, — почему бы не начать создавать такую традицию своими руками?
                              0
                              Я как раз создаю, но свою, считая, что кавычки должны включаться внутрь ссылки. :) Какой из двух способов победит и победит ли — покажет время, потому что только время способно создать традицию.
                                0
                                Кавычки внутри ссылки ставить чуть удобнее, а вне ссылки — чуть эстетичнее, так что здесь напрашивается аналогия с висячей пунктуацией =)
                                  0
                                  Я лично думаю так:
                                  1) кавычки призваны выделить слово или несколько;
                                  2) выделять сами кавычки не принято (подчёркивать, заключать в кавычки), разве что использовать для них то же начертание, что и для выделяемого ими текста;
                                  3) хорошим тоном считается, когда текс ссылки вполне понятно описывает то место, куда ссылаются (кавычки этому никак не помогают)

                                  То есть аргументов за помещение кавычек в ссылку нет. А вот против есть — эстетика.
                                    0
                                    1) верно, кавычки — парный знак препинания, предназначенный для выделения цитат, названий, прямой речи и слов, употребляемых не в основном смысле

                                    2) знаки препинания выделяют в том случае, если они относятся к выделяемому тексту (а в случае с кавычками и названиями это именно так)

                                    3) текст ссылки (как дополнительного выделения) и является названием, выделенным кавычками
                      0
                      Если кавычки не попадают в ссылку, то последняя гораздо лучше выглядит, и, главное, легче и быстрее читается.
                        0
                        Да нет, я бы не сказал. Конечно, если пример сделать шрифтом 60-го кегля, как в Ководстве, то разница будет видна.

                        Понимаете, подчёркивание ссылки — тоже приём текстового выделения, как курсив или полужирный шрифт, например. Так почему скобки и запятую мы забираем внутрь выделения, а кавычки — нет? Например, в этом тексте не вижу ничего неудобочитаемого.
                          0
                          Потому что скобки по высоте обычно не равны букве и считываются проще. Хотя я и скобки бы не засовывал в ссылку: незачем. А вот запятую надо для удобства чтения. Об неё спотыкаешься, если текст одного цвета, а запятая после — другого. Хотя можно тоже не засовывать (подчёркнутая запятая — некрасиво)
                            0
                            Вы пытаетесь исходить из соображений красиво/некрасиво в каждом конкретном случае вместо того, чтобы пользоваться вполне чёткими и устоявшимися правилами. Непонятно, зачем?
                0
                отличная статья!
                приму к сведенью :)
                спасибо!
                  +2
                  Это классе в седьмом проходят, если не ошибаюсь. Жаль, что большинство после школы напрочь всё забывает.
                    +3
                    В седьмом классе не проходят семантические различия элементов q и cite и способы расстановки кавычек при помощи CSS.
                      0
                      Если хотя бы половина пользователей Интернета просто ставила кавычки руками, не заморачиваясь, это было бы достижение.
                      А каким образом их оформляет тот процент пользователей, который их использует, это уже не так важно.
                        0
                        Согласен.

                        Но содержимое статьи всё же выходит за рамки программы седьмого класса.
                    0
                    Хорошо! При упоминании зарубежных веб-мастеров окончательно убедился в вашем профессионализме :)
                      0
                      Спасибо за комплимент, но я предпочитаю древний подход «по плодам их узнаете их». :)
                        +2
                        Бранил Гомера, Феокрита;
                        Зато читал Адама Смита
                        И был глубокой эконом.
                        0
                        В избранное!
                          +1
                          Странный подход в том, что касается CSS.

                          В спецификации уже предусмотрено всё, что нужно для вложенных кавычек.

                          q{quotes: "\00ab" "\00bb" "\201e" "\201c";}
                            0
                            Спасибо за поправку, погорячился, увлёкшись размышлениями о чередующемся рисунке кавычек.
                              0
                              Да, но вот только не работает это в IE
                                0
                                Речь о том, что не нужно вложенные стили описывать для браузеров, отличных от IE, достаточно стандартного свойства.
                                  0
                                  Исходный вариант тоже не работает.
                                  0
                                  Кстати, а работает ли стандартный способ в Опере? Читал у западных коллег, что Опера по умолчанию отрисовывает кавычки только внешнего рисунка даже для вложенных кавычек.
                                  0
                                  Что касается цитат, в которые вложены слова цитирующего, меня не перестают терзать сомнения: до конца ли верно помещать в том числе и слова цитирующего (не являющиеся частью собственно цитаты) внутрь элемента q?
                                    0
                                    Строго доказать не могу, но считаю, что верно. Кстати, именно для этого и привёл пример со словами цитирующего внутри цитаты.

                                    Процитирую из А. Б. Шапиро, «Современный русский язык. Пунктуация», § 95: «Прямая речь, т. е. точно воспроизводимое высказывание какого-нибудь лица или нескольких лиц, может быть объединена в одно синтаксическое целое [курсив мой] со словами автора, но может передаваться и как самостоятельное предложение или как группа нескольких предложений».

                                    Исходя из того, что это одно синтаксическое целое, справедливо включение слов цитирующего внутрь тега цитаты. Ну, и с точки зрения внешнего оформления тоже всё получается правильно — иначе пришлось бы каким-то образом скрывать правую и левую кавычки у первой и второй части цитаты соответственно.
                                      0
                                      Синтаксическое и семантическое целое — всё же разные вещи…

                                      То, что скрывать пришлось бы, — не такая уж проблема.

                                      Куда больше меня тревожит тот факт, что цитата окажется разбита на два элемента q.
                                        0
                                        Хм, что-то меня понесло, и правда. :) В общем, не вижу я в этом особой проблемы. То есть, разбиение цитаты на две мне видится большим злом, чем включение слов цитирующего, которые обычно носят декоративно-вспомогательный характер, либо (как в случае моей практики) вводят на арену автора цитаты.
                                    0
                                    «Большой, — поднимается и, уважительно склоняя голову, восклицает читатель, — спасибо!»
                                      +2
                                      Гм. Вместо «спасибо» должен был быть «поклон», но так даже трансцендентнее. Открытость трактовке, модель для сборки с вечно выпадающим винтиком. Постмодерн. Компостмодерн.
                                      –2
                                      В большинстве случаев (ну по крайней мере на моей практике) лучше цитаты вручную оформлять.
                                      Не вижу смысла внедрять quotes.js на сайт, в котором заведомо он в лучшем случае будет использован несколько раз за всю "жизнь".

                                      А с вложенными цитатами — это вообще редко встречается.

                                      Обычно &-последовательностей «» хватает.
                                        0
                                        Так тогда давайте и выключку вправо делать при помощи blockquote, и элементы b и i употреблять.
                                          0
                                          Всё верно, но сайты разные бывают. :) В тех проектах, где я работаю, периодически публикуются новости, статьи и пресс-релизы о компании, и там цитаты — буквально в каждой публикации.
                                          0
                                          Но статья хорошая, особенно первая часть)
                                            0
                                            Как раз первая часть вся без исключения входит в школьную программу. :)
                                              0
                                              У нас в школе ничего не говорили про разные рисунки кавычек (вынуждали использовать только лапки) и про "неразрывный пробел" (зато говорили про невозможность переноса тире). =)
                                            +1
                                            заявил в интервью „Russia Today“ Владимирас Пупкинс
                                            по-моему, латиницу в русском тексте кавычками обрамлять не стоит. она и так выделяется за счет другого алфавита.

                                            а статья хорошая.
                                              +1
                                              Мне кажется непоследовательным брать в кавычки кириллические названия и не брать названия на латинице. То есть, нужно либо все названия выделять, например, курсивом, либо уж и кавычки использовать для всех названий, независимо от алфавита. А если в названии слова из разных языков, например, «Наша Russia»?
                                              0
                                              великолепно. большое спасибо.
                                                0
                                                Спасибо, очень интересно.
                                                  0
                                                  Verdana — дерьмовый шрифт, он неправильно рисует кавычки. Отключил у себя в FF возможность страницам задавать свои шрифты и кавычки сразу стали правильными.
                                                    0
                                                    Проф подход к казалось бы к такому малозаметному и даже, наверно, подсознательному восприятию обычного элемента любого текста - цитаты.

                                                    Спасибо за статью.
                                                      0
                                                      Во! Отличная статья и вообще стремление повысить грамотность интернет-населения зачетное. К стыду своему нормально выучить все хитрости русского языка в школе я так и не смог, а в институте (техническом) такого предмета нет.(
                                                      А тут или еще где в инете случаем нет каких-нибудь курсов по изучению русского?)
                                                        0
                                                        А Вы уверены, что в статье использованы верные закрывающие кавычки лапки? Насколько мне известно, пара должна быть направлена «на северо-восток», а не на «северо-запад», и пошло это ещё от перевёрнутых запятых в типографской вёрстке.
                                                          +1
                                                          Ответ был выше: Хабр использует шрифт Verdana в качестве основного, а в Windows у него неправильный рисунок именно этой кавычки. Попробуйте в браузере отключить CSS или скопируйте текст в Word, и всё станет на свои места.
                                                          0
                                                          отлично!
                                                          спасибо!
                                                            0
                                                            спасибо огромное!

                                                            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                            Самое читаемое