Вёрстка: разбить текст на колонки

Вёрстка: разбить текст на колонки

iSergium

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

Вариант 1. CSS 3

В CSS 3 появилось замечательное свойство columns. Вместе с column-gapcolumn-rule и другими подобными они составляют мощный инструмент по организации колонок.

#columnized {
  columns: auto 150px;
  -moz-columns: auto 150px;
  -webkit-columns: auto 150px;
  column-gap: 20px;
  -moz-column-gap: 20px;
  -webkit-column-gap: 20px;
  column-rule: 1px solid #ccc;
  -moz-column-rule: 1px solid #ccc;
  -webkit-column-rule: 1px solid #ccc;
}

Данная запись говорит браузеру разбивать содержимое #columnized на колонки с минимальной шириной 150 пк, между колонками сделать расстояние 20 пк и вставить сплошную серую полоску шириной 1 пк. Пример использования на jsfiddle.net.

Поддержка браузерами этих основных свойств хорошая - все современные браузеры поддерживают их или напрямую или с префиксами:

css columns поддержка браузерами

Данная информация взята с сайта webref.ru.

Картину портят всё ещё популярные версии Internet Explorer 8 и 9 - согласно hi-news.ru в 2014 году они вдвоём сотворили почти 30% всего интернет-трафика.

HTML5 Shiv

Спасти ситуацию вызвался html5shiv.js - js-плагин, который помогает старым браузерам понимать много CSS 3 стилей, что актуально для Internet Explorer версий 9 и ниже.

Скачать и получить инструкции по работе и установке можно на странице плагина на GitHub. Подключить его просто, какие-либо дополнительные манипуляции не требуются:

<html>
<head>
...
    <!--[if lte IE 9]>
        <script type="text/javascript" src="/path/to/html5shiv.min.js"></script>
    <![endif]-->
...
</head>
<body>
...

Этот плагин позволит IE работать не только с колонками, но и со многими другими CSS 3 свойствами.

Вариант 2. Columnizer jQuery Plugin

Если функциональности CSS 3 недостаточно, то можно воспользоваться более мощным инструментом, вроде jQuery плагина Columnizer. Подробная документация есть на странице проекта в GitHub.

Простейший пример использования можно посмотреть на jsfiddle, остальные здесь в пункте Demos.