Оформление цитаты в блоге - blockquote

quote blockquote blogger blogspot

Правильное оформление цитирования - очень хорошая привычка при ведении блога.
Цитаты должны отличаться от основного текста статьи и легко читаться, это не просто монотонный скопипастенный текст. Читатель должен понять, что вы хотите донести до него, уловить вашу мысль.

Для цитат есть специальный HTML тег blockquote. Его аналог в редакторе поста в Blogger - это кнопка с двойной кавычкой. Сама область с цитатой должна быть практичной, красивой, а не размахай на 1000px, как я видел на одном блоге.

Пример 1


Цитата:
Гурбангулы Бердымухамедов украл у Танирбергена Бердонгарова кораллы.

скороговорка


Код оформления:
blockquote {
background:#f9f9f9;
border-left:10px solid #ccc;
margin:1.5em 10px;
padding:.5em 10px;
}

blockquote:before {
color:gray;
content:open-quote;
font-size:4em;
line-height:.1em;
margin-right:.25em;
vertical-align:-.4em;
}

blockquote p {
text-align:right;
color: #60758a;
}

blockquote - оформляет блок цитаты, где:
  • background - цвет фона
Если сюда добавить возможные шрифты, типа:
font: italic 1.4em Georgia, "Times New Roman", Times, serif;, то получим такой вид цитаты (отступы margin и padding нужно подровнять):


Или же эту строчку можно добавить в следующий блок, чтобы правило распространилось только на кавычку.

blockquote:before - открывающая кавычка, где:
  • color - цвет кавычки
  • content:open-quote - тип кавычки
  • font-size:4em - размер кавычки

blockquote p - оформляет подпись цитаты, где:
  • text-align - выравнивание
  • color - цвет текста

Код цитаты:
<blockquote>
Гурбангулы Бердымухамедов украл у Танирбергена Бердонгарова кораллы.
<p>
скороговорка</p>
</blockquote>
Подпись заключил в тег p ради разнообразия (см. выше blockquote p).

Так же возможно определить сам вид кавычки.

Пример 2


Цитата:
Гурбангулы Бердымухамедов украл у Танирбергена Бердонгарова кораллы.

Код оформления:
q {
 font-family: Times New Roman, Times, serif;              
 font-style: italic;                             
 color: #273b4e;                                 
 quotes: "\201c" "\201d";                 
}
Фон и размеры по вкусу.
А вот и сами кавычки - quotes: "\201c" "\201d";

Код цитаты:
Гурбангулы Бердымухамедов украл у Танирбергена Бердонгарова кораллы.

Коды кавычек:
quotes table html css

Единственная запара - это то, что прорисовка кавычек не всегда одинакова во всех браузерах, так что приходится проверять во всех трёх (O, F, Ch). Коды оформления записываются разово в шаблон Blogspot (как правило, область css начинается после тегов ]]></b:skin>), коды цитат используются в статьях в html режиме редактора сообщений.
С линуксом немного сложнее, там другие, свободные, шрифты и все кавычки выглядят несколько иначе.

Ссылки по теме::
quotes тег. Справочник по CSS
Playing with BLOCKQUOTE and CSS
htmlbook.ru - CSS - quotes

1 комментарий: