Пробел 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 и еще несколько промежуточных.

  • Hairspace
  • Six-per-emspace
  • Thinspace
  • Normal space
  • Four-per-emspace
  • Mathematicalspace
  • Punctuationspace
  • Three-per-emspace
  • Enspace
  • Ideographic space
  • Emspace

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

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

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

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

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

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

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

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

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

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

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

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

  • Narrow no-breakspace
  • No-break space
  • Figurespace

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Название пробела HTML сущность Код юникода
Hairspace &#8202; \u200A
Six-per-emspace &#8198; \u2006
Thinspace &#8201; \u2009
Normal space &#32; \u0020
Four-per-emspace &#8197; \u2005
Mathematicalspace &#8287; \u205F
Punctuationspace &#8200; \u2008
Three-per-emspace &#8196; \u2004
Enspace &#8194; \u2002
Ideographic space &#12288; \u3000
Emspace &#8195; \u2003
Narrowno-break space &#8239; \u202F
No-break space &#160; \u00A0
Figurespace &#8199; \u2007
Zero-width​​space &#8203; \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 « » &ensp; равен половине кегля шрифта
EM SPACE 2003 8195 « » &emsp; равен кеглю шрифта
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 « » &thinsp; обычно имеет ширину в 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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *