В своей работе я часто сталкиваюсь с числами — любой интерфейс, который правит деньгами, содержит их великое множество. Как известно, есть два принципиальных способа написать одно и то же длинное число:
1) Удачный — с разбиением по разрядам:
40817 84054 00000 12345
2) Не слишком удачный — без разбиения:
40817840540000012345
Очень немногие дизайнеры, знающие о первом способе, задумываются о том, кто и как с этими числами будет работать (как это выяснить — тема отдельной статьи). Но так уж случилось, что у интерфейсов (которые правят деньгами) крайне специфичная аудитория: с пугающей частотой можно услышать фразы вроде:
— А я беру отсюда табличку, вставляю ее в Эксель и считаю в нем.
Суть в том, что числовые данные наиболее часто (по сравнению со всеми другими видами данных) переносятся из интерфейса в интерфейс. В случае с Excel никаких проблем нет — он вполне корректно оперирует числами, написанными с пробелом. Однако бывают неприятные исключения:


Заполнение формы перевода в одном из интернет-банков. Реакция на номер счета с пробелами, который был скопирован из другого интернет-банка.
«Это дело программистов» — скажет кто-то и окажется неправ. Дизайнер интерфейсов может повлиять на эту проблему, особо упомянув (при передаче прототипа заказчику) о способе верстки, используя который можно избавить пользователя от радости удаления лишних символов после копировании чисел в сторонние интерфейсы.
Технологически это может выглядеть как угодно, но основная идея в том, что число заключается в некую конструкцию, которая изменяет его визуально, но не физически, например:
<style type="text/css">
.sample {padding-left:0.3em;}
</style>
…
40817<span class="sample">84054</span><span class="sample">00000</span><span class="sample">12345</span>
Число, сверстанное таким образом, копируется из браузера без пробелов.
Важно понимать, что такая верстка не всегда уместна. Если интерфейс представляет собой гигантское полотно из чисел, а о пользователях известно, что они работают через медленные каналы связи, стоит задуматься о том, что более важно — скорость загрузки или наличие возможности быстрого переноса числовых данных.
3 июля 2009 в 00:15
Для “полотен” есть 2 модификации:
1) {padding: 0 0.3em} - отступ в две стороны позволяет сократить в 2 раза число тегов для групп разрядов больше двух.
2) замена на с выравниванием начертания.
3 июля 2009 в 00:16
оп-па, тег <i> не экспонировался.
3 июля 2009 в 11:29
Хороший способ, спасибо.
При этом приложения всё равно не должны требовать ввод чисел в определённом формате.
14 июля 2009 в 22:09
Паша, пример не особо удачный, так как в банковском учете цифры номера счета группируются по смысловой нагрузке. Так, например, 40817 - область аналитического учета в плане счетов, а 840 - код валюты счета и т. д. Маска выглядит примерно так: 42301 810 Х ХХХХ ХХХХХХХ.