x
 
Максим Ильяхов
18 октября 2012

Артём!

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

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

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



Максим!

Для полупробелов между разрядами я использую пустые теги, а для отделения единиц от числа — с неразрывным пробелом:

9<span class="hs"></span>490<span class="rhs"> </span>€<br/>
12<span class="hs"></span>650<span class="rhs"> </span>$<br/>
379<span class="hs"></span>000<span
  class="rhs"> </span><span class="b-rub">Р</span><br/>
100<span class="hs"></span>500<span class="rhs"> </span>+

ЦСС такой:

.hs {
  /* Полупробел для
  разделения разрядов чисел:
  10<span class="hs"></span>000 */
  margin-left: .2em;
}

.rhs {
  /* Полупробел на случай,
  если реальный пробел важен,
  например между ценой и валютой:
  1<span class="rhs">&nbsp;</span>$ */
  font-size: 50%;
  line-height: 1;
}

При копировании в буфер попадают числа без пробелов, ведь их физически нет:

9490 
12650 $
379000 Р
100500000 +

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

Совет Бирмана о тонких пробелах

P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться
Отправить

Комментарии

Александр Удовик
18 октября 2012

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


18 октября 2012

Александр, большинство браузеров не разрывают конструкцию из совета. Только Яндекс-браузер и, кажется, мобильный Сафари рвут число на месте пустого тега. Если это критично, оберните число в nobr.

Игорь Карпинский
20 октября 2012

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

Случайный прохожий
10 ноября 2012

Артём, Яндекс.Браузер — это перелицованный Хромиум. Не надо выделять его из «большинства браузеров», если сам Хромиум или Хром не выделяете.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

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

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

Вот такой веб 2.0.

4 5 Сайты для слабовидящих 2 1




Недавно всплыло

2 Визуализация проявляет 4 Несмотря на то, что между нами была договорённость о работе по ФФФ, клиент был в бешенстве 5 Поделитесь соображениями, как работать, путешествуя 8