Пробел unicode:   — Неразрывный пробел (U+00A0) nbsp – — Пробел (U+0020) — Таблица символов Юникода®

　 — Символ ККЯ пробел (U+3000)

Описание символа

Символ ККЯ пробел. Символы и пунктуация ККЯ.

Кодировка

Кодировка	hex	dec (bytes)	dec	binary
UTF-8	E3 80 80	227 128 128	14909568	11100011 10000000 10000000
UTF-16BE	30 00	48 0	12288	00110000 00000000
UTF-16LE	00 30	0 48	48	00000000 00110000
UTF-32BE	00 00 30 00	0 0 48 0	12288	00000000 00000000 00110000 00000000
UTF-32LE	00 30 00 00	0 48 0 0	3145728	00000000 00110000 00000000 00000000

  — Четыре в em пробел (U+2005)

Описание символа

Четыре в em пробел. Знаки пунктуации.

Кодировка

Кодировка	hex	dec (bytes)	dec	binary
UTF-8	E2 80 85	226 128 133	14844037	11100010 10000000 10000101
UTF-16BE	20 05	32 5	8197	00100000 00000101
UTF-16LE	05 20	5 32	1312	00000101 00100000
UTF-32BE	00 00 20 05	0 0 32 5	8197	00000000 00000000 00100000 00000101
UTF-32LE	05 20 00 00	5 32 0 0	85983232	00000101 00100000 00000000 00000000

  — Em пробел (U+2003) emsp

Описание символа

Em пробел. Знаки пунктуации.

Кодировка

Кодировка	hex	dec (bytes)	dec	binary
UTF-8	E2 80 83	226 128 131	14844035	11100010 10000000 10000011
UTF-16BE	20 03	32 3	8195	00100000 00000011
UTF-16LE	03 20	3 32	800	00000011 00100000
UTF-32BE	00 00 20 03	0 0 32 3	8195	00000000 00000000 00100000 00000011
UTF-32LE	03 20 00 00	3 32 0 0	52428800	00000011 00100000 00000000 00000000

␣ — Иконка, символизирующая пробел (U+2423)

Описание символа

Иконка, символизирующая пробел. Значки управляющих кодов.

Кодировка

Кодировка	hex	dec (bytes)	dec	binary
UTF-8	E2 90 A3	226 144 163	14848163	11100010 10010000 10100011
UTF-16BE	24 23	36 35	9251	00100100 00100011
UTF-16LE	23 24	35 36	8996	00100011 00100100
UTF-32BE	00 00 24 23	0 0 36 35	9251	00000000 00000000 00100100 00100011
UTF-32LE	23 24 00 00	35 36 0 0	589561856	00100011 00100100 00000000 00000000

Все о пробелах

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

Ниже вы видите два твита. В одном из них Пол Айриш уведомляется о моем ответе, а о другом — нет. В чем разница между твитами? Читайте!

Век обычной типографии

В типографии и издательском деле всегда приходилось прикладывать на удивление много физических усилий. Отдельные буквы выбирались и составлялись вместе, одна за другой, в слова, затем фразы, а затем колонки. Цвета были чернилами — их надо было смешать и подготовить. Отдельной индустрией была подготовка и нарезка бумаги.

Черная типографская краска. (увеличенная версия)

Деревянные блоки для задания высоты строки. (увеличенная версия)

Смешивание синей и белой краски. (увеличенная версия)

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

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

Цитата в середине верстки. Обратите внимание на все блоки пробелов вокруг цитаты, удерживающие ее на месте. (увеличенная версия)

Вы можете сказать: — “это так мило, что сегодня у нас есть position: absolute, отрицательные отступы и CSS трансформации для размеров больше, чем у дисплея.” И вы будете правы. Неуклонный марш закона Мура дал нам дисплеи с крошечными пикселями и миллионами цветов. И вы можете делать все, что хотите.

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

Знакомимся с пробелами

Видели ли вы когда-нибудь полную таблицу символов Unicode? Нет? Посмотрите, это завораживает. Это история нашей цивилизации, выраженная в типографике. Она может быть недостаточно упорядочена и не объяснена полностью, но в ней есть все: языки, культуры, концепции. Географические и транспортные обозначения находятся рядом с алхимическими. Эмодзи рядом со счетными палочками. Символы валют влекут к изучению мира финансов, а дополнительные технические символы — инженерии. Здесь есть неудачные эксперименты с алфавитом и такие странности как неполная неопределенность. На другой странице будут символы проигрывания со старых видеомагнитофонов и рисунок снеговика.

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

Пробелы также играют свою роль. Есть один основной, связанный с самой большой клавишей на клавиатуре, но есть и другие: очень короткие Hairspace и Thinspace и очень широкие En space и Em space и еще несколько промежуточных.

• Hair space
• Six-per-em space
• Thin space
• Normal space
• Four-per-em space
• Mathematical space
• Punctuation space
• Three-per-em space
• En space
• Ideographic　space
• Em space

Вы можете использовать их также как и обычный пробел. Просто скопируйте из списка. Но зачем?

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

Длинные тире в окружении очень узких пробелов на сайте Medium. (увеличенная версия)

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

Очень узкие пробелы используются при указании диапазона на Medium. (увеличенная версия)

Точно также, если элемент меню содержит слэш, мы обертываем его узкими пробелами для лучшего баланса:

Слэш и узкие пробелы в меню на Medium. (увеличенная версия)

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

Вы можете сказать, что это не круто. В конце концов, того же эффекта можно достигнуть путем обертывания элементов в <span> и применения горизонтального пэддинга, или путем изменения свойства word-spacing и использования обычных пробелов.

Проблема этих решений в том, что они являются более громоздкими. Использование разных пробелов Юникода работает везде, не только в HTML, но и в кнопках, лейблах, полях ввода текста и заголовках E-mail. Пробелы в Юникоде очень гибкие.

Пробелы, остающиеся на месте

Теперь мы перейдем к еще трем пробелам с магическими свойствами:

• Narrow no-break space
• No-break space
• Figure space

Все эти пробелы ведут себя так, как будто их приклеили к соседним символам. Это значит в первую очередь то, что при переносе на новую линию слова, скрепленные такими пробелами останутся вместе. Это полезно, если вы хотите предотвратить разделение слов или символов, которые могут смотреться нелепо оказавшись на разных строках, брошенные и без присмотра (в типографии их называют сиротами).

Вот еще один пример с Medium. Мы используем неразрывные пробелы внутри фразы “and 3 others”, в результате они всегда остаются рядом, а не разбиваются на половинки.

Текст с обычными и неразрывными пробелами. (увеличенная версия)

Точно также в французском языке принято отделять завершающий знак пунктуации в предложении узким пробелом. Этот пробел тоже должен быть неразрывным, чтобы знак вопроса или кавычка были привязаны к своим словам.

Текст с французской пунктуацией. (увеличенная версия)

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

Опять-таки, вы можете делать все это, оборачивая не разбиваемые сочетания древним тегом <nobr> или span с применением свойства white-space в CSS. Но также как и в предыдущем случае, использование нужного символа, соответствующего контексту будет решением более простым и работающим независимо от разметки.

Еще один момент: несмотря на невидимость, неразрывные пробелы сохраняют свои размеры — и ширину, и высоту. Иногда это помогает правильно задать размер их контейнеру. Некоторые из вас помнят темные времена табличной верстки, когда использование неразрывного пробела помогало обеспечить видимость ячеек таблицы. Это был хак, основанный на другом хаке. Сегодня у нас есть лучшие способы для верстки макетов. Но даже сейчас, пару месяцев назад, я использовал неразрывный пробел при разработке для IOS с той же целью — он был в поле пользовательского ввода и без него высота поля была недостаточной.

Не отбрасывайте вчерашние хаки и знания. Иногда они могут пригодиться и в современных условиях. 🙂

Невидимые, но не совсем

Теперь настало время перейти к самой любопытной разновидности пробелов — к тем, у которых нет размеров совсем.

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

У него нет никакой ширины, это пробел для современной цифровой эры. Но какое может быть у применение у пробела, которого нет? Целых два:

• Он позволяет разбивать слова.
• Он обманывает алгоритмы, осуществляющие поиск по строкам.

В первом случае пробел нулевой ширины работает как разбиватель слов (<wbr>) там, где HTML недоступен. В таком случае это абсолютный антагонист неразрывного пробела. Вот пример, где он позволяет разбивать слова, разделенные слэшем:

Пробел нулевой ширины помогает разбить слова, разделенные слэшем. (увеличенная версия)

Что касается другого применения… Помните пример в самом верху? Это был пробел нулевой ширины, который предотвратил создание ссылки в моем твите. Он расположен сразу после @ и это он помешал парсеру, ищущему цифры и буквы и прекращающему поиск, при обнаружении других символов.

Два твита с нулевым пробелом. (увеличенная версия)

Можно найти и другие применения:

• Предотвращение автоматической токенизации. Если вы хотите обсудить в Твиттере @import или @extend и не хотите при этом напрасно беспокоить пользователей с одноименными никами, то пробелы нулевой ширины придут на помощь.
• Предотвращение автоматического создания ссылок. Некоторые алгоритмы плохо обрабатывают знаки пунктуации после ссылок, вставляя их в ссылку. Нулевой пробел решает эту проблему.
• Предотвращение автоматического конвертирования символов в эмотиконы. Это можно использовать в чате Google для сохранения олдскульных смайликов, без замены проверенной классики на многоцветную мерзость.
• Манипуляция с алгоритмами сортировки позволяет перемещать требуемые элементы вверх или вниз списка без добавления видимых символов.
• Оставление полей ввода пустыми, когда их требуется заполнить.

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

А теперь все вместе

Это список всех пробелов, которые были упомянуты в статье. Вы можете скопировать этот текст и все эти пробелы будут также работать в IOS и Android.

Название пробела	HTML сущность	Код юникода
Hair space	 	\u200A
Six-per-em space	 	\u2006
Thin space	 	\u2009
Normal space	 	\u0020
Four-per-em space	 	\u2005
Mathematical space	 	\u205F
Punctuation space	 	\u2008
Three-per-em space	 	\u2004
En space	 	\u2002
Ideographic　space	　	\u3000
Em space	 	\u2003
Narrow no-break space	 	\u202F
No-break space	 	\u00A0
Figure space	 	\u2007
Zero-width​​space	​	\u200B

Что нужно учитывать при работе с пробелами

При более активном использовании пробелов надо держать в уме следующие пункты:

• Все пробелы выглядят одинаково. Имеет смысл оставлять комментарий или другое напоминание о том, для чего оставлен конкретный вид пробела.
• Пользователи любят копипейст. В зависимости от обстоятельств, используемые вами пробелы могут проявится, а могут и не проявится после того, как пользователь скопирует их и куда-либо вставит. Если это важно для вас (например, вы используете пробелы для разделения чисел), проверьте все перед использованием.
• Поддержка в шрифтах. Пробелы это такие же глифы как и остальные и если их нет в выбранном шрифте, они не возникнут из воздуха. Поэтому не удивляйтесь, если вместо отсутствия пикселей вы увидите квадратик битого Юникода.
• И запомните — всегда убирайте блок с пробелами на место. Хотя нет, мы уже можем не парится над такими вещами.

Блок с 12-пунктным пробелом из Центра книги в Сан-франциско. Да, изменение размера шрифта, требует замены блока пробела. (увеличенная версия)

Тайны Юникода

Юникод полон других занятностей и странностей. Есть среди них и другие разновидности пробелов, включая “не объединяющий нулевой пробел”. Есть мягкий дефис, в котором дефис виден только при необходимости. Цифры верхнего индекса и зачеркнутые символы, которые могут быть использованы даже на тех платформах, которые не поддерживают такие фичи. Комбинирующие символы, использующие другие символы неоднократно, снова и снова. Просто взгляните. Оцените. Вникните.

Я действительно считаю, что стоит написать хороший гайд по Юникоду. Но это уже совершенно другая история.

Маркер последовательности байтов — Википедия

Материал из Википедии — свободной энциклопедии

Маркер последовательности байтов или метка порядка байтов (англ. Byte Order Mark, BOM) — специальный символ из стандарта Юникод, вставляемый в начало текстового файла или потока для обозначения того, что в файле (потоке) используется Юникод, а также для косвенного указания кодировки и порядка байтов, с помощью которых символы Юникода были закодированы. Номер этого символа в стандарте Юникод — U+FEFF. Использование этого символа, согласно спецификации Юникод, не является обязательным, однако оно широко распространено, так как позволяет легко избежать неверного раскодирования текстовой информации.

Согласно спецификации Юникода, маркер может стоять только в самом начале файла или потока. Если же символ U+FEFF встречается в середине потока данных, он должен^{[цитата не приведена 484 дня]} интерпретироваться как «нулевой ширины неразрывный пробел» (по существу, неотображаемый и ничего не меняющий символ). Однако, большинство^{[сколько?]} браузеров, кроме Opera версий 12 и ниже, воспринимают BOM в середине документа как символ, занимающий целую строку, после чего генерируют перенос строки^[1].

Для неразрывного пробела нулевой ширины в Юникоде есть и отдельный специальный символ — U+2060, который и рекомендуется использовать в этом качестве, а маркер последовательности байтов U+FEFF рекомендуется использовать только по своему прямому назначению.

Если формат представления символов Юникода точно известен принимающей программе заранее, то по стандарту Юникода маркер ставить не следует. И если формат объявлен другим способом, маркер по стандарту ставить не полагается.

Определение кодировки по маркеру последовательности байтов[править | править код]

По тому, как закодирован маркер последовательности байтов, стоящий в начале файла или потока, можно легко определить кодировку и порядок байтов, использованные для кодирования символов Юникода во всём данном файле или потоке. Это обстоятельство в основном и явилось причиной широкого использования маркера последовательности байтов.

1. ↑ ^{1 2 3 4 5 6 7} В этих кодировках последовательность не определяет именно порядок байтов, так как кодировка однобайтная, но эта последовательность может использоваться для определения способа кодировки.^[2][3]
2. ↑ В UTF-7 в связи с использованием base-64, четвёртый байт BOM является 001111xx в двоичном представлении, где xx зависит от следующего символа (первого после BOM). Поэтому четвёртый байт не является только частью BOM, но также содержит информацию о следующем (не BOM) символе. Для xx=00, 01, 10, 11, четвёртый байт будет, соответственно, 38, 39, 2B, или 2F при кодировке в base64. Если же следующий символ не кодируется base64, то используется 38 в качестве четвёртого байта, а следующий байт 2D.
3. ↑ SCSU предусматривает и другие кодировки для U+FEFF, указанная последовательность является рекомендованной в UTR #6.^[4]

Сложности, которые необходимо учитывать при использовании маркера[править | править код]

Есть случаи, когда использования маркера последовательности байтов следует избегать, несмотря на удобства его применения. Например, использование маркера в веб-шаблонах вызывает появление пустых строк в документе, поэтому рекомендуется удалять маркер из веб-скриптов и CSS-файлов. А наличие маркера в начале файлов PHP (до тега <?php) приводит к тому, что пустая строка отправляется клиенту ещё до начала выполнения кода, что вызывает сбой в тех случаях, когда клиенту должен сразу отправиться HTTP-заголовок (при переадресации запроса, например).^[5]

Пробел — Другие пробелы в юникоде

Название в юникоде	Код в юникоде	Код в юникоде	Выглядит	Мнемокод в HTML 4	Пояснения
EN QUAD	2000	8192	« »
EM QUAD	2001	8193	« »
EN SPACE	2002	8194	« »	 	равен половине кегля шрифта
EM SPACE	2003	8195	« »	 	равен кеглю шрифта
THREE-PER-EM SPACE	2004	8196	« »		ближе всех к обычному пробелу, втрое меньше, чем EM-SPACE
FOUR-PER-EM SPACE	2005	8197	« »		в четыре раза меньше, чем EM-SPACE
SIX-PER-EM SPACE	2006	8198	« »		в шесть раз меньше, чем EM-SPACE
FIGURE SPACE	2007	8199	« »		имеет такую же ширину, что и цифра, и предназначен для набора таблиц. Неразрывный.
PUNCTUATION SPACE	2008	8200	« »		ширина равна ширине точки
THIN SPACE	2009	8201	« »	 	обычно имеет ширину в 1⁄5 круглой. По пропорциям соответствует двухпунктовой шпации при наборе кеглем в 10 пунктов.
HAIR SPACE	200A	8202	« »		самый тонкий пробел, соответствует самой тонкой шпации в кассе наборщика
ZERO-WIDTH SPACE	200B	8203	«​»		показывает места, в которых можно разрывать строку, не добавляя знак переноса; ширина его нулевая. Применяется в языках, в которых пробелов нет. При выравнивании текста по ширине может расширяться, как и любой другой пробел.
NARROW NO-BREAK SPACE	202F	8239	« »		узкий неразрывный пробел
MEDIUM MATHEMATICAL SPACE	205F	8237	«‭»		узкий пробел, применяемый в математических формулах
WORD JOINER	2060	8288	«⁠»		аналогичен ZERO-WIDTH SPACE, но неразрывный
IDEOGRAPHIC SPACE	3000	12288	«　»		используется в восточных языках, равняется ширине одного иероглифа. См. CJK