Отправляет email-рассылки с помощью сервиса Sendsay

Рецепты HTML

Рассылка закрыта

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Сентябрь 2003   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
Влад Мержевич

Статистика

12.722 подписчиков
-26 за неделю
←   Все выпуски   →

Рецепты HTML # 96


Информационный Канал Subscribe.Ru
 | Руководство | Дизайн и юзабилити | Графика | Создание и раскрутка сайта | Справочная информация | Инструментарий | Шаблоны | Все статьи | 

Добрый день.

На сайте новая статья в разделе Рецепты CSS - Пробелы между словами.
Адрес статьи на сайте - www.htmlbook.ru/content/?id=164

Пробелы между словами

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

Обещаем<span style="font-size: 150%"> </span>обещать<span style="font-size: 150%"> </span>не<span style="font-size: 150%"> </span>обещать!

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

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

Использование неразделяемого пробела &nbsp;

Символ &nbsp; используется во многих случаях. Полюбился он за то, что независимо от каких-либо условий, всегда устанавливает пробел. Так что можно поставить подряд хоть с десяток таких пробелов, браузер покажет их все. Хотя слово <покажет> в данном случае не совсем верно, пробел все-таки никак не видно (пример 1).

Пример 1. Использование символа &nbsp;
&nbsp;&nbsp;&nbsp; Я за вас свою работу выполнять не буду!

В примере создана красная строка из четырех пробелов: один – обычный и три – с помощью символа &nbsp;. Размер такого пробела совпадает с размером базового шрифта.

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

Использование стилей

Чтобы задать расстояние между словами в тексте, используется параметр word-spacing. Его значение может быть установлено в пикселах (px), пунктах (pt), миллиметрах (mm) и других единицах (пример 2).

Пример 2. Использование атрибута word-spacing
<span style=""word-spacing:" 10px">Слон + хорошая пища = два слона</span>

Преимущество последнего указанного подхода в его удобстве и централизованности. Стиль можно описать один раз в глобальной таблице стилей и применять его к нужным элементам веб-страницы (пример 3).

Пример 3. Использование стилей
<html>
<head>
<style>
P { word-spacing: 10px }
</style>
</head>


<body>

<p>-Булочку надо?</p>
<p>-Спасибо, не надо!</p>
<p>-Не надо?! Спасибо!</p>

</body>
</html>

Заметьте, что перед началом строки никаких отступов не добавляется, для создания абзаца следует использовать параметр text-indent.

Copyright 2002, 2003 Влад Мержевич, e-mail: vlad@htmlbook.ru
Материалы данного сайта охраняются законом об авторском праве.
Вы можете свободно использовать и распространять любые статьи с указанием автора и ссылки на сайт.
http://subscribe.ru/
E-mail: ask@subscribe.ru 		Отписаться
Убрать рекламу
В избранное