Оформление внешнего вида текста в CSS
http://belarusweb.net
Основы создания сайтов

Оформление внешнего вида текста

Использование CSS для форматирования текста

В процессе изучения языка гипертекстовой разметки HTML мы учились форматировать текст, разбивая его на логические блоки, например, абзацы, или выделяя особенность и важность отдельных слов, например, названий или терминов. Конечно, внешний вид форматируемых фрагментов при этом мог несколько изменяться, например, выделяться подчеркиванием или отображаться курсивом, но повлиять на общий формат внешнего вида текста по своему усмотрению мы не могли. Однако HTML для этих целей и не используется, поскольку существует CSS, который обладает достаточным арсеналом свойств, способных изменить не только внешний вид текста, но и общее оформление страницы или всего сайта. В данном пункте нас будут интересовать только свойства, отвечающие за оформление внешнего вида текста. К ним можно отнести расстояния между буквами, словами и строками, выравнивание и направление текста, отступ первой строки, различные виды подчеркивания и т.д. Сюда, конечно же, следует отнести и шрифт, но о свойствах шрифтов мы поговорим в следующем пункте.

Установка интервала между словами и символами текста.
css-свойства word-spacing и letter-spacing

Для того, чтобы изменить интервал между словами или отдельными символами текста используются наследуемые свойства word-spacing и letter-spacing, которые в качестве значений принимают числа в любых доступных единицах измерения, использующихся в CSS (смотреть). Более того, разрешается использовать отрицательные значения, но в этом случае слова и символы могут заходить друг на друга или вести себя непредсказуемым образом, так что нужно быть внимательным и следить за сохранением читабельности текста. Значения в процентах не допускаются, но кроме числовых значений свойства могут принимать значение normal, которое используется по умолчанию и задает обычные для данного шрифта интервалы, а также значение inherit, которое указывает, что для элемента наследуется значение аналогичного свойства родительского элемента. Использование этих и некоторых других свойств форматирования текста показано в примере 2.1.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Работа с текстом</title>
	<style>
		.p_1{
		letter-spacing: 0.6em;
		word-spacing: 10px;
		line-height: 1.5;
		text-indent: 30px;
		}
		
		.p_2{
		letter-spacing: 0.2em;
		word-spacing: 3px;
		line-height: 1;
		text-indent: 1%;
		}
	</style>
</head>
<body>
	<p class="p_1">
		Первая строка этого абзаца.<br>
		Вторая строка этого абзаца.<br>
		Третья строка этого абзаца.
	</p>
	<p class="p_2">
		Первая строка этого абзаца.<br>
		Вторая строка этого абзаца.<br>
		Третья строка этого абзаца.
	</p>
</body>
</html>

Пример 2.1. Использование свойств letter-spacing, word-spacing, line-height, text-indent

Высота строки и css-cвойство line-height

Читабельность текста можно также улучшить за счет увеличения межстрочного интервала (расстояния между строками). Для этих целей используется наследуемое свойство line-height, которое может принимать следующие значения:

  • normal – используется стандартный в данной ситуации межстрочный интервал, который в зависимости от браузера составляет около 120-125% от текущего размера шрифта; значение используется браузером по умолчанию;
  • множитель – представляет собою число, на которое будет умножен текущий размер шрифта для определения межстрочного интервала (см. пример 2.1);
  • размер – задает расстояние между строк в любых единицах измерения, использующихся в CSS;
  • проценты – размер межстрочного интервала определяется в процентах от текущего размера шрифта;
  • inherit – указывает, что для элемента наследуется значение аналогичного свойства родительского элемента.

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

Красная строка и css-cвойство text-indent

Установка красной строки (отступ первой строки в абзаце) задается при помощи наследуемого свойства text-indent. Допускается использование любых доступных единиц измерения, использующихся в CSS, а также проценты, которые определяют размер отступа первой строки относительно ширины родительского элемента, а не размеров текущего шрифта (см. пример 2.1).

Здесь и далее мы будем практически всегда опускать значение свойств inherit, т.к. его могут принимать все свойства CSS. Оно указывает, что для элемента наследуется значение аналогичного свойства родительского элемента.

Выравнивание текста и css-cвойство text-align

Имеются в CSS и возможности для выравнивания текста. Делается это при помощи наследуемого свойства text-align (см. пример 2.2), которое применяется к блочным элементам, определяя выравнивание его строчного содержимого. Отметим, что применять его к строчным элементам не имеет смысла, т.к. ширина таких элементов определяется их содержимым. Возможные значения свойства:

  • left – текст будет выравниваться по левому краю; значение используется браузером по умолчанию;
  • right – текст будет выравниваться по правому краю;
  • center – текст будет выравниваться по центру;
  • justify – текст будет растягиваться на всю ширину родительского элемента;
  • start – аналогично значению left, если текст идёт слева направо и right, когда текст идёт справа налево;
  • end – аналогично значению right, если текст идёт слева направо и left, когда текст идёт справа налево.
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Работа с текстом</title>
	<style>
		/* Задаем ширину всех абзацев */
		p{width: 400px;}
		
		/* Задаем выравнивание текста абзацев */
		.p_1{text-align: right;}
		.p_2{text-align: center;}
		.p_3{text-align: justify;}
	</style>
</head>
<body>
	<p class="p_1" style="background-color: yellow">
		Текст выравнивается по правому краю.<br>
		Вторая строка этого абзаца.<br>
	</p>
	
	<p class="p_2" style="background-color: blue">
		Текст выравнивается по центру.<br>
		Вторая строка этого абзаца.<br>
	</p>
	
	<p class="p_3" style="background-color: green">
		Текст растягивается по ширине абзаца. 
		Чтобы эффект был виден, первое предложение 
		должно быть длинее, чем ширина абзаца.
	</p>
</body>
</html>

Пример 2.2. Пример использования свойства text-align

Направление письма и символов,
css-свойства direction и unicode-bidi

В некоторых языках возникает необходимость смены направления письма. Если у нас принято направление письма слева направо, то во многих арабских языках это делается наоборот, т.е. справа налево. Для таких случаев предусмотрено специальное наследуемое свойство direction, значение ltr которого задает направление текста слева направо, а значение rtl, соответственно, справа налево (см. пример 2.3). Если же нужно изменить еще и направление символов, то следует воспользоваться наследуемым свойством unicode-bidi, которое используется только совместно с direction и может принимать значения:

  • normal – право выбора направления остается за браузером, который использует собственный алгоритм для определения направления текста на основе стандартов Unicode; значение используется браузером по умолчанию;
  • embed – направление текста будет задаваться, как указано в свойстве direction;
  • bidi-override – направление текста, опять же, будет задаваться свойством direction, но в дополнение к этому изменится и направление символов в тексте.
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Работа с текстом</title>
	<style>
		/* Задаем ширину всех абзацев */
		p{width: 400px;}
		
		/* Задаем направление текста абзацев */
		.p_1{
		direction: rtl;
		unicode-bidi: normal;
		}
		
		.p_2{
		direction: rtl;
		unicode-bidi: bidi-override;
		}
		
	</style>
</head>
<body>
	<p class="p_1" style="background-color: yellow">
		Направление записи текста идет<br>
		справа налево.
	</p>
	
	<p class="p_2" style="background-color: violet">
		Направление записи текста <br>
		и букв идет справа налево.
	</p>
</body>
</html>

Пример 2.3. Пример использования свойств direction, unicode-bidi

Отметим, что по умолчанию, если задано направление текста слева направо (как принято у нас), браузеры выравнивают текст по левому краю. Если же задано выравнивание текста справа налево, то браузеры по умолчанию выравнивают текст по правому краю.

Пробельные символы и css-cвойство white-space

Как мы уже упоминали в процессе изучения HTML, браузеры по умолчанию игнорируют большинство пробельных символов в html-коде, заменяя символы табуляции, подряд идущие пробелы и автоматические переносы строк одним пробелом. Однако такое положение не всегда устраивает пользователей, а применение элемента 'pre', в котором сохраняются все пробелы и переносы строк, также не всегда удовлетворяет их потребностям. Поэтому в CSS для определения способа обработки пробельных символов предусмотрено специальное наследуемое свойство white-space (см. пример 2.4). Перечислим значения свойства:

  • normal – все пробельные символы и переносы строк в коде HTML преобразуются в один пробел, а разрывы строк добавляются браузером автоматически; значение используется браузером по умолчанию;
  • pre – текст форматируется аналогично содержимому элемента 'pre', т.е. отображается так, как вводит его пользователь: сохраняются все подряд идущие пробельные символы и переносы строк, автоматические переносы не добавляются;
  • nowrap – текст отображается одной строкой, подряд идущие пробельные символы заменяются одним пробелом, переносы строк в коде HTML игнорируются, автоматические переносы строк не добавляются, действительны только принудительные разрывы строк, сделанные при помощи элементов 'br';
  • pre-wrap – все подряд идущие пробельные символы и переносы строк сохраняются, но разрывы строк добавляются браузером автоматически;
  • pre-line – все подряд идущие пробельные символы заменяются одним пробелом, но переносы строк в коде HTML сохраняются, а также по необходимости браузером добавляются автоматические переносы.
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Работа с текстом</title>
	<style>
		/* Задаем ширину всех абзацев */
		p{width: 400px;}
		
		.p_1{white-space: normal;}
		.p_2{white-space: pre;}
		.p_3{white-space: nowrap;}
		.p_4{white-space: pre-wrap;}
		.p_5{white-space: pre-line;}
	</style>
</head>
<body>
	<p class="p_1" style="background-color: red">
normal:	используется    значение браузера по умолчанию, т.е. все пробельные 
		символы и переносы строк    в коде HTML преобразуются в один пробел, 
		        а разрывы строк добавляются браузером автоматически.
	</p>
	
	<p class="p_2" style="background-color: blue">
pre: текст форматируется аналогично содержимому элемента 'pre', т.е.  
	отображается так, как вводит его пользователь: сохраняются все подряд идущие 
пробельные символы и переносы строк, автоматические переносы не добавляются.
	</p>
	
	<p class="p_3" style="background-color: green">
nowrap: текст отображается одной строкой, подряд идущие пробельные символы <br>
		заменяются одним пробелом, переносы строк в коде HTML игнорируются  , <br>
	автоматические переносы строк не добавляются, действительны только 	<br>
	принудителььные разрывы строк, сделанные <br>
		при помощи элементов 'br'.
	</p>
	
	<p class="p_4" style="background-color: yellow">
pre-wrap: все подряд идущие пробельные символы и переносы строк сохраняются  , но 
	разрывы    строк добавляются 	браузером автоматически.
	</p>
	
	<p class="p_5" style="background-color: violet">
pre-line: все подряд идущие пробельные символы заменяются одним пробелом, но переносы 
   строк в коде HTML сохраняются     , а также по необходимости браузером добавляются 
			автоматические переносы.
	</p>
</body>
</html>

Пример 2.4. Пример использования свойства white-space

Переносы строк и css-cвойство word-break

Следует иметь ввиду, что по умолчанию все браузеры переносят слова целиком. Однако, если нужно изменить такое поведение, можно использовать наследуемое свойство word-break (см. пример 2.5), которое указывает браузеру, как нужно вставлять переносы внутри строк, если они не помещаются по ширине в родительском элементе.

Свойство может принимать следующие значения:

  • normal – данное значение используется по умолчанию и строки переносятся как обычно;
  • break-all – если очередное слово не будет полностью помещаться в заданную ширину блока, то браузер будет переносить оставшуюся часть слова на новую строку; значение не работает для текста на китайском, корейском или японском языке;
  • keep-all – не разрешается перенос строк в словах на китайском, корейском или японском языке; для остальных языков действует как normal.
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Работа с текстом</title>
	<style>
		/* Задаем ширину всех абзацев */
		p{width: 400px;}
		
		.p_1{word-break: normal;}
		.p_2{word-break: break-all;}
		
	</style>
</head>
<body>
	<p class="p_1" style="background-color: yellow">
		Слова переносятся целиком, как обычно короче.
	</p>
	
	<p class="p_2" style="background-color: green">
		Если слово не помещается в заданные размеры по ширине, 
		то оно переносится на другую строку. Парапапарампрарампарарарарарарарам.
	</p>
</body>	
</html>	

Пример 2.5. Пример использования свойства word-break

Заглавные и строчные буквы,
css-cвойство text-transform

Присутствует в CSS и возможность управления преобразованием текста в прописные (заглавные) или строчные буквы. Делается это при помощи наследуемого свойства text-transform (см. пример 2.5_2), которое может принимать следующие значения:

  • capitalize – прописной (заглавной) становится первая буква каждого слова;
  • uppercase – все буквы преобразуются в прописные;
  • lowercase – все буквы преобразуются в строчные;
  • none – текст отображается стандартным образом; значение используется браузером по умолчанию.
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Работа с текстом</title>
	<style>
		/* Задаем ширину всех абзацев */
		p{width: 400px;}
		
		.p_1{text-transform: capitalize;}
		.p_2{text-transform: uppercase;}
		.p_3{text-transform: lowercase;}
		.p_4{text-transform: none;}
	</style>
</head>
<body>
	<p class="p_1" style="background-color: yellow">
		Все первые буквы текста отображаются прописными.
	</p>
	
	<p class="p_2" style="background-color: blue">
		У моего текста ВСЕ буквы ОТОБРАЖАЮТСЯ прописными.
	</p>
	
	<p class="p_3" style="background-color: green">
		У моего текста ВСЕ буквы ОТОБРАЖАЮТСЯ строчными.
	</p>
	
	<p class="p_4" style="background-color: red">
		А вот так выглядит ТЕКСТ в стандартном режиме.
	</p>
</body>
</html>

Пример 2.5.2 Пример использования свойства text-transform

Подчеркивание текста и css-cвойство text-decoration

Также при использовании CSS отпадает необходимость использования элементов HTML для выделения текста подчеркиванием, т.к. для этого имеется ненаследуемое свойство text-decoration, которое может принимать соответствующие значения:

  • none – используется в качестве значения по умолчанию, отменяет все эффекты, включая подчеркивание у ссылок, что бывает очень полезно при формировании меню;
  • overline – оформляет текст надчеркнутым;
  • underline – оформляет текст подчеркнутым;
  • line-through – отображает текст перечеркнутым.

Различные варианты оформления внешнего вида текста и шрифтов можно посмотреть на соответствующей странице нашего учебного сайта №1.