Html пробел широкий: html — Как сделать длинный пробел?

Справочник: пробелы

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

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

Долгое время в европейских письменностях не было межсловных пробелов, в латинице они появились только в VII веке. В эпоху металлического набора пробел был материальным объектом — куском металла, который не оставлял оттиска. В докомпьютерную эпоху текст чаще всего выключали по формату, и для равномерного распределения текста требовалось несколько пробелов разной ширины. Эти типы пробелов определялись с помощью понятия «круглая» — величины, равной высоте кегельной площадки Кегельной площадкой в металлическом наборе называлась торцевая часть литеры, прямоугольник с печатающим элементом.

. При кегле в 12 пунктов размер круглой также равен 12 пт, и исходя из этого ширина полукруглой будет 6 пт, третной — 4 пт и т. д.

Пробелы на примере шрифта Gauge. Ширины и соотношения пробелов разнятся в зависимости от шрифта

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

Обычный пробел

Обычный, или межсловный, пробел — тот самый знак, который вызывается самой длинной клавишей на клавиатуре.

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

В качестве стандартного межсловного пробела в металлическом наборе использовалась полукруглая шпация Металлическая пластина без печатающего элемента для набора пробелов, отбивок и отступов, равная половине высоты кегельной площадки (в кириллической типографике; в латинской пробел был равен трети круглой шпации). Александра Королькова «Живая типографика» (2012)

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

Большие пробелы и физиологически не нужны и делают весь рисунок набора решётчатым, портя композицию страницы в эстетическом отношении. Если по условиям набора данной строки нельзя выдержать расстояние в полукруглую, то лучше уменьшай пробелы, пользуясь тройными шпациями (составляющими треть круглого) или шпациями в 3 и даже 2 пункта.

Такие широкие пробелы непривычны современному читателю и слишком заметны в наборе

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

Многие современные шрифтовики пытаются подчинить ширину пробела определённым правилам: например, некоторые говорят, что пробел должен быть шириной в площадку строчной буквы i. Но это утверждение не универсально: например, оно точно не сработает в шрифтах с нестандартным рисунком и пропорциями буквы 

Золотое правило для набора заголовков — межсловные пробелы равны ширине строчной буквы i. Для удобства чтения длинных строк пробелы между словами должны быть гораздо больше. Эрик Шпикерманн «О шрифте» (1993)

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

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

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

Пробелы в шрифте Kazimir Text. Ширина пробела нормальная — слова отделяются друг от друга, иерархия белого пространства сохраняется Если увеличить межсловные пробелы, они начинают спорить с интерлиньяжем, в таком тексте становится сложно ориентироваться Если, наоборот, сделать пробелы меньше, то читать будет по-прежнему возможно, но станет тяжелее — слова начнут сливаться друг с другом

Использовать два пробела подряд — приём, перекочевавший из эпохи печатных машинок. Стоит проверять документ на наличие двойных пробелов и заменять их на одинарные.

Некоторые рекомендации, которые давались профессиональным машинисткам, до сих пор живут в привычках при наборе цифровых документов. Например, использование трёх пробелов после точки или двух пробелов после запятой. На печатной машинке был доступен только один тип пробела, поэтому слова и предложения разделялись друг от друга на одинаковое расстояние. Двойным пробелом было принято разделять предложения, чтобы улучшить удобочитаемость текста. María Ramos Silva Type design for typewriters: Olivetti (2015)

Дополнительный пробел после точки — сомнительный приём с точки зрения удобочитаемости. Можно предположить, что в эпоху печатных машинок дополнительный пробел мог лучше отделять предложения друг от друга в условиях моноширинного шрифта, однако моноширинные точка с пробелом и так образуют большее пространство, чем любой пробел внутри предложения. Со времён печатных машинок инструменты для набора существенно улучшились, а моноширинным шрифтом без крайней необходимости набирать тексты никто не будет.

Американский юрист Мэттью Баттерик написал книгу о типографике для юристов, писателей и всех, кто работает с текстом. В Америке практика ставить двойные пробелы до сих пор широко распространена у старшего поколения, поэтому Баттерик посвятил этой теме целых две главы своей «Практической типографики». Баттерик пытается повлиять на читателя с помощью воображаемых диалогов:

— Если вы утверждаете, что меньшие пробелы нужны в определённых ситуациях, почему вы настаиваете на том, что между предложениями должен быть лишь один пробел, ведь большее пространство может быть лучше?

Неразрывный пробел (Non-breaking Space)

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

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

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

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

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

Дополнительные пробелы

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

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

На то есть причины: Иллюстратор, как и Фотошоп, не рассчитан на вёрстку текста. Зато в Индизайне легко вызываются все дополнительные пробелы, и знающий верстальщик всегда будет использовать их в своей работе.

Круглая шпация (Em Space)

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

Полукруглая шпация (En Space)

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

Третная шпация (Three-per-em Space, Third Space)

Треть круглой шпации. Исторически считалась основным пробелом в западноевропейской типографике.

Важнейшее требование к хорошему наборщику — это цельность строки текста, а она создаётся только при наборе на третную шпацию. В прежние времена и антикву набирали гораздо уже, чем теперь: на оттиске оригинала антиквы Гарамона 1592 года при шрифте в 14 пунктов во всех строчках межсловный пробел составляет всего лишь около 2 пунктов, то есть одну седьмую круглой шпации! Так что никак нельзя сказать, что набор на третную шпацию слишком плотный.

Четвертная шпация (Quarter Space)

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

Для нормального текстового шрифта в текстовом кегле типичное значение межсловного пробела составляет четверть круглой, или M/4. (Четверть круглой обычно по ширине равна примерно ширине буквы t или чуть больше.) Роберт Брингхерст «Основы стиля в типографике» (1992)

Тонкая шпация (Thin Space)

⅕ круглой. Часто тонкий пробел — это примерно половина обычного, поэтому тонким пробелом пользуются там, где обычный пробел будет слишком широк. Например, тонким пробелом обычно отбивают тире в случаях, когда обычный пробел даёт слишком много белого вокруг. Тонким пробелом также отбивают инициалы — друг от друга и от фамилии.

Обычный пробел в шрифте Spectral слишком широк для отбивки инициалов и тире Тонкие пробелы выглядят аккуратнее и лучше связывают инициалы с фамилией и две части предложения друг с другом

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

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

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

Одна шестая круглой (Sixth Space)

Шестерной пробел используют в тех случаях, когда тонкий пробел слишком широк.

Волосяная шпация (Hair Space)

Самая узкая шпация, в металлическом наборе равнялась 1/10 круглой, в компьютерную эпоху — чаще всего 1/ 24 круглой. Может пригодиться, если в наборе определённым шрифтом полуапроши у знаков препинания слишком тесные, а тонкий пробел будет слишком широким. Например, вместо тонкого пробела для отбивки тире можно использовать волосяной — всё зависит от полуапрошей и рисунка.

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

Не дико ли, когда знак препинания, относящийся ко всей предыдущей фразе, тесно приклеен к одному последнему слову этой фразы? И, наоборот, как неудачливо он стоит, если между ним и предыдущим словом — большой промежуток. В сущности следовало бы уже работникам в словолитне подумать об этом и отливать знаки препинания с небольшим средним заплечиком слева знака препинания. Но не всегда, вернее — редко словолитчики столь предусмотрительны, да они и привыкли отливать все литеры без средних заплечиков. При выбивке пуансоном матрицы тоже едва ли вспомнят о красоте отбивки знаков препинания. Поэтому — на твоих плечах лежит тяжесть исправления этого недостатка, а ещё больше на плечах наборщиков. Последние не любят однопунктовых шпаций, но только такая тонкая шпация спасает здесь красоту набора. Поэтому — при знаках препинания: , ; . … : ! ? — настаивай, чтобы перед ними стояла однопунктовая (волосяная) шпация, но в том лишь случае, если у них нет среднего заплечика слева. Если от тебя зависит покупка шрифта для типографии — предусмотри этот вопрос при заказе шрифтов, заставь словолитню подумать о красоте её работы и в этой детали. М. И. Щелкунов «История, техника, искусство книгопечатания» (1926)

Пробелы при полной выключке

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

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

В Индизайне можно настроить минимальную и максимальную ширину пробела для набора в полную выключку: за основу берётся ширина обычного пробела 100 %, максимальная ширина обычно около 120 %, а минимальная — около 80 %.

Если текст набран с полной выключкой, то разумный минимальный межсловный пробел составляет одну пятую круглой (М/5), а М/4 (четверть круглой) — это то оптимальное значение, к которому следует стремиться. Разумный максимальный межсловный пробел — М/2 (полукруглая). Если можно довести его до М/3, тем лучше. Но для шрифтов с большими межбуквенными пробелами или текста, набранного мелким кеглем, лучше выбирать среднее значение М/3, минимум М/4. В строке прописных с большими межбуквенными пробелами может потребоваться межсловный пробел М/2 или более. Роберт Брингхерст «Основы стиля в типографике» (1992)

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

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

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

Чем ровнее промежутки между словами, тем лучше <…>. Не должно ни в каком случае допускать значительной разницы в ширине пробелов, а небольшая разница повредить красоте набора не может. Пётр Коломнин «Краткие сведения по типографскому делу» (1899)

Цифровой пробел (Figure Space)

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

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

Пунктуационный пробел (Punctuation Space)

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

Тонкий неразрывный пробел (Narrow No-break Space)

Тонкий пробел, который предотвращает автоматический переход на следующую строку. Название этого знака в Юникоде вызывает дополнительную путаницу — Narrow в данном случае то же самое, что и Thin, а Narrow Space имеет такую же ширину, что и Thin Space.

В некоторых программах, например в Indesign, простой тонкий пробел будет неразрывным по умолчанию и вызывается как Thin Space. В остальных случаях, например в вебе, используется отдельный символ Narrow No-break Space.

Пробелы в вёрстке

Распределение белого в вёрстке — важнейший фактор, отвечающий за аккуратный набор и понятную структуру материала. Многие дизайнеры помнят о взаимосвязях кегля, ширины строки и полей набора, но могут забывать о том, что межсловные пробелы равноценно участвуют в этих взаимосвязях.

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

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

Апроши у капители в шрифте Charter cлишком тесные, такую капитель нужно разрядить А в шрифте William автор предусмотрел разрядку капители, поэтому дополнительно разряжать такую капитель не стоит В тексте, набранном одним начертанием, тоже может понадобиться ручная компенсация: в шрифте Guyot ширины обычного пробела явно не хватает в последовательности of ‘i’

Пробелы в программах

В интерфейсах программ, не предназначенных для работы с типографикой, чаще всего доступны только обычный и неразрывный пробел. Однако почти везде, где поддерживается Юникод, необходимые дополнительные символы можно вставить с помощью буфера обмена. Всё зависит от программы или приложения: например, на момент написания статьи Фейсбук позволяет вставлять дополнительные пробелы в окно ввода, однако заменяет их на обычные при публикации.

В вебе, кроме того, дополнительные пробелы можно вставлять с помощью специальных обозначений в HTML — такое решение сделает исходный код менее понятным, зато позволит точно отследить, где были поставлены нестандартные пробелы. Обратите внимание, что разные браузеры могут отображать пробелы по-разному, а ещё недавно некоторые из них вовсе игнорировали дополнительные пробелы и заменяли их на обычные. Стоит проверять корректное отображение дополнительных пробелов там, где вы их используете.

Две основные программы для текстовой вёрстки — Adobe Indesign и Quark Xpress — поддерживают все типы пробелов. Шрифтовики часто включают в свои шрифты как минимум тонкий и волосяной пробелы, в таком случае величины этих пробелов корректно отображаются в программе. Автор шрифта сам определяет эти ширины, поэтому в зависимости от шрифта они могут сильно различаться, зато у дизайнера появляется больше контроля над межсловными расстояниями.

Если вызвать в панели Индизайна дополнительный пробел, которого нет в исходном шрифте, программа сама сделает расчёт величины этого пробела. Например, волосяной пробел и в акцидентном начертании с тесными апрошами, и в текстовом начертании с большими апрошами при кегле в 24 пункта будет равен 1 пункту.

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

Здесь стоит быть бдительными и доверять глазу — важны не математические величины, а убедительные взаимоотношения чёрного и белого.

Тире отбито волосяными пробелами, предусмотренными авторами шрифта Тире отбито волосяными пробелами, предусмотренными авторами шрифта В этих шрифтах нет волосяного пробела, поэтому он вычисляется автоматически Например, с такой высотой строчных и апрошами в Arno Pro и Ria Text ширины механического волосяного пробела вполне хватает. А в случае с IBM Plex, возможно, стоит использовать тонкий пробел вместо волосяного

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

Сводная табличка

Библиография

Александра Королькова «Живая типографика»
М.  И. Щелкунов «История, техника, искусство книгопечатания»
Эрик Шпикерманн «О шрифте»
Ян Чихольд «Облик книги»
Роберт Брингхерст «Основы стиля в типографике»
Пётр Коломнин «Краткие сведения по типографскому делу»

Jost Hochuli, Detail in Typography
María Ramos Silva, Type design for typewriters: Olivetti
Matthew Butterick, Butterick’s Practical Typography

Martin Wichary, Space Yourself (smashingmagazine.com)
Yves Peters, Adventures in Space (fontshop.com)
Алексей Ёжиков, «Всё (или почти всё) о пробеле» (habr.com)

Кирилл Беляев, «Пробелы и символы нулевой ширины, с копированием в буфер по клику, короткими мнемониками и аннотациями о применении», сводная табличка

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

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

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

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

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

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

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

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

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

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

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

Вы можете сказать: — “это так мило, что сегодня у нас есть 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 с той же целью — он был в поле пользовательского ввода и без него высота поля была недостаточной.

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

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

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

• Zero-width​​space

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как добавить пробел в HTML

, который отображает текст на веб-странице так же, как введенный в документе Html. 

 

 Любой текст или абзац 
  Шаг 6:  Когда мы успешно добавили пространство в документ, мы должны сохранить HTML-файл и запустить его.
  <Голова> <Название> Добавьте пробел, используя HTML-теги   <Тело> Эта страница поможет вам понять 
как добавить    пробел в   
 HTML-документ.
 
Кроме того, этот раздел поможет вам понять, как добавить пространство с помощью HTML-тегов. 
 Вывод приведенного выше HTML-кода показан на следующем снимке экрана:
 Использование внутреннего CSS 
 Если мы хотим добавить пробел в документ с помощью таблицы стилей Internal Cascading, чтобы показать пробел до и после текста, мы должны выполнить шаги, указанные ниже. Используя эти шаги, мы можем легко добавить пространство.
  Шаг 1:  Во-первых, мы должны ввести HTML-код в любом текстовом редакторе или открыть существующий HTML-файл в текстовом редакторе, в котором мы хотим использовать  Внутренний CSS  для добавления пробела.
  <Голова> <Название> Добавьте пробел, используя внутреннюю каскадную таблицу стилей.   <Тело> Эта страница поможет вам понять, как добавить пробел в HTML-документ.
Кроме того, этот раздел поможет вам понять, как добавить пространство с помощью таблицы внутренних каскадных стилей. 
  Шаг 2:  Теперь нам нужно поместить курсор в тег заголовка   HTML-документа, а затем определить стили внутри тега