Тематические статьи и публикации. Все, что связанно с созданием веб сайтов и Интернет.

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

[29 Сентября, 2007 г.] | Рубрика: HTML

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

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

Обещаем/span>обещать не обещать!

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

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

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

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

Пример 1. Использование символа

Я за вас свою работу выполнять не буду!

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

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

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

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

Пример 2. Использование атрибута word-spacing

Слон + хорошая пища = два слона</code>

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

Пример 3. Использование Таблиц стилей

<style> P { word-spacing: 10px } </style> </head> <body> -Булочку надо? -Спасибо, не надо! -Не надо?! Спасибо! </body> </html>

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