NBSP - что это? Пустое место, имеющее значение

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

Для браузера и его языка JavaScript количество пробелов между словами, тегами и другими элементами не имеет никакого значения.

Применение пробелов

Пробел - самый нужный символ. Хоть он «пустой», но очень полезный. Даже в старые добрые времена, когда имели важное значение такие символы, как «перевод строки» и «возврат каретки», любое количество пробелов в любом месте кода применялось только для повышения его читабельности. Но само по себе пустое место «очень ценилось».

Правильно манипулировать словами, ключевыми словами и синтаксическими конструкциями, отличать код программы от комментария по сей день ни один компилятор (интерпретатор) не научился. Без знатных лексем вроде паскалевского (pascal) ":=" и пээлевской (PL/1) ";", валютно-ориентированного новшества "Пэхапе" (PHP) - "$" в имени переменной обошелся, разве что "Фортран", у которого каждому оператору надлежало находиться в отдельной строке.

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

Но простой пробел может быть в любом количестве в любой строке, и у него есть обязательный цифровой код. Пробел - это не пустое место ни в коде, ни в значении переменной. Это очень важный символ. Следовательно, значение имеет и nbsp. Что это? Сейчас рассмотрим.

Идеальная система: то, чего нет, но так необходимо

Многие области применения письма и вывода контента требуют точного соблюдения правил оформления. Простой пример - списки.

Неправильный список:

• __первая строка;
• _вторая строка;
• третья строка.

Правильный список:

• первая строка;
• вторая строка;
• третья строка.

Здесь символ "_" обозначает простой пробел, который может быть указан по ошибке или образуется вследствие выравнивания текста элемента списка по обеим сторонам абзаца.

Принципиально, что содержание элемента списка должно следовать сразу за номером. В частности, текстовый редактор MS Word еще в самом начале своего существования предложил использовать неразрывный пробел (комбинация клавиш ctrl+"пробел"), чтобы запретить разрыв между элементами строки.

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

В те времена, когда MS Word уже пользовался неизменным успехом, язык гипертекста еще только формировался, но наличие в нем специальных символов предполагалось изначально. Другое дело &nbsp - что это такое и зачем оно нужно, не сразу было понятно.

Использование в заголовках

Правильный заголовок не разрывается, а слова в нем не переносятся. Он центрируется или выравнивается по той или иной стороне. Без использования неразрывного пробела трудно обойтись.

В языке гипертекста это будет выглядеть так:

7. 5. Руководство по инсталляции FreeBSD

На HTML-странице в браузере номер заголовка будет выглядеть так: "7. 5. " и все, таким образом оформленные заголовки будут строго одинаковыми.

Есть момент, на который стоит обратить внимание, если в заголовке используется текст и картинка. Браузер все выводит последовательно, именно так, как определено входящим потоком. Тег img располагается в самом начале строки, но чтобы текст разместился сразу за картинкой, нужно учесть ее ширину.

Использование в контенте страницы

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

Чтобы сместить текст вправо от картинки, очень удобно применить несколько  .

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

Кодирование выполнено на PHP с использованием nbsp. Что это такое и как используется? Теперь становится ясно. Аналогично символ неразрывного пробела применяется в JavaScript.

Применение   в строках

При обработке строк (как на сервере, так и внутри браузера) неразрывный пробел не используется - слишком накладно применять вместо одного значимого символа " ", целых шесть " ". Однако, когда строка отправляется в вывод, в поток браузера, необходимо перекодировать все символы пробела в надлежащее количество неразрывных пробелов.

Вывод в echo или print_r последовательности более одного пробела не будет иметь нужного эффекта и контент «поползет». Например (PHP):

1. echo "2____Привет!"; // здесь "_" обозначает символ " ".
2. echo "2 Привет!"

Будут иметь различный эффект, если тег имеет выравнивание justify. В первом случае цифра 2 будет напечатана с левого края блока, в который был сделан вывод, а текст "Привет!" - с правого.

NBSP - что это и как применять? Важная информация

Между тем, проблема вовсе не в пробелах. Непечатаемых символов на самом деле очень много, и далеко не всегда они используются правильно. Стоит вспомнить, как оформляют документы пользователи MS Word. Когда нужно написать слово "директор" слева, а его фамилию справа, подавляющее большинство лепят подряд несколько символов табуляции - быстро и эффективно.

Вместо того, чтобы правильно выставить значение символа табуляции и выравнивание на нем, пользователь нажимает несколько раз tab и получает нужный эффект.

Аналогичная ситуация в языке разметки HTML. Многие разработчики не используют специальные символы правильно, не применяют нужные стили так, как это положено делать, и результат: "Привет, Мир, я 3-й раз ошибся..." - будет растянут по всей ширине блока, в которую эта строка была выведена.

Если перекодировать строку в "Привет Мир, я 3-й раз ошибся..." - результат будет именно таким, каким он должен быть.

Знать и использовать специальные символы - очень хорошая идея. Особенно если у вас есть желание делать эффективные и качественные страницы, в которых контент расположен качественно и аккуратно.