Як змінити відстань між словами

Як змінити відстань між словами

Зміна відстані між словами в текстах веб-сторінок не така тривіальна задача, як могло б здатися. Два, три або більше поставлених поспіль пропусків між сусідніми словами, згідно зі стандартами мови HTML, ніяк не відіб’ються на відстані між ними — браузер буде відображати їх як одинарний пробіл. Але, звичайно, інструменти для вирішення цього завдання є.

Інструкція

  1. Один з варіантів — використовувати спеціальний символ мови HTML, який називається «нерозривний пропуск» (non-breakable-space). Відображається він так само, як і звичайний пробіл, а особливість полягає в тому, що якщо два слова розділити таким спецпробелом, то браузер буде вважати, що це одне злите слово, яке не можна розділяти. У силу цієї особливості браузер не буде втручатися і в відображення декількох таких прогалин, поставлених поспіль, тобто не замінюватиме кілька прогалин одним. Позначається цей спецзнак таким набором символів: «& nbsр;» (без лапок). Виглядати у вихідному коді документа параграф тексту зі словами, розділеними такими спецсимволами, може так:

    <p> Це

    Тут відстань між першим і другим словом буде звичайним, між другим і третім — подвоєним, а між третім і четвертим — потроєною.
  2. Набагато частіше використовується управління відстанню між словами із застосуванням мови опису стилів (CSS). Мовою CSS відповідна дефініція може виглядати, наприклад, так:

    word-spacing: 15px;

    Тут вказано розмір пробілу між сусідніми словами в 15 піксел. Стильовий атрибут можна додати майже в будь-тег. Наприклад, тег параграфа з таким атрибутом, що задає відстань в 20 піксел між усіма словами параграфа, може виглядати так:

    <p style=»word-spacing: 20px»> Параграф тексту з збільшеною відстанню між словами </ p>
  3. Зазвичай стильові блоки поміщають в заголовну частину документа або в окремі файли. В такому блоці можна задати кілька значень відстаней між словами і розфасувати їх по різних класах, а в тілі документа вказувати в тегах посилання на відповідні класи. Наприклад, так може виглядати опис класу з ім’ям dblSpace:

    <style type=»text/css»>

     . DblSpace {word-spacing: 20px}

    </ Style>

    А тег параграфа з посиланням на цей клас в тілі документа буде, наприклад, таким:

    <p class=»dblSpace»> Параграф з широкими інтервалами між слвамі </ p>