Оформление текста

Текст на HTML-странице должен не только "вписываться" в основной дизайн, но еще и удобно читаться. Кроме правильного выбора гарнитуры и размера, немалую роль играют и другие параметры текста. Все они пришли в Web из полиграфии и нашли здесь достойное применение. У нас не так уж много средств, позволяющих оформить текст и расставить в нем акценты: начертание, междустрочные интервалы, расстояние между буквами, выравнивание, отступы - вот, собственно, и все. Попробуем разобраться, в каких случаях следует применять эти параметры для оформления текста.

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

В тексте самой статьи при необходимости можно выделить ключевые фразы. Для этого уместнее всего использовать жирное начертание (полужирное, чаще его называют именно так) или курсив. При этом надо учитывать, что полужирное начертание визуально выделяет фрагмент в тексте. Читатель, как правило, обращает на него внимание еще до того, как дочитает текст до места выделения. Поэтому полужирное начертание больше подходит для оформления заголовков и подзаголовков. Даже без увеличения размера заголовка его полужирный шрифт визуально выделяет его из основной массы текста.

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

На новостных лентах часто используется такой прием: первый абзац текста выделяется курсивом, а последующие имеют обычное начертание. В тексте, полностью набранном курсивом, фрагмент текста можно выделить обычным начертанием.

Давайте попробуем реализовать это при помощи CSS. Запишем таблицу стилей для оформления статьи. В ней будет немного правил. Одно правило будет задавать стиль заголовка статьи - размер заголовка будет в 1,4 раза больше основного текста. Второй стиль, задающий гарнитуру Arial для шрифта, будет для текста абзаца. Для первого абзаца придется определить отдельный класс "firstp", меняющий начертание с обычного на курсивное. И последнее правило будет менять начертание внутри элемента ЕМ для первого абзаца с курсивного на обычное. Итак, получим таблицу стилей:

Н3{font:1.4em Arial, sans-serif} P{font-family: Arial, sans-serif} P.firstp{font-style:italic} P.firstp EM{font-style:normal}

А теперь наберем текст самой статьи:

<НЗ>Заголовок статьи</НЗ> <Р class="firstp">Первый абзац <ЕМ>полностью</ЕМ> набирается курсивом, чтобы выделить основную мысль текста и обратить на себя дополнительное внимание.</ Р> <Р>Основной текст новостной статьи. Оформляется обычным начертанием. Выделение внутри создается <ЕМ>курсивом</ЕМ>, чтобы не поменять оптическую насыщенность строки и раньше времени не привлечь к себе внимание. </Р> <Р>Еще один абзац статьи, в нем выделение будет создано при помощи <STRONG>полужирного</STRONG> начертания, оно будет сразу бросаться в глаза!</Р>

В браузере такая статья будет выглядеть так, как показано на рисунке:

Заголовок статьи Первый параграф полностью набирается курсивом, чтобы выделить основную мысль текста и обратить на себя дополнительное внимание. Основной текст новостной статьи. Оформляется обычным начертанием. Выделение внутри создается курсивом, чтобы не поменять оптическую насыщенность строки и раньше времени не привлечь к себе внимание. Еще один параграф статьи, в нем выделение будет создано при помощи полужирного начертания, оно будет сразу бросаться в глаза!

При этом внешний вид текста можно еще улучшить. Давайте рассмотрим несколько примеров. В первую очередь, хочется изменить выравнивание абзацев. Сейчас для них установлено выравнивание по левому краю, что является значением по умолчанию. Для такого рода статьи больше подойдет выравнивание по ширине, тогда текст будет смотреться аккуратнее и колонка текста будет ровнее. Делается это заданием свойства text-align:justify, при этом незначительно увеличатся расстояния между словами в строке, чтобы выровнять общую длину строк.

Р{font-family: Arial, sans-serif; text-align: justify;}

He всегда хорошо смотрится наличие абзацных отступов между абзацами. В HTML мы не имеем возможности регулировать размер таких отступов или удалять их совсем. При помощи CSS это можно сделать довольно легко. Вспомним, что абзац - это блок, и у него есть поля (margin), которым можно придать даже отрицательные значения. Таким образом, если в CSS-правило мы допишем свойство, отвечающее за размеры полей, то сможем регулировать абзацные отступы. Давайте удалим отступы, для этого воспользуемся краткой записью свойства margin:0. Теперь правило примет вид:

Р{font-family:Arial, sans-serif; text-align:justify; margin:0}

После этого абзацы будут следовать друг за другом, без отступов, с выравниванием по ширине:

Заголовок статьи Первый параграф полностью набирается курсивом, чтобы выделить основную мысль текста и обратить на себя дополнительное внимание. Основной текст новостной статьи. Оформляется обычным начертанием. Выделение внутри создается курсивом, чтобы не поменять оптическую насыщенность строки и раньше времени не привлечь к себе внимание. Еще один параграф статьи, в нем выделение будет создано при помощи полужирного начертания, оно будет сразу бросаться в глаза!