Контакти

Як у html вказати нерозривну прогалину. Як додати нерозривну прогалину в HTML код сторінки

Як випливає із заголовка, мова у статті піде про невід'ємну частину будь-якого російськомовного (і не тільки) тексту - про прогалину. Ми торкнемося історії пробілу, види прогалин, питання вживання пробілу в веб-друкарні.

Взагалі кажучи, пробіл - це будь-яке порожнє місце в рукописному, друкованому або на будь-якому іншому носії тексті. Так що прогалини бувають різні:

  • спускові (великі вертикальні пропуски в першій смузі видання) та кінцеві прогалини смуги,
  • абзацні відступи та кінцеві пробіли абзацу,
  • міжрядкові прогалини (між рядками тексту),
  • міжслівні прогалини (між словами в одному рядку),
  • міжлітерні прогалини (між літерами у слові).
Далі мова піде про міжслівні пробіли, що розділяють слова, і функціонально належать до розділових знаків.

Історія міжслівної прогалини

Міжслівна прогалина - порівняно пізніше винахід в історії людської думки. Глибоко історія пробілу викладена у книзі Пола Санджера (Paul Saenger) "Space between Words: The Origins of Silent Reading", а також трохи менш глибоко в книзі Йоганнеса Фрідріха "Історія листа".

Також є непогана стаття Антона Бізяєва про прогалини та їх історію «На початку прогалин не було», яка була опублікована в 1997 році в журналі «Publish».

Коротко, прогалина з'явилася досить пізно, у тих писемності, де відсутність розмежування слів призводила до складності читання (так зване консонантне лист, де записуються лише приголосні звуки). Однак у грецькому та латиному, у яких записували і голосні звуки, використання пробілу було втрачено. Пол Санджер пов'язує це про те, що читання вироблялося вголос, що спрощувало розмежування слів під час сприйняття тексту.

Знову пропуск почав використовуватися приблизно в VII-IX ст. н. е.., і ця традиція прийшла з Ірландії, де у писарів і читців рідною мовою був давньоірландський, а релігійна література записувалася латиною. Очевидно, тому ченці відчували труднощі з читанням вголос. Вважається, що поява пропуску пов'язана з поступовим переходом від читання вголос до читання про себе. Прикладами книг латинською мовою з міжсловними прогалинами є пам'ятники британської літератури: Євангеліє з Дарроу (VII ст.) і Келлська книга (VIII-IX ст.).

У глаголиці та кирилиці пробіл також був відсутній, і у звичному нам сенсі використовується лише з XVII століття.

До того, як людство винайшло набірний шрифт, ніякої особливої ​​класифікації міжслівних прогалин не було - ставили переписувачі прогалини на око і ставили. Нагадаю (ми писали про це у статті), що рукопис та ксилографія належать до способів створення текстів без рухливості літер. Звісно, ​​прогалини могли виходити різної ширини, оскільки пропуски робилися вручну.

Прогалини в ручному наборі

Коли рухливість літер з'явилася (а сталося це з появою набірних шрифтів), з'явилися відповідно і питання - а як же ставити прогалини, щоб дотримувалися виключення по ширині?

Технологія ручного набору така, що набраний рядок повністю затискається в станку і в гранці, і, відповідно, повинен мати ширину, практично точно рівну ширині смуги (детальніше з технологією ручного набору можна познайомитися в однойменній книзі М. В. Шульмейстера).

Рядок при ручному наборі набирався з літер (брусків, на торці яких робилися опуклі дзеркальні копії букв, що віддруковуються на папері), а міжслівні прогалини створювалися за допомогою так званих шпацій - брусків різної товщини, які на торці не мають друкуючої поверхні. Виглядає це приблизно ось так. Шпації кожного кегля шрифту, природно, випускалися свої, і мали різну ширину. Наприклад, для шрифту кегля 10 пунктів (стандартний кегль для більшості текстових видань) випускалися шпації шириною 10, 5, 4, 3, 2 та 1 пункт.

Шпації шириною в кегль називалися кегельними чи круглими. Шпації в половину кегельної називалися напівкегельною або напівкруглою. Також існує назва "тонка шпація", під якою розуміють шпації завтовшки 1-2 пункти для шрифту кегля 8-12 пунктів. Тобто для шрифту кегля 10 пунктів тонка шпація зазвичай становить 2 пункти (відповідно, 1⁄5 кегельної). Однак, у зв'язку з відсутністю точного визначення тонкої шпації, у посібниках видавця, редактора та верстальника зазвичай говорять не про відбиття на тонку шпацію, а про відбиття на стільки пунктів (вважаючи, що кегль шрифту дорівнює 10 пунктам).

Таким чином, потрібно розуміти, що залежно від кегля шрифту частка круглої шпації (третина, чверть тощо) може мати різну ширину в пунктах, і навпаки.

Традиційна ширина міжмовного пропуску

Отже, розібравшись про те, що таке кругла і напівкругла шпації, перейдемо до прийнятої у російському наборі ширині власне міжсловного пропуску.

Шульмейстер пише (стор. 94), що при наборі рядка між словами ставиться напівкругла. Коли рядок набрано до кінця, в більшості випадків його ширина виявляється або меншою, або більшою за ширину смуги набору. Тому верстальнику доводиться змінювати ширину пробілів, зменшуючи її мінімум до 1⁄4 круглої та збільшуючи максимум до 3⁄4 круглої (відповідно, при наборі кеглем 10 пунктів міжслівні прогалини можуть змінюватись від 3 до 7 пунктів). Звичайно, бувають аспекти, що залежать від формату видання, але ми їх торкатися не будемо.

Однак, Шульмейстер обумовлюється, що сам по собі міжслівний пробіл в напівкруглу завеликий, і використання стандартного пробілу в 1⁄3 круглого є як економічнішим з точки зору витрати паперу, так часто і красивішим. Також використання міжмовного пробілу в напівкруглу не рекомендується для вузьких шрифтів.

З появою рядовідливних машин прогалини стали робити рівномірними по ширині в межах одного рядка, а ширина міжслівного пробілу стала змінюватись близько 1⁄3 круглою.

Комп'ютерний набір та веб-друкарка

В даний час ми обмежені можливостями шрифтів, що використовуються, і, природно, набором символів в Unicode. Потрібно пам'ятати, що далеко не всі шрифти містять більшість пробільних Unicode-символів.

При переході до комп'ютерних систем верстки було здійснено перехід від вказівки ширини шпацій у пунктах до вказівки ширини шпацій у частках круглої, оскільки шрифти стали легко масштабуватися будь-якого кегля, а пробельные елементи мали залишатися пропорційними кеглю шрифту.

Символи пропуску в Unicode

Unicode містить такі символи для пробілів західної друкарні.
  • Міжмовний пробіл, U+0020 - ширина від 1⁄5 до 1⁄2 круглої в залежності від шрифту. Для середніх шрифтів міжслівна пробіл має ширину порядку 1⁄4 круглої (наприклад, Times New Roman має саме таку прогалину), для широких – порядку 1⁄3 круглої (Microsoft Verdana – 0,35 круглої, Microsoft Tahoma – 0,31 круглої).
  • Нерозривна міжмовна прогалина, U+00A0, - має таку ж ширину, як і звичайний міжсловний пробіл, але у місці нерозривного пробілу заборонено розрив рядка.
Звичайний і нерозривний міжмовний пробіли входять до будь-якого шрифту і правильно відображаються всіма агентами, якщо не брати до уваги відсутність збільшення і зменшення нерозривної пробілу при виключенні по ширині в деяких текстових процесорах і браузерах (що є порушенням рекомендацій). Наприклад, FireFox правильно масштабує нерозривні прогалини, а MSIE 7.0 не масштабує їх.

Всі інші символи пробілів мають фіксовану ширину і не розтягуються при вимиканні рядків по ширині. Разом з тим, згідно з алгоритмом розриву рядків в Unicode, всі вони повинні оброблятися як точка розриву рядка.

  • Кругла шпація, U+2003,   - як було зазначено, має ширину, рівну розміру кегля. Також називається Em Space, можливо, тому що літера "M" у будь-яких старих шрифтах мала таку ширину. Разом з тим зараз це виконується далеко не скрізь, і тому твердження, що Em Space завжди має ширину літери «M» - помилка.
  • Півкругла шпація, U+2002,   - половина круглої. Також називається En Space, можливо, тому що літера "N" у будь-яких старих шрифтах мала таку ширину. Разом з тим зараз це виконується далеко не скрізь, і тому твердження, що En Space завжди має ширину літери «N» - помилка.
  • Третня шпація, U+2004, - третина круглої. Англійською називається Three-per-Em Space.
  • Четверта шпація, U+2005,   - чверть круглої. Англійською називається Four-per-Em Space.
  • Одна шоста круглою, U+2006,  . Англійською називається Six-per-Em Space.
  • Тонка шпація, U+2009,   - зазвичай має ширину в 1⁄5 круглої (рідше - 1⁄6). Взагалі кажучи, її ширина залежить від мови набору та виробника шрифту, і в кириличних шрифтах тонка шпація має ширину в 1⁄5 круглої. Ця шпація за пропорціями точно відповідає двопунктовій шпації при наборі кеглем в 10 пунктів. Англійською називається Thin Space.
  • Волосяна шпація, U+200A,   - найвужча шпація, шириною близько 1⁄10-1⁄16 круглою. Така шпація за пропорціями приблизно відповідає однопунктовій шпації при наборі кеглів в 10 пунктів або навіть виглядає вже.

Використання різних прогалин

Оскільки ширина міжмовного пропуску фіксована в шрифті і змінюється автоматично при вимиканні по ширині, використання інших пробілових символів як міжсловні виправдане тільки при наборі друкованих видань, і тільки за наявності глибокого розуміння, для чого це робиться.

У звичайній верстці для Інтернету для поділу слів досить скористатися стандартними і нерозривними міжслівними пробілами.

Водночас, за правилами російськомовної друкарні в ряді місць повинна використовуватися тонка шпація (точніше, у довідниках написано про двопунктову шпацію, але ми вживатимемо термін «тонка шпація» як найбільш відповідний і з точки зору усталеної термінології, і з погляду зовнішнього вигляду рядка при наборі).

Основні правила використання пробілів будуть описані нижче, але в цілому ми рекомендуємо наступний принцип для використання під час верстки для Інтернету.

Під час підготовки документів у форматі HTML для публікації в Інтернеті як пробільні елементи повинні використовуватися тільки пробіл, нерозривна пробіл і тонка шпація. У тому випадку, якщо автор припускає, що сторінка повинна переглядатися за допомогою агентів, які некоректно обробляють символ, то замість тонкої шпації повинен використовуватися звичайний або нерозривний пробіл.

Використання лише тонкої шпації з усієї різноманітності пробільних елементів дозволяє, по-перше, зберегти гармонійний вигляд набраного тексту, а по-друге, не перевантажувати автора публікації різноманітними правилами вживання шпацій різної дробової ширини.

Обробка пробілів браузерами та пошуковими системами

Під час підготовки матеріалу статті ми провели своєрідний експеримент на спеціально підготовленій сторінці. Яндекс і Google справляються з нестандартними символами добре, замінюючи при пошуку всі нестандартні пробільні елементи на звичайні (ми вважаємо, що це правильна поведінка). Тобто, вони не роблять різниці між текстами «два слова», «два слова», «два слова» тощо.

Як з'ясувалося, рендеринг нестандартних пробельних елементів працює в браузерах дуже погано. Нормально справляються із завданням лише Firefox 3.0 у Windows XP та *nix, MSIE 7.0 та Safari у Windows XP. Про MSIE 8.0 даних немає, але швидше за все, у нього теж все гаразд.

  • Firefox до версії 3.0 взагалі не розриває рядок у місцях нестандартних прогалин. При цьому ширина прогалин відображається правильно.
  • Opera 9.26 і 9.50, FireFox 3.0 під Mac, Safari під Mac рядок переносять, зате всі прогалини виявляються однієї ширини.
  • MSIE 5.5 та 6.0 під Windows 2000 замість прогалин ставлять квадратики (можливо, відповідні символи просто відсутні у системному шрифті).
Не цілком зрозуміло, із чим пов'язана однакова ширина всіх пробельних елементів у всіх браузерах під Mac. Ймовірно, із вбудованими шрифтами.

Основні правила вживання прогалин

Отже, ще раз підкреслимо, що у всіх правилах, наведених нижче, тонка шпація   використовується тільки в тому випадку, коли автор відкидає ризик використання відвідувачем сайту браузерів, що неправильно відображають тонку шпацію. До них відносяться деякі браузери *nix (можливо, це пов'язано з вбудованими шрифтами), MSIE версії 6.0 і раніше, браузери для Mac (ними можна знехтувати, так як помилка рендерингу полягає тільки в ширині шпації), можливо - деякі браузери для мобільних телефонів та КПК.

Якщо використання таких браузерів ймовірно, ми рекомендуємо використовувати замість тонкої шпації звичайний або нерозривний міжслівний прогалини.

Як було описано вище, згідно з рекомендаціями Unicode тонка шпація є таким пробілом, де можливий розрив рядка. У тих випадках, коли правила вимагають встановлення тонкої шпації та заборони розриву рядка (наприклад, між розрядами при наборі числа), необхідно використовувати конструкцію типу 250 000. HTML-елемент nobr є пропрієтарним та до використання заборонений.

Далі ми опишемо ті правила розміщення прогалин, які найчастіше, за нашими спостереженнями, порушуються при верстці текстів. Більш детальну інформацію про правила набору текстів можна почерпнути, наприклад, у «Довіднику видавця та автора» А. Е. Мільчина та Л. К. Чельцова.

Скорочення та символи

  1. У скороченнях "і так далі", "і тому подібне", "оскільки", "тобто", "та інші", "до нашої ери", "південної широти" і подібних всі елементи скорочення відокремлюються нерозривною прогалиною.
    і т. д. – і т. д.
    і т. п. - і т. п.
    т. до. – т. до.
    тобто - тобто.
    та ін - та ін.
    до зв. е. - До н. е.
    ю. ш. - Ю. ш.
  2. Ініціали відбиваються один від одного і від прізвища нерозривним пробілом.
    А. С. Пушкін - А. С. Пушкін
    Дж. Р. Р. Толкієн - Дж. Р. Р. Толкієн

    Допустиме також відбиття ініціалів один від одного і від наступного за ним прізвища тонкою шпацією, проте перенесення ініціалів або прізвища на наступний рядок заборонено. Незалежно від вибору стилю відбиття ініціалів необхідно дотримуватись єдності стилю в рамках всього документа чи сайту.
    В. В. Путін - В.  В.  Путін
    В. Путін - В.  Путін
    Путін В. - В. - Путін В. - В.
    Путін В. – Путін В.
  3. Скорочене слово відбивається від власного імені нерозривним пробілом.
    вул. Щорса – вул. Щорса
    м. Москва - м. Москва
    метрополітен ім. Леніна – метрополітен ім. Леніна
  4. Число і відповідне йому лічильне слово відбиваються нерозривним пробілом.
    12 млрд рублів - 12 млрд рублів
    гол. IV – гол. IV
    пп. 3-6 – пп. 3-6
    Рис. 42 – рис. 42
    ХХ ст. - XX ст.
    1941-1945 рр. - 1941-1945 рр.
    палата № 6 – палата № 6
    § 22 - § 22
    25 % - 25 %
    97,5 ? - 97,5 ?
    16 ¢ - 16 ¢
    .
  5. Число та відповідна йому одиниця виміру (крім знаків градуса, хвилини та секунди) відбиваються тонкою шпацією, розрив рядка заборонено.
    400 м - 400  м
    100 т - 100  т
    451 °F - 451 °F

    але 59°, 57′, 00″.
  6. Знаки градуса, хвилини та секунди відбиваються тонкою шпацією від наступних цифр.
    59° 57′ 00″ - 59° 57′ 00″
Потрібно врахувати, що з приводу відбивання знаків відсотка і валют у середовищі типографів немає правила, що повністю устояло, так що набір знака відсотка і символів валют впритул до числа не є помилкою, якщо таке вживання проводиться однаково на всьому сайті. Однак, ми вважаємо, що використання пробілу в даному випадку покращує читання тексту.

Числа та інтервали

  1. Дробна та ціла частини числа не відбиваються пробілом від коми: 0,62, 345,5.
  2. Розряди числа відбиваються один від одного тонкою шпацією, крім дат, номерів (наприклад, документів), позначень машин та механізмів.
    25 563,42 - 25 563,42
    1 652 - 1 652
    1 298 300 - 1 298 300

    але 1999 рік, ГОСТ 20283, вх. №982364
  3. При чисельному позначенні інтервалів тире не відбивається меж інтервалу.
    50-100 м - 50-100 м
    1 500-2 000 - 1 500-2 000
    1,5-2 тис. – 1,5-2 тис.
    15-20 % - 15-20 %
  4. Унарні знаки плюс, мінус і плюс-мінус не відбиваються від наступного за ним числа: +20 °C , −42 , ±0,1 .
  5. Бінарні знаки математичних операцій та співвідношень відбиваються з обох боків на тонку шпацію.
    2 + 3 = 5 - 2 + 3 = 5

Розділові знаки

  1. Крапка, кома, двокрапка, знаки питання і оклику, точка з комою не відбиваються пробілом від попереднього слова, і відбиваються пробілом від наступного: Ха, ха. Ха? Ха!
  2. Три крапки не відбивається від попереднього слова, якщо воно стоїть наприкінці речення або частини речення, і від наступного - якщо воно стоїть на початку речення: Ого… Що? …Нічого.
  3. Лапки не відбиваються пробілами від укладеного в них тексту: броненосець Потьомкін".
  4. Дужки не відбиваються пробілами від укладеного в них тексту, і відбиваються пробілами зовні (крім того випадку, коли дужка, що закриває, сусідить із розділовим знаком праворуч): Текст у дужках нікому не цікавий (зазвичай).
  5. Тире відбивається від попереднього слова нерозривним пробілом, як від наступного - звичайним пробілом (зокрема у разі, якщо інтервал зазначений у словесної, а чи не цифрової формі).
    Вітенька – молодець!
    нам підійде лише огірок завдовжки п'ятнадцять-двадцять сантиметрів
    пакт Молотова - Ріббентропа
    .
  6. Якщо два числа в словесній формі не утворюють інтервал, а означають «чи одне число, чи інше», то між ними ставиться дефіс, який не відбивається пробілами: випив чарки дві-три.
Існує рекомендація відбивати тире на тонку шпацію або взагалі не відбивати від точки, коми або лапки. Це можна виправдати при наборі друкованого тексту конкретним шрифтом, оскільки збільшує однорідність прогалин. У той же час, при перегляді тексту для Інтернету шрифти у користувача можуть бути абсолютно різноманітними, через що лівий від тире пропуск стає вже, ніж правий.

Небажані перенесення

  1. Короткі слова та спілки ( а, і, але, я, ти, і так далі) краще відбивати від наступного слова нерозривним пробілом, так як коротке слово, що висить на кінці рядка, погіршує читаність. У тому числі дуже бажано не допускати перенесення рядка між частинкою неі наступним за нею дієсловом.
  2. Частинки ж, б, чибажано відбивати від попереднього слова нерозривною прогалиною: те ж саме, сказав би, чи думав я.
  3. Бажано не відривати прийменники на початку речення від наступних за ними слів. (навіть довші, ніж одно- та дволітерні)

Користувачі програми "Ворд" можуть рано чи пізно зіштовхнутися із такою проблемою, як великий розрив між словами. Ця проблема досить добре вивчена і є безліч шляхів для її вирішення. Але в цій статті ми поговоримо лише про один спосіб - як зробити нерозривний пробіл у "Ворді" 2007. Ця функція дуже корисна, особливо якщо проблема досить часто вас турбує.

Нерозривний пробіл: гарячі клавіші та їх призначення

Як говорилося вище, щоб позбавити себе проблеми, коли при друку тексту в "Ворді" вводяться довгі пробіли, потрібно користуватися спеціальним пробілом. Про те, як у "Ворді" зробити ми зараз і поговоримо.

Щоб не ходити навколо, варто відразу ж сказати, що для введення такого пробілу існує спеціальна комбінація клавіш - CTRL+SHIFT+ПРОБІЛ. Можете самостійно спробувати натиснути її. Звичайно, якщо проблеми з довгими пробілами у вас не було, то різницю (між звичайним та нерозривним пробілами) ви не помітите. Однак, можна користуватися таким способом повсюдно, щоб уберегти себе від неправильного форматування документа.

Тепер ви знаєте, як зробити нерозривний пробіл у "Ворді", проте таку комбінацію не кожен зможе запам'ятати або ж просто її буде незручно щоразу вводити. Для полегшення життя можна скористатись перепризначенням цих гарячих клавіш. Про це зараз і поговоримо.

Вам потрібно потрапити до меню "Спеціальні знаки". Щоб це зробити, перейдіть у вкладку "Вставити", виберіть "Символи" та натисніть "Інші". Тепер у вікні перейдіть у потрібну нам вкладку – "Спеціальні знаки". Тепер у списку знайдіть рядок "Нерозривний пробіл". Натисніть двічі на полі та введіть зручну вам комбінацію.

Ось тепер ви знаєте не тільки, як у "Ворді" зробити нерозривну прогалину, але і як самостійно призначити клавішу на нього. Але це ще не все, що хотілося б поговорити.

Встановлення автозаміни

Якщо ви все одно відчуваєте дискомфорт при натисканні поєднання заданих клавіш, то є ще один спосіб того, як у "Ворді" зробити нерозривну прогалину. Він полягає у призначенні автозаміни. Це дуже корисна опція не лише для друку нерозривної прогалини.

Для початку вам необхідно буде помістити в буфер обміну (простими словами, скопіювати) потрібний елемент, у нашому випадку – нерозривний пробіл. Після цього потрібно перейти до вже знайомого меню "Спеціальні знаки". У цьому вікні натисніть кнопку "Автозаміна", яка розташована знизу.

Тепер перед вами вікно автозаміни. Вам потрібно в полі "Замінити" вписати ті символи, які будуть замінюватися на нерозривний пробіл, а в поле "На" вставити цей пробіл. Обов'язково забудьте поставити позначку "Звичайний текст". Після цього натисніть кнопку "Додати".

Ось ви і дізналися, як зробити нерозривну прогалину в "Ворді", яким способом користуватися вирішувати тільки вам. Тепер поговоримо про спеціальну прогалину.

Спеціальний пробіл

Принцип того, як у "Ворді" зробити нерозривну прогалину, дуже схожий на створення спеціального символу. Принаймні суть практично та сама. Використовуйте спеціальний символ у випадку, якщо ви хочете задати певну відстань між літерами або словами. Цей символ, до речі, називається Narrow non-break space.

Отже, щоб встановити цей символ, потрібно відкрити таблицю всіх символів. Тепер у списку "Шрифт" виберіть "Звичайний текст", а в списку "Набір" - "Знаки пунктуації". Тепер серед усієї множини різних символів знайдіть необхідний - Narrow non-break space. Якщо що, його назва відображається над кнопкою "Автозаміна".

Знайшовши символ, натисніть кнопку "Вставити", після чого символ вставиться у вказане місце. Якщо ви ставите питання про те, навіщо ця функція може стати в нагоді, то вона відмінно підходить для вписування дат. Таким чином, цифри "2017" будуть написані поряд зі словом "Рік", і відсунути їх не вдасться.

Перегляд недрукованих символів

Все, про що ми говорили в цій статті, стосувалося недрукованих знаків. Як можна зрозуміти з їхньої назви, у тексті вони невидимі. Але є спеціальна опція у програмі, яка дозволяє їх відобразити. Це відповідна кнопка у верхній панелі програми. На зображенні ви можете побачити її розташування та сам значок.

Після натискання цієї кнопки в тексті будуть відображені всі, і якщо вам необхідно з ними взаємодіяти, то тільки так ви зможете це зробити.

До речі, у статті наводилися приклади для версії "Ворда" 2007 року, проте якщо ви ставите питання про те, як зробити нерозривний пробіл у "Ворді" 2010 року, то ця інструкція вам також повинна підійти.

Якщо ви займаєтеся розробкою html-файлів, то, напевно, помічали таку особливість, коли браузер ігнорує прогалини. У вихідному коді їх може стояти необмежену кількість, але в результаті видно лише один. Найчастіше таке обмеження лише позитивно позначається під час виведення інформації. Адже іноді можна поставити випадково кілька прогалин, у результаті документ виходить невпорядкованим. А за допомогою обмеження дистанція між словами завжди буде фіксованою. Але часом з'являється потреба зробити подвійну або потрійну прогалину, html дозволить зробити необмежену відстань між словами на ваш розсуд. Здійснити цю потребу можна декількома способами, про які ми поговоримо в цій статті.

Перший спосіб

Коли є необхідність зробити довшу відстань між певними словами, можна використовувати спеціальний код пропуску html. Достатньо додати запис " ", який збільшить дистанцію між символами. Такий код може використовуватися як звичайний пробіл, тільки з тим винятком, що він завжди враховуватиметься при виведенні інформації браузером. Цей спеціальний пропуск html іноді використовуються для емуляції червоного рядка або виділення окремого фрагмента тексту. Варто трохи розповісти про код. Перший символ є знаком амперсанду. Він означає дію спеціального коду. У html є багато інших комбінацій, що дають різні ефекти. Наприклад, «>» та «&gl» замінюють знаки «<» и «>». Їх вживання необхідне, оскільки позначають початок і кінець тега. В даному випадку "nbsp" означає скорочену форму команди "non-breaking space", що в перекладі означає для цієї команди існує числова з

амена « », яка повністю повторює ефект такого пробілу. Варто відмітити той факт, що якщо між словами стоятиме код « », то вони завжди будуть знаходитися на одному рядку. Якщо вони заходять за межі екрана, з'являється смуга прокручування в браузері. Код " " - це повна емуляція звичайного пробілу.

Другий спосіб

Другий спосіб застосовується для більш масштабних цілей. Пробіл у html може ставитися за допомогою тега

Він дозволяє виводити текст без додаткового форматування.  Якщо інформація поміщена в цей тег, вона буде представлена ​​у вихідному вигляді як у html-коді сторінки.  При цьому враховуються не лише прогалини, а й перенесення рядків.  Але варто зауважити, що, як і у випадку з кодом " ", текст, укладений у тег 
Виходитиме на одному рядку, якщо не буде природного перекладу.  Є ще одне зауваження.  Все, що знаходиться між відкриваючим і, відповідно, тегом, що закриває 
Матиме специфічний шрифт

.

Третій спосіб

Цей спосіб не можна назвати новим, адже він просто пропонує альтернативу другому. Використовуючи каскадні таблиці стилів, можна досягти того ж ефекту, що й від тега

Але при цьому шрифт залишатиметься незмінним.  Правило "white-space" зі значенням "pre" повністю емулює пробіл html з використанням раніше описаного тегу.  Ця команда може застосовуватися до будь-якої області тексту.

Висновок

Викладені вище способи допоможуть вам поставити неодноразову прогалину. HTML дозволяє таким чином дуже гнучко і на власний розсуд налаштовувати свої сторінки. Але, як показує практика, використовувати множинну прогалину доводиться рідко.

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

У сьогоднішній статті ми спробуємо розібратися, що являє собою пробіл в HTML, в яких випадках можна застосувати пробілові символи при форматуванні самого коду для зручного сприйняття. Дізнаємося, коли необхідне застосування нерозривної прогалини, а також познайомимося з іншими спецсимволами (або, як їх ще називають, мнемоніками).

Насправді я б порадив не ігнорувати тему використання різних спеціальних символів, оскільки це важлива складова, що дозволяє надати завершеність вивченню мови гіпертекстової розмітки. Загалом, надана у цій публікації інформація зайвої точно не буде. Ну, а тепер до справи.

Пробіли та пробілові символи в HTML

Спочатку необхідно зробити важливе зауваження. На клавіатурі комп'ютера є спеціальні клавіші, які дозволяють реалізувати поділ тексту (докладніше про це нижче). Проте, лише широка клавіша пробілу забезпечує розділ між словами у редакторі, а й у вікні браузера. При перенесенні рядків та відступі від краю існують нюанси.

Як ви знаєте, відображення тих чи інших елементів у веб-браузері визначається тегами. Для форматування тексту застосовується відомий , який є блоковим. Тобто його зміст розташований по всій доступній ширині.

Щоб перенести рядки всередині абзацу P, потрібно скористатися одиночним тегом BR, за допомогою якого це можна здійснити. Скажімо, нам потрібно вставити в текст якісь рядки з вірша, які ми пишемо в текстовому редакторі:

Незважаючи на те, що рядки вірша розташовані коректно і перенесення здійснено в потрібних місцях, у браузері все виглядатиме інакше:


Щоб досягти такого ж відображення у вікні браузера, потрібно в кожному місці перенесення рядка прописати BR:

Тепер ми досягли виконання поставленого завдання і в браузері віршовані рядки відобразяться абсолютно правильно:

Таким чином, потрібні перенесення рядків виконано. Тут ще потрібно відзначити таку особливість, що множинні прогалини, що йдуть один за одним, веб-браузер відображає як один. У цьому ви зможете переконатися, якщо в тому ж редакторі спробуєте поставити не один, а кілька пробілів між двома словами і натиснувши кнопку «Зберегти», подивіться на результат у браузері.

Пробіл, табуляція та перенесення рядка

В принципі, із цими пробіловими символамими знайомимося відразу ж, як починаємо роботу з текстом у редакторі та форматуємо його у потрібному вигляді. Для реалізації подібного завдання існують спеціальні клавіші, кожна з яких відповідає своєму пробельному символу:

  • Пробіл – найширша клавіша на клавіатурі комп'ютера (без напису);
  • Табуляція - клавіша зліва з написом «Tab» та двома стрілками, спрямованими у різні боки;
  • Перенесення рядка – клавіша «Enter».

Однак, як я сказав вище, кінцевий потрібний результат не тільки в текстовому редакторі, а й у браузері ми отримуємо лише при використанні першої клавіші. Всі три клавіші (у тому числі табуляція та перенесення рядка корисно використовувати при форматуванні коду HTML. Припустимо, ось як виглядає фрагмент коду в NotePad++ ( про цей редактор тлумачний матеріал) при відображенні всіх пробілових символів:


Ми отримуємо код, який легко читаємо та зрозумілий завдяки пробілам. Помаранчевими стрілками відзначені відступи, що створюються за допомогою клавіші Tab, а символами CR і LF переноси рядків, що здійснюються за допомогою кавиші Enter.

Проглядаються контейнери, вкладені один в інший, добре виділяються теги, що відкривають і закривають. У такому вигляді цей код можна спокійно редагувати. А тепер порівняйте його з таким же кодом, в якому немає такого розділення тексту:

Таким же чином за допомогою пробільних символів можна прописати і правила CSS, які візуально виглядатимуть зрозумілими та зручними:


Після того, як ви приведете всі стилі до спільного знаменника і повністю закінчите редагування файлу стилів, можна буде піддати , видалівши всі пробіли з коду. Це необхідно для підвищення, що дуже важливо при просуванні ресурсу.

Спецсимволи (або мнемоніки) у коді HTML

Тепер розберемо, у яких випадках необхідно використовувати спеціальні символи, про які я згадав на початку статті. Спецсимволи HTML, які іноді називають мнемоніками, введені для вирішення давньої проблеми з кодуванням, що виникло в мові гіпертекстової розмітки.

При наборі тексту з клавіатури відбувається кодування символів мови, яку ви використовуєте. У веб-браузері набраний текст буде відображено за допомогою вибраних шрифтів в результаті зворотної операції декодування.

Справа в тому, що подібних кодувань чимало, зараз ми не маємо мети їх докладно розібрати. Просто в кожній з них може не діставати тих чи інших символів, які, однак, потрібно відобразити. Скажімо, закортіло вам прописати одиночні лапки або знак наголосу, а ці значки банально відсутні у наборі.

Для того, щоб ліквідувати цю проблему, і була введена система спецсимволів, яка включає величезну кількість найрізноманітніших мнемонік. Усі вони починаються зі значка амперсанда «&» і зазвичай закінчуються точкою з комою «;». Спочатку кожному спецсимволу відповідав свій цифровий код. Наприклад, для нерозривної прогалини, яку розглянемо трохи нижче докладніше, буде справедливим такий запис:

Але через деякий час найбільш поширеним символам були присвоєні літерні аналоги (мнемоніки), щоб їх було легко запам'ятати. Скажімо, для того ж нерозривного пробілу це виглядає так:

В результаті, браузер відображає відповідний символ. Список менімонік дуже об'ємний, спецособи HTML, що найчастіше використовуютьсяви можете виявити з наступної таблиці:

символ код мнемоніка опис
нерозривна пробіл
вузька прогалина (е-шириною в букву n)
широкий пробіл (em-шириною в букву m)
- вузьке тире (en-тире)
- широке тире (em-тире)
­ - ­ м'яке перенесення
а́ ́ наголос, що ставиться після "ударної" літери
© © копірайт
® ® ® знак зареєстрованої торгової марки
знак торгової марки
º º º спис Марса
ª ª ª дзеркало Венери
проміле
π π π пи (використовуйте Times New Roman)
¦ ¦ ¦ вертикальний пунктир
§ § § параграф
° ° ° градус
µ µ µ знак "мікро"
знак абзацу
багатокрапка
підкреслення
´ ´ ´ знак наголосу
знак номера
🔍 🔍 Лупа (нахилена вліво)
🔎 🔎 Лупа (нахилена праворуч)
знаки арифметичних та математичних операцій
× × × помножити
÷ ÷ ÷ розділити
< < менше
> > > більше
± ± ± плюс мінус
¹ ¹ ¹ ступінь 1
² ² ² ступінь 2
³ ³ ³ ступінь 3
¬ ¬ ¬ заперечення
¼ ¼ ¼ одна четверта
½ ½ ½ одна друга
¾ ¾ ¾ три чверті
дрібна риса
мінус
менше або дорівнює
більше чи рівно
приблизно (майже) одно
не дорівнює
тотожно
квадратний корінь (радикал)
нескінченність
знак підсумовування
знак твору
частковий диференціал
інтеграл
для всіх (видно тільки якщо жирним шрифтом)
існує
порожня безліч
Ø Ø Ø діаметр
належить
не належить
містить
є підмножиною
є надмножиною
не є підмножиною
є підмножиною або одно
є надмножиною або одно
плюс у гуртку
знак множення у гуртку
перпендикулярно
кут
логічне І
логічне АБО
перетин
об'єднання
знаки валют
Євро
¢ ¢ ¢ Цент
£ £ £ фунт
¤ ¤t; ¤ Знак валюти
¥ ¥ ¥ Знак ієни та юаня
ƒ ƒ ƒ Флорин знак
маркери
. простий маркер
коло
· · · середня точка
хрестик
подвійний хрестик
піки
трефи
черви
бубни
ромб
олівець
олівець
олівець
рука
лапки
" " " подвійна лапка
& & & амперсанд
« « « ліва друкарська лапка (лапка-ялинка)
» » » права друкарська лапка (лапка-ялинка)
одиночна кутова лапка відкриває
одиночна кутова лапка закриває
штрих (хвилини, фути)
подвійний штрих (секунди, дюйми)
ліва верхня одиночна лапка
права верхня одиночна лапка
права нижня одиночна лапка
лапка-лапка ліва
лапка-лапка права верхня
лапка-лапка права нижня
одиночна англійська лапка відкриває
одиночна англійська лапка закриває
подвійна англійська лапка, що відкриває
подвійна англійська лапка закриває
стрілки
стрілка вліво
стрілка вгору
стрілка вправо
стрілка вниз
стрілка вліво та вправо
стрілка вгору і вниз
повернення каретки
подвійна стрілка вліво
подвійна стрілка вгору
подвійна стрілка праворуч
подвійна стрілка вниз
подвійна стрілка вліво та вправо
подвійна стрілка вгору і вниз
трикутна стрілка вгору
трикутна стрілка вниз
трикутна стрілка праворуч
трикутна стрілка вліво
зірочки, сніжинки
Сніговик
Сніжинка
Затиснута трилистниками сніжинка
Жирна гострокутна сніжинка
Зафарбована зірка
Незафарбована зірка
Незафарбована зірка у зафарбованому колі
Зафарбована зірка із незафарбованим колом усередині
Зірка, що обертається
Накреслена біла зірка
Середнє незафарбоване коло
Середнє зафарбоване коло
Секстилі (типу сніжинка)
Восьмикінцева зірка, що обертається
Зірочка з кулястими закінченнями
Жирна восьмикінцева краплеподібна зірочка-пропелер
Шістнадцятикінцева зірочка
Дванадцятикінцева зафарбована зірка
Жирна восьмикінцева прямолінійна зафарбована зірка
Шестикінцева зафарбована зірка
Восьмикінцева прямолінійна зафарбована зірка
Восьмикінцева зафарбована зірка
Восьмикінцева зірочка
Зірочка з незафарбованим центром
Жирна зірочка
Загострена чотирикінцева незафарбована зірка
Загострена чотирикінцева зафарбована зірка
Зірка у колі
Сніжинка у колі
годинник, час
Годинник
Годинник
Пісочний годинник
Пісочний годинник

Випадки використання деяких спецсимволів, у тому числі нерозривної прогалини та м'якого перенесення

Якщо ви трохи вже вивчили таблицю, то отримали підтвердження сказаним мною вище словами, що для відображення всіх спецсимволів використовується цифровий код () або його літерний аналог (символьна мнемоніка), де замість сукупності ґрат та цифр прописані букви ().

Тепер подивимося, коли потрібно використовувати дані коди. Скажімо, у статті вам необхідно в інформативних цілях вказати якийсь HTML тег, наприклад,

. Якщо набрати кутові дужки з клавіатури (а така можливість є), то браузер сприйме таку конструкцію як тег, що відкриває, а не як простий фрагмент тексту.

Тому з тієї ж таблиці спецсимволів HTML беремо відповідні коди і весь запис виглядатиме так:

Крім того, щоб відобразити в браузері не сам знак амперсанда, а його позначення вигляді

, потрібно додати з таблиці його код:

footer

Тоді в браузері виведеться запис менімонік, які потрібно застосувати для відображення тега FOOTER. Трохи плутано, але на цій сторінці ви зможете попрактикуватися в даному аспекті, ввівши в поле «HTML» мнемоніки для відповідних символів та задіявши кнопку «Run», а в області «Result» отримуючи результат їх відображення у браузері:


Зверніть увагу, що я забезпечив перенесення тексту за допомогою згаданого тега BR для того, щоб самі символи відображалися не в один рядок, а стовпчиком для зручності.

Йдемо далі. Іноді у тексті виникають поєднання, які небажано розділяти з різних рядків. Скажімо, "1000 руб." буде логічним або залишити на верхньому рядку, або при нестачі місця всю конструкцію перенести на рядок нижче.

Особливо це актуально, якщо користувачі використовують пристрої з різною шириною екрана, зокрема мобільні. Адже в цьому випадку веб-браузер форматує текст, підлаштовуючись під нові умови. І якщо при стандартних розмірах монітора текст виглядає коректно, то за їх зміни все може змінитися.

Для цих випадків передбачено нерозривний пробіл HTML, Про який я вже згадував. Нагадаю, що в цьому випадку код пропуску такий:

І його потрібно вставити між двома сукупностями знаків, які потрібно зв'язати:

1000 руб.

Тепер браузер у жодному разі не здійснить їх поділ, навіть якщо потрібно форматування тексту для його коректного відображення.

Також буває така ситуація, коли дуже довге слово не вміщується у вільний простір і потрібно перенести його частину. Як при необхідності визначити перенесення на новий рядок у цьому випадку? Для цього є спецсимвол м'якого перенесення- який потрібно помістити в те місце, в якому слово потрібно розірвати:

Довгедовгетриваледовгедовгослово

Якщо виникає ситуація, коли слово потрібно перенести, то на місці знаходження мнемоніки м'якого перенесення утворюється розрив, де з'явиться знак перенесення (дефіс), а частина даного слова, що залишилася, опиниться на нижче наступному рядку.

Втім, знову ж таки буде корисною вся ця справа, включаючи приклади нерозривного та м'якого перенесення, на власні очі відстежити на практиці.


У вікні цього редактора можна змінювати розміри поля перегляду Result, захопивши лівою кнопкою мишки край цієї області і, не відпускаючи її, тягнути вліво для зменшення ширини. Тоді виникає реальна ситуація, коли браузер починає переформатувати вміст для коректного відображення.

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

Коректне додавання нерозривної прогалини в HTML. Валідна верстка.

Якщо ви намагалися верстати сайти, то, напевно, знаєте, що при додаванні з клавіатури кількох пропусків у тексті, вони не зберігаються. Браузери сприймають їх як одну прогалину. Іноді це призводить до проблем із версткою. Зараз ми покажемо вам, як додати кілька пробілів поспіль.

Використання спецсимволів

У мові гіпертекстової розмітки, використовується спеціальний символ, який інтерпретується браузерами як пробіл. Ось він:

Набирати його потрібно саме у такому вигляді, в якому він представлений вище. Якщо вам потрібно вставити кілька пробілів поспіль, вставте кілька символів.

Як би виглядала наша ділянка коду, якби ми хотіли додати три пробіли поспіль.

Тестовий ділянку коду

Якби ми відкрили таку сторінку в браузері, щоб у нас вийшло:

Тестова ділянка коду

Тег pre

Не завжди текст можна відформатувати потрібним чином, використовуючи стандартні теги розмітки. При цьому, набираючи його з клавіатури, можна досягти потрібного результату. Але в результаті, при перегляді сторінки в браузері все ручне форматування злетить, і ви отримаєте звичайний текст. Той самий результат буде, якщо ви вручну додасте кілька нерозривних прогалин поспіль, просто клацаючи однойменну клавішу.

Як же бути у такій ситуації?

Ось приклад тексту з довгим пробілом. Ми отримали це, уклавши текст у тег PRE

Як бачите, кілька поспіль перенесення рядків, що йдуть, також зберігаються. Саме для цього використовується цей тег. Він залишає ручне форматування для тексту, який міститься в ньому.

Відео до статті:

Висновок

Використовуйте ці методи виключно для вставки спеціального форматування тексту. Не варто цими способами домагатися розташування елементів на сторінці. Як скажемо, додавати кілька нерозривних пробілів, щоб наступний елемент був правішим на сторінки. Для цього слід використовувати таблиці стилів.



Сподобалась стаття? Поділіться їй