Cписок select с несколькими колонками без использования слоев

22.04.2015

Предлагаю вашему вниманию список <SELECT>, в котором без использования слоёв текст с пропорциональным шрифтом Times выведен в несколько колонок. В отличие от использования моноширинного шрифта красивого решения в этом случае получить не удастся. Ширина строк будет "плавать" на ширину самого узкого симвода выбранного шрифта. Но думаю, что в ряде случаев можно пристроить такой многоколоночный список.

Элементы html-формы имеют неплохую функциональность, но крайне скудный арсенал средств для настройски своего внешнего вида, а CSS-слои имеют слабую функциональность, но большие возможности по изменению своего внешнего вида. Для создания функционального и красивого элемента управления используют широко распространённый подход, заключающийся в привязке слоя к элементу управления. Внешний вид дадаётся слоем, а функциональность - элементов управления формы. Этот способ с успехом используется для создания красивых списков, создания html-редакторов на основе элемента <TEXTAREA> с подсветкой синтаксиса и т.п. Многоколоночный список также можно реализовать с использованием слоёв, но мне захотелось обойтись без них.

Итак, задача заключается в том, чтобы вывести текст пропорционального шрифта в список <SELECT> в неcколько колонок заданной ширины. Алгоритм выглядит так:

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

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

Функции получения ширины строки в пикселях в javascript нет. Для этого нужно записать строку в невидимый слой <div id="Buffer"> и вызвать метод offsetWidth