Отступ для вставки цитаты

Иногда в постах мы вставляем чужие тексты, цитируем фрагменты. Если цитируем одну фразу — ее лучше, конечно, просто вставить в текст и поставить ссылку. А если фрагмент?

Сравните два варианта:

Понаписан какой-то текст / Понаписан какой-то текст /Понаписан какой-то текст /Понаписан какой-то текст /Понаписан какой-то текст /Понаписан какой-то текст /Понаписан какой-то текст /Понаписан какой-то текст /Понаписан какой-то текст /Понаписан какой-то текст /Понаписан какой-то текст /Понаписан какой-то текст /Понаписан какой-то текст /Понаписан какой-то текст /Понаписан какой-то текст /Понаписан какой-то текст /Понаписан какой-то текст /Понаписан какой-то текст

или

Понаписан какой-то текст / Понаписан какой-то текст /Понаписан какой-то текст /Понаписан какой-то текст /Понаписан какой-то текст /Понаписан какой-то текст /Понаписан какой-то текст /Понаписан какой-то текст /Понаписан какой-то текст /Понаписан какой-то текст /Понаписан какой-то текст /Понаписан какой-то текст /Понаписан какой-то текст /Понаписан какой-то текст /Понаписан какой-то текст /Понаписан какой-то текст /Понаписан какой-то текст /Понаписан какой-то текст

Думаю, что второй вариант выглядит изящнее. Кроме того, цвет вертикальной линии может быть любой — под дизайн вашего блога.

Приступим, здесь нет ничего сложного. Важно: все делается в режиме «Изменить HTML», а не в визуальном редакторе «Создать» (иначе Blogger напихает кучу ненужных тегов и работоспособность не гарантируется).

Просто вставляем в тело поста код таблицы следующей структуры:

<table border="0" width="100%" cellspacing="5">
     <tr>
          <td bgcolor="#FFF2CC" width="30"> </td>
          <td bgcolor="#A9A9A9" width="1"> </td>
          <td><i>Сюда вставляется текстовый фрагмент.</i></td>
     </tr>
</table>

Рассмотрим, что тут написано и что можно изменять.



1. Начинается таблица.

2. Толщина границы самой таблицы и ее ячеек равна "0", т.е. таблица получается невидимая.

3. Ширина таблицы — 100%. Это означает, что таблица будет занимать всю контентную область вашего блога.

4. Cellspacing — атрибут тега <table>, который задает расстояние между внешними границами ячеек. Используется здесь для того, чтобы ячейки выстраивались не в стык, налезая друг на друга, а были на каком-то расстоянии. Попробуйте заменить "5" на "15" — сразу увидите, что меняется.

5. Все, что размещено между <tr> и </tr> находится на одной строке таблицы.

6. Далее — столбцы таблицы в пределах этой строки. Все, что размещено между <td> и </td> — содержание одного столбца. У нас из здесь 3, т.е. перед нами невидимая таблица из одной строки и 3 столбцов.

7. Атрибут тега <td> bgcolor позволяет закрашивать ячейку в нужный цвет. В нашем случае нужно закрасить ее в цвет фона нашего блога чтобы пользователь визуально не отличал, где фон, а где закрашенная ячейка таблицы. Цвет задается в специальном формате (в моем случае — "#FFF2CC", об этой абракадабре см. подробнее). Как его узнать? Можно, конечно, делать скриншот фрагмента фона, открывать Фотошоп и там получать искомое, но это не изящно. Для таких целей есть специальная программка Colorpicker («цветовзятель»).



Нажимаем "Pick Color", наводим на фон блога и кликаем — в поле "HTML-код" получаем код. Клик на "Copy" и вставляем полученный код между кавычек в bgcolor="". Тоже самое делаем во второй ячейке для определения цвета вертикальной полосы.

8. У каждой ячейки есть ширина изменяемая в пикселах (width=""). В первой ячейке я поставил "30", если хотите больший отступ — увеличивайте число. Во второй ячейке оставьте "1", иначе полоса будет слишком широкой.

9. Между <td> и </td> вставлять &nbsp; необязательно. Это обозначение неразрывного пробела. Без него вертикальная линия получается слишком узкая. Попробуйте убрать — посмотрите. Мне нравится так.

10. Цитату лучше писать курсивом. В типографике курсивное начертание традиционно маркирует наличие «чужого», заимствованного фрагмента в тексте. Вспомним фразу Чацкого (Действие I, Явление 7):

Опять увидеть их мне суждено судьбой! Жить с ними надоест, в ком не сыщешь пятен? Когда ж постранствуешь, воротишься домой, И дым Отечества нам сладок и приятен!

Как известно, перед нами не вполне точная цитата из стихотворения Г.Р. «Арфа» (1798): «Мила нам добра весть о нашей стороне / Отечества и дым нам сладок и приятен». На заимствованный характер стиха указал сам Грибоедов, выделив его курсивом, как бы давая намек читателю на известную ему цитату. Во всех изданиях «Горя от ума» эта строка печатается курсивом.

Дальше осталось только закрыть строку (</tr>) и таблицу (</table>).

Всё, в общем.