Колонки разной ширины
Продолжаю рассказывать про неудачные приемы верстки. Сегодня про ширину колонок (метафоричного названия не придумал). Принцип такой:
Если текст в колонках одинаковый, то и колонки должны быть одной ширины.
Иногда они получаются разными из-за неаккуратности:
Иногда их делают такими специально, подгоняя под ширину текста:
А бывает, что технически колонки одной ширины, но текст заполняет одну плотнее, чем другую:
Такое случается не только со списками, но и со сплошным текстом. Ниже ситуация, понятная для веба, но странная для печати:
В вебе сложно контролировать форму правого края, а в печати можно включить переносы или разбить на строки вручную:
Конечно, при левой выключке ширина текста никогда не будет абсолютно одинаковой. Смысл в том, чтобы разница не бросалась в глаза.
Список и ширина колонки
У каждого списка есть своя оптимальная ширина колонки, а точнее, оптимальный диапазон ширины — такой, в котором ему комфортно. (Под списком я подразумеваю любые мелкие порции — кусочки текста, сопоставимые по структуре и объему.)
Возьмем пример с короткими элементами. Если пунктов немного, то проблемы нет:
Чем длиннее список, тем больше разрастается дыра справа. Верстка перестает быть модульной (и компактной):
Логичное решение — разбить на колонки. Вопрос в том, сколько колонок сделать. При трех еще дыряво, зато есть запас прочности на случай, если вдруг появится Константинопольский К. К. Хороший вариант для веба, где всё немного плавает:
Если Константинопольского К. К. не предвидится, можно уместить и в четыре. Хорошее решение для печати, где всё железно:
В пяти колонках останутся обрезки, да и средник слишком узкий:
Другой пример. Правый край получился рваным из-за того, что строки сильно отличаются по длине:
Разбиваем на два столбца. Так аккуратнее:
Иногда бывают варианты. Этому списку удобно и в одной, и в двух колонках:
В трех тоже выглядит неплохо, но читается хуже, слишком частый ритм:
Вывод: подбирайте ширину колонки в зависимости от количества и объема пунктов списка. Всё просто, однако плохие примеры на каждом шагу.