Автор: Аркадий Перла (компания «ТриАПринт»).
На прошедшей недавно конференции разработчиков FileMaker один из участников в перерыве задал мне интересный вопрос — как вывести текст на лайоте в несколько колонок, так как мы привыкли видеть это в газетах, журналах и каталогах. Действительно, FileMaker является, фактически, идеальным средством для создания каталогов — с одной стороны это мощная СУБД, а с другой стороны он обладает развитыми графическими возможностями, которые могут использоваться для создания печатных форм. Причем, функционал разработки таких форм будет легко понятен дизайнеру, привыкшему работать с графическими программами и программами для верстки. Но пожалуй единственным фундаментальным недостатком, с которым мы сталкиваемся — то что нельзя заставить FileMaker вывести текст содержащейся в каком либо поле в две или более колонки. Или все-таки можно?
Признаться, в момент нашего обсуждения на конференции я не смог дать дельного совета. Первое, что мне пришло в голову, это тем или иным способом (калькуляция, скрипт) разбивать текст в поле на несколько полей либо репетиций по количеству слов, абзацев или символов. Такое решение «в лоб» имеет очевидные недостатки и будет очень сильно зависеть от структуры текста — что-то обязательно «поедет», нам придется проверять каждую запись и в целом такой способ далек от универсальности и легкости которую предоставляют программы верстки.
Задача не давала мне покоя, пока я не вспомнил остроумное правило — если ты не можешь что-то изобразить на лайоте в FileMaker, а очень хочешь, используй webviewer. Как только я вспомнил о webviewer, все встало на своим места — нет ничего сложного чтобы вывести текст из поля базы данных webviewer в виде нескольких колонок, сформировав соответствующую страницу HTML с использованием CSS.
Тем кто хорошо знаком с HTML и CSS можно дальше не читать — решение очевидно, я же расскажу о реализации решения.
Для того чтобы вывести текст в несколько колонок в html нам нужно задать соотвествующий стиль. В CSS за многоколоночное отображение текста отвечают следующие свойства:
column-count — количество колонок, на который нам нужно разбить текст
column-width — ширина колонки
column-gap — ширина зазора между колонками
column-rule — толщина, начертание и цвет линии разделяющей колонки
Таким образом в генерируемом html для webviewer, должно присутствовать что-то вроде такого:
.column {
column-width: 200px;
column-count: 3;
column-gap: 30px;
column-rule: 2px solid #F6CECE;
}
В это примере наш стиль требует выводить текст в виде трех колонок шириной по 200 px с расстоянием между ними в 30px и вертикальной сплошной линией толщиной в 2px розового цвета. Важный момент, который надо помнить, что стандарт css разработан исходя из того, что окно браузера может быть любым, и соотвественно браузер будет следовать инструкциям css-стиля, чтобы уместить текст в заданные рамки, настолько насколько это возможно. Очевидно, что в нашем примере, если размер окна меньше 600 px, то вывести три колонки по 200 px браузер не сможет, поэтому он автоматически ужмет ширину колонок до необходимой ширины. Можно сказать, что свойство column-count приоритетно по отношению к column-width. По большому счету мы можем использовать, только column-count, а ширина колонки будет определяться автоматически, на основании ширины объекта webviewer.
Второй момент, который надо помнить, что на платформах OS X и Windows FileMaker использует разные движки-браузеров для работы webviewer. В OS X — это webkit, на котором работает Safari, а в Windows — это движок Internet Explorer. Поэтому чтобы быть уверенным, что webviewer будет работать корректно на обоих платформах, свойства стиля мы должны записать в различных нотациях, понятных для обоих движков. Так что наш пример будет выглядеть теперь так:
.column {
-webkit-column-width: 200px;
column-width: 200px;
-webkit-column-count: 3;
column-count: 3;
-webkit-column-gap: 30px;
column-gap: 30px;
-webkit-column-rule: 2px solid #F6CECE;
column-rule: 2px solid #F6CECE;
font-size: 10pt;
text-indent: 30px;
}
Обращаю внимание, что я также снабдил наш стиль еще двумя свойствами: font-size — размер шрифта, со значением 10 pt, и text-indent — размер абзацного отступа в 30 px.
Для демонстрации я создал специальный файл multicolumn.fmp12. Для возможности экспериментирования, значения свойств стиля я задал в таблице в виде глобальных полей.
Здесь поле text — это текст который, нам необходимо вывести как многоколонный, а поле text_html — это калькулируемое поле, которое генерит html-страницу, с текстом из text, и которое мы «подсовываем» webviewer. В калькуляции text_html мы подставляем значения глобальных полей в свойства нашего стиля .column и само значения поля text записи.
Заметим, что чтобы в получаемом html абзацы текста отображались корректно с заданными нами свойствами, нам нужно заменить знак ¶ в тексте, на обрамление каждого абзаца тегом <p>. Для этого я использую функцию Substitute. По умолчанию абзац в html, предполагает отбивку сверху и снизу, это приведет к тому, что самая первая строка в первой колонке, может оказать немного ниже первых строк в других колонках. Чтобы этого не случилось, и текст выглядел аккуратно, я определил отдельно стиль p, указав величину отбивки перед абзацем как 0, используя свойств margin-top. Ну и чтобы иметь все-таки возможность контролировать отступы между абзацами, я заодно в стиль p добавил свойство margin-bottom, значение которого подставляется также из глобальной переменной.
В итоге значение получаемой калькуляции в поле text_html получается примерно таким:
И вот результат нашей работы.
Скачать файл multicolumn.fmp12 для собственных экспериментов можно здесь.
