Генератор уличных табличек

01.02.2021
задача:
Генерировать PDF по шаблонам с последующей возможностью печати в типографии
технологии:
перспектива:
По разработанным шаблонам генерировать полный объём указателей по целой улице

Генератор позволяет по шаблонам моментально делать файл, готовый для типографии. Для создания конечного результата не нужен дизайнер и программист: вы выбираете улицу, указываете номера домов и получаете готовый PDF-файл в цветовой модели CMYK.

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

Сейчас в системе 4 шаблона:

Название улицы:
template1
Номер дома:
template3
Номер дома со стрелками:
template2
Название улицы с номером дома:
template4

Каждый из шаблонов можно получить в 2 размерах: для маленьких и больших улиц. В интерфейсе есть выбор шаблона и размера улицы:

interface

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

Если название улицы длинное, а макет фиксированной ширины, система перенесёт слово или часть слова по принятым правилам.

preview1
preview2

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

data

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

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

arrow1
arrow2
arrow3

Точность размеров в миллиметрах

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

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

Независимость от шрифта на следующем этапе

Так же важной задачей было создание такого PDF-файла, чтобы не зависеть от шрифта, чтобы файл без зависимостей можно было открыть на компьютере на следующем этапе производства, например, в Иллюстраторе, для проверки или ещё чего-то.

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

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

Все расстояния и размеры на макете указаны в миллиметрах, а не переведены из пикселей.

Все тексты переведены в «кривые» — то есть нет зависимости от шрифтов и нет возможности исправить макет после создания.

На сайте хранятся шаблоны, в которых описаны правила для создания макетов:

  • фиксированные размеры макетов в мм,
  • шаг ширины макетов для адаптивных размеров,
  • поля макетов и отступы между элементами в мм,
  • цвета фонов и символов в CMYK,
  • размеры символов с учетом вложенности в пунктах.

Настройки шаблонов хранятся в отдельных файлах, которые можно при необходимости поправить.

Вот пример шаблона названия улицы:

/**
 * Template metric
 */
StreetSign.prototype.template_1_11_1 = function() {
  const
    INPUTS = ['type', 'name', 'translit'],
    SIZE = {
      WIDTH: {
        STEP: 40,
        SPACE: {
          MIN: 20,
        }
      },
      HEIGHT: [215],
      CORNER_RADIUS: 4,
      TEXT_BASELINE: {
        TYPE: 173,
        NAME: 94,
        TRANSLIT: 24,
      }
    },
    PADDING = {
      LEFT: 40,
      RIGHT: 40,
    },
    LINE = {
      WIDTH: 4 / PT_TO_MM,
      BASELINE: 62,
    }
  ;

  return this.template_1(INPUTS, SIZE, PADDING, LINE);
}

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

WIDTH содержит информацию о размере таблички. В данном случае ширина не фиксированная: шаг ширины макета 40 мм и минимальное расстояние справа от конца текста — 20 мм.

HEIGHT — массив возможных фиксированных высот (у некоторых шаблонов указывается не шаг размера, а конкретные величины).

CORNER_RADIUS — радиус скругления таблички.

TEXT_BASELINE — базовые позиции текстов (отсчитываются от нижней кромки макета): тип улицы, название улицы и перевод.

PADDING — поля внутри таблички; в этом шаблоне указаны только боковые, потому что позиции текста указаны в предыдущем параметре TEXT_BASELINE.

LINE — добавление линии на позиции BASELINE толщиной WIDTH (толщина линии указывается в пунктах, поэтому умножается на коэффициент для перевода в миллиметры).

Как видно из этого примера — все параметры достаточно просты для понимания и изменения, хранятся отдельно от запрограммированных действий и могут легко клонироваться.

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

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

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