Pull to refresh

Двухколоночная верстка текста

CSS *
Result
Данный топик — это не изложение азов на тему «Как сделать на своей странице две колонки с использованием div'ов и css». Передо мной стояла задача разбить монолитный текст на две колонки, подобно тому, как это делает MS Word. Стандартного тэга в css для этого не существует, поэтому пришлось немного потанцевать с бубном для решения поставленной задачи.
Ширина колонки с текстом очень сильно влияет на простоту восприятия информации пользователем. И поэтому, учитывая нынешнюю популярность широкоформатных мониторов, разбивка текста на колонки существенно увеличивает его «читабельность».
Для разбивки текста на колонки использовались css и немножко javascript'а. Сам алгоритм разбивки состоит всего из четырех шагов:

Шаг 1.


Создаем блок для текста (в примере он называется «News») и помещаем в него два блока, в которых и будет распологаться наш текст. Весь текст пока что находится в первой колонке.
Простите за мой французский Photoshop, иллюстрации делал на быструю руку, думаю, смысл будет понятен:
Step1

Шаг 2.


Первым шагом мы весь текст загнали в первую колонку Col1. Теперь javascript'ом копируем весь текст во вторую колонку (на иллюстрациях текст специально сделан градиентом, чтобы в дальнейшем можно было определить, где его верхняя часть, а где нижняя):
Step2

Шаг 3.


Все тем же javascript'ом определяем нынешнюю высоту колонок Col1 и Col2. Колонке Col2 задаем отрицательный margin. Margin должен быть равен ровно половине высоты колонки. Тем самым мы поднимаем вторую колонку вверх, оставляя видимой только ее нижнюю половину:
Step3

Шаг 4.


Задаем общему (желтому) блоку текста высоту, равную половине высоты колонки. Остальное обрезаем при помощи свойства overflow:hidden.
Step4

И смотрим результат.

Вместо заключения


Более сложная задача — вставить в этот текст изображение или видео, если оно попадает ровно на середину текста, или же если его ширина превышает ширину одного столбца. Согласитесь, нелепо будет выглядеть фото, если половина его располагается в нижней части первой колонки, а вторая половина — вверху второй.
Передо мной не стояла задача реализовать такой вариант, но по идее и это решается. Все изображения должны иметь аттрибут position: absolute, а внутри колонок при помощи javascript'а необходимо будет создавать пустые элементы с размерами и координатами точно под изображение с relative position (иначе текст скроется ПОД изображениями).
Tags:
Hubs:
Total votes 148: ↑92 and ↓56 +36
Views 7K
Comments Comments 89