“Орнаменты [...], снижение строк [...], снижение [...] и все остальное имеют свои области применения, но самое простой, безошибочный и ненавязчивый способ маркировки отступов – это простой отступ”.
Отступ первой строки абзаца, или любого блочного элемента достигается в CSS через свойство 'text-indent':
p {
text-indent:1em }
Предыдущее правило будет делать отступ после каждого параграфа, однако нам нужно увеличить отступ в параграфах, которые следуют за таким же параграфом. Для достижения этой цели может быть использован смежный селектор:
p + p {
text-indent:1em }
Кроме того, строчные пробелы между параграфами, которые большинство браузеров вставляют по умолчанию, должны быть отключены. Браузеры создают эту строку добавляя верхние и нижние поля к параграфу; нижние поля должны быть отключены во всех параграфах, а верхние поля удалены с тех параграфов, которые следуют за таким же параграфами:
p {
margin-bottom:0 }
p + p {
text-indent:1em;
margin-top:0 }
Не существует никакого предела в количестве отступа, но возможно вы захотите начать с описания площади. Это может быть достигнуто установлением отступа с тем же значением, что и высота строки.
Следует отметить, что Интернет Експлорер не поддерживает смежный селектор. В предыдущих примерах, ИЕ6 не сделает отступа ни перед каким параграфом, кроме тех параграфов, которые будут отмечены строкой.
Отступы – это не единственный путь идентификации параграфа. Есть много альтернатив: простые блочные параграфы, орнаментированные отступы, орнамент в виде неразрывного потока или опущенная строка.
Блочные параграфы.
Как отмечалось ранее, блочные параграфы – это параграфы разделенные строкой – метод используется браузерами по умолчанию. Как объяснялось в § 2.2.2, поля разделения параграфов должны быть установлены в том же значение, что и высота строки, для того, чтобы сохранялся ритм текста.
Уменьшение
Маркировка параграфов за счет уменьшения их к полям достигается тем же путем, что отступы: простое использование отрицательных чисел для отступов.
p {
margin-bottom: 0 }
p + p {
text-indent:-1.5em;
margin-top:0 }
Орнаменты
Орнаментальные отступы, в отличие от стандартных отступов, не обязательно требуют использования свойства ‘text-indent’ для достижения основного эффекта (хотя оно может помочь ясности). Ключом к достижению этого эффекта является использование CSS 2.1: до псевдо-элемента указать орнамент. Следующий пример вставляет цветочные сердца в начале последующего параграфов:
p {
margin-bottom: 0 }
p + p:before {
content: "2767";
padding-right: 0.4em;
margin-top:0 }
В приведенном выше примере, применяя ‘text-indent’ к параграфу приведет к возникновению орнамента в первой строке параграфа; чтобы отделить орнамент от контента нужно применить ‘padding-right’ к основному контенту.
Другое использование орнаментов, в качестве абзаца, должно иметь непрерывный поток текста с параграфами, разделенными орнаментом. Чтобы добиться этого, параграфы должны быть установлены для отображения в качестве встроенных элементов, с орнаментом установленным как показано раньше (в данном случае декоративные 'pilcrow’ используются вместо цветочных сердец):
p { display: inline }
p + p:before {
content: "2761";
padding-right: 0.1em;
padding-left: 0.4em }
Следует отметить, что упомянутые правила орнамента не будут работать в Internet Explorer (до версии 7 на момент написания статьи), так как он не поддерживает содержание свойства CSS. Кроме того, Firefox на Windows (проверено на XP SP2 на момент написания статьи) будут отображаться только те орнаменты, которые содержатся в текущем шрифте. По существу, эти ограничения означают, что вышеупомянутая техника не может полагаться на работу на машинах Windows, в настоящее время. Альтернативный метод – это использование фоновых изображений, или включение реальных изображений в код, который, в случае калибровки в EMS, изменялись бы в размере в пропорции к тексту.
Droplines.
Такие параграфы начинаются на одну строку ниже относительно конца предыдущего параграфа. В отличие от других упоминающихся стилей, таких параграфов в длинных текстах невозможно последовательно достичь в CSS без непомерно длинных файлов CSS или (предпочтительно) помощи JavaScript.
Техника, которая может быть применена, похожа на технику, используемую для непрерывного потока текста, который использует дисплей: встроенная для достижения горизонтального позиционирования. Как только параграфы позиционированы горизонтально, относительная высота эквивалентная высоте строки, применимая к последующим параграфам. Может создать желаемое вертикальное положение (и, следовательно, полный эффект снижения)
p {
display: inline;
position: relative }
p + p {top: 1.3em }
Проблема с этим подходом в том, что вертикальное положение не относится к предыдущему параграфу. Только родительский блок, и все последующие параграфы после опущенного параграфа появляются, чтобы быть частью непрерывного текста. Для достижения полного эффекта не обходимо, чтобы каждый последующий параграф имел несколько исходных позиций:
p {
display: inline;
position: relative }
p + p {top: 1.3em }
p + p + p {top: 2.6em }
p + p + p + p {top: 3.9em }
Указание лидирующих позиций таким образом, громоздкое, и вполне разумное для реализации в JavaScript. Техники могут быть применимы для показа материала, где есть только короткие промежутки текста.
