CSS: оформляем текст

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

Одним из очень важных элементов оформления текста может служить высота строки, которая задается параметром line-height. На самом деле, это не совсем высота — видимая высота строчки текста определяется размером шрифта, а line-height определяет расстояние между базовыми линиями (baseline) соседних строк.

 

 

Базовая линия — это воображаемая линия, на которой находятся буквы, причем нижние выступающие элементы букв могут находиться за пределами этой линии. Говоря простым языком, высота строки — это расстояние между нижними границами соседних строк. В типографиях высоту строки называют красивым словом «интерлиньяж», но в веб-дизайне этот термин не прижился.

Высота строки довольно сильно влияет как на восприятие и легкость чтения текста, так и на его объем, который можно вывести на странице или в блоке. Задавать высоту строки в абсолютных единицах крайне не рекомендуется — при изменении размера шрифта может получиться, что строки будут наползать друг на друга. Лучше всего задавать высоту строки в процентах или в безразмерных числах (они выступают как множители). При использовании таких относительных единиц высота строки высчитывается относительно размера шрифта, а разница между процентами и безразмерными числами заключается в наследовании — в случае процентов элементы-потомки будут использовать высоту строки родителя, а в случае безразмерных величин потомки будут использовать тот же множитель, что и родитель. «Нормальным» значением (тем, которое используется по умолчанию) является величина, близкая к 1.2 (она может несколько варьироваться в разных браузерах).

Изменение высоты строки влияет на восприятие текстаЕсли вы посмотрите на два предыдущих абзаца, то наглядно увидите, как высота строки влияет на представление текста: в первом абзаце она равна 100%, а во втором — 140%. Следует учитывать, что и слишком маленькая, и слишком большая высота строки сильно затрудняют чтение, поэтому относиться к ее изменению следует с осторожностью. Хотя в некоторых случаях это может помочь, особенно если требуется «втиснуть» какой-то текст в ограниченный размер блока.

Стоит увеличивать пробелы между словами в текстах, набранных мелким шрифтомВ некоторых случаях бывает полезно увеличить пробелы между словами в тексте. Достигается это с помощью параметра word-spacing. Значением этого параметра может быть слово normal или же требуемая величина, как правило, выраженная в пикселях (реже) или с помощью величины em. Word-spacing устанавливает не величину пробела между словами, а дополнительное значение, которое добавляется к стандартному пробелу. Может оно быть и отрицательным, только читать такой текст будет уж очень сложно... Например в этом предложении, параметр word-spacing равен 0.5em; теперь мы его установили равным нулю — обратите внимание, что пробелы стали «нормальными», а теперь установили отрицательное значение -0.5em. Опытные полиграфисты рекомендуют несколько увеличивать межсловные пробелы в текстах, набранных мелким шрифтом.

Изменение межбуквенных пробелов может пригодиться при выводе заголовковЕще одним способом влияния на восприятие текста является настройка межбуквенных пробелов (в типографии это называется трекинг) с помощью параметра letter-spacing, который может принимать значение normal или какую-то заданную вами величину. Некоторое уменьшение пробелов (при установке отрицательного значения) может быть полезно при выводе текстов, набранных крупным шрифтом, а также в тех случаях, когда надо «запихнуть» большой текст в маленький объем. Увеличение пробелов (разрядка текста) может быть с успехом использовано для вывода заголовков или для выделения какой-то «умной мысли».

Например, сравните следующие заголовки:

Обычный заголовок
Сжатый заголовок
Разряженный заголовок

С разрядкой связана одна проблема: если в середине текста вы захотите выделить какое-то слово, то обнаружите, что оно стало очень плохо читаться. Так как пробелы по краям текста не изменились, то первая и последняя буква выделенного текста визуально относятся к окружающему, а не к выделенному тексту. Это легко можно увидеть в данном примере... К сожалению, использовать параметр word-spacing тут не удастся — браузеры (все, насколько мне известно) не следуют спецификации CSS и не увеличивают межсловный пробел перед и после выделенного текста. Можно установить отступы с помощью параметра padding (более подробно об этом параметре рассказано в заметке CSS: определяем блоки), но и у этого способа есть недостаток: в браузере Internet Explorer 5.x некорректно реализована блоковая модель, и он не устанавливает поля и отступы для строчных блоков. Так что единственным надежным способом будет ручное добавление необходимых пробелов с помощью символа & nbsp;. Конечно, при этом не получится точно подобрать размер пробела, но это все же лучше, чем остаться совсем без него...

Выравнивание текста не выравнивает вложенные блоки!Часто оказывается востребованным свойство text-align, позволяющее задать выравнивание текста. Так же, как и параметр ALIGN в HTML, это свойство может принимать значения left, right, center или justify. При использовании этого свойства надо учитывать два «тонких момента». Первый связан с тем, что объявление выравнивания в CSS «главнее», чем выравнивание в HTML, поэтому если в таблице стилей определить, например, выравнивание для параграфа, то теги <P ALIGN="..."> никак не будут действовать на выравнивание текста. Второй «тонкий момент» связан с блоками — свойство text-align влияет на текст внутри блока, но вложенные блоки не должны выравниваться — например, если у вас есть блок, свойство text-align которого установлено в center, а в нем описан еще один блок, то в соответствии со стандартом, вложенный блок должен прижаться к левому краю родителя. Но в Internet Explorer блок будет расположен по центру. Так что для одинакового выравнивания блоков лучше использовать свойство margin. В частности, для того чтобы блок расположить по центру, надо значения margin-left и margin-right установить равными auto.

Свойство vertical-align позволяет задать выравнивание элемента по вертикали. Чаще всего используются значения baseline (выравнивание базовых линий родителя и потомка), sub (subscript) и super (superscript). Другими полезными значениями могут быть top и bottom — они выравнивают, соответственно, верхнюю и нижнюю границы элемента с самой высокой или низкой частью строки.

«Украшательства» текста могут пригодиться для выделения «умной мысли»Для выделения отдельных частей текста или каких-то элементов можно использовать параметр text-decoration, который принимает значения none, underline, overline, line-through и blink. Этот параметр достаточно прост и не содержит каких-то неожиданностей. Единственное ограничение связано со значением blink — браузеры его должны понимать, но вовсе не обязаны выводить мигающий текст (например, в Internet Explorer текст будет выглядеть обычным, а в Mozilla будет мигать). Действие этого параметра наследуется — если вы установили подчеркивание, то потомки этого элемента тоже будут подчеркнутыми, причем цвет подчеркивания будет такой же, как у родителя, даже если у потомка определено свойство color. Вот как это выглядит на практике — обратите внимание, что зеленый текст подчеркнут красной линией.

Свойство text-transform может пригодиться при выводе разного рода анонсов, объявлений, врезок и прочих «нестандартных» текстовых элементов, особенно если сам текст берется автоматически из какой-то базы. Свойство text-transform может принимать значения none (позволяет отключить это свойство, если оно наследуется от предка), capitalize (делает первую букву в слове заглавной), uppercase (переводит текст в верхний регистр) и lowercase (переводит текст в нижний регистр). Например, в следующем примере единственная заглавная буква стоит в начале предложения:

Это пример свойства capitalize
Это пример свойства uppercase
Это пример свойства lowercase

Не переборщите с украшениями...Вот, собственно говоря, и все, что можно рассказать о тексте... Главное, не переусердствуйте с украшательствами — наверняка вы и сами встречали такие сайты, где из-за обилия всяческих красивостей добраться до содержания было очень сложно...



Статья получена: hostinfo.ru