Многоколоночный текст. Реально ли это?
 

Почитав в интернете о многоколоночном тексте, о том как создавать его с помощью CSS3, пришел к выводу, что всё это ерунда и совсем не то, что нужно. Не то, что нужно людям и мне в частности.
Все механизмы создания (разбиения) текста на несколько столбцов страдают одной и той же проблемой: задается количество колонок. При этом высота колонок получается... уж какой получается, такой и получается! ;)
Всё это сводит на нет идею многоколоночности, т.к. в отличие от газет приходится сто раз скроллировать текст вверх/вниз чтобы читать такое на интернет-сайте.
Что требуется:
-не задавать количество колонок, а задавать только ширину колонок текста (возможно в процентном отношении к экрану). При этом механизм разбиения текста в определенном окне (DIV_е) не должен допустить появления вертикального скроллера.
-допустимо появление горизонтального скроллера в случае, если количество полученных столбцов по суммарной ширине превышает размер экрана по горизонтали.
Господа, есть идеи?

ff

<div style="-moz-column-width:150px;height:100px">Lorem ipsum dolor sit amet, consectetur adipisicing elit,   
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,   
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.   
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat   
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa   
qui officia deserunt mollit anim id est laborum</div>
<hr>
<div style="-moz-column-width:150px;height:200px">Lorem ipsum dolor sit amet, consectetur adipisicing elit,   
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,   
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.   
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat   
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa   
qui officia deserunt mollit anim id est laborum</div>

В чём проблема?

Откровенно говоря я даже не понял, что демонстрирует Ваш пример. Может я вижу на экране не то, что Вы? Я вижу два DIV_а, один над другим, каждый из которых повторяет один и тот же текст. Это не имеет никакого отношения к многоколоночному тексту.
Посмотрите, пожалуйста, на пример многоколоночного текста
http://www.xiper.net/examples/html-a...column-tr.html
Этот пример обладает недостатками, которые я описал в своем посте.
P.S. Посмотрел Ваш пример в Google Chrome, Opera, IE и увидел эффект только в FireFox.

Aetae,
в общем Вы правы. Точнее не в общем, а в частном случае. Я добавил к стилю ещё свойства:

<div style="column-width:300px; -moz-column-width:300px; -webkit-column-width:300px; height:200px; text-align:justify">

и поисследовал это. Вот живой пример: http://gigalit.com.ua/test/test116.htm
Браузеры неоднозначно отображают многоколоночный текст. Точнее когда это самый простой текст, то более-менее. Но если в текст вставить еще другие элементы (например, картинки), то результат восприятия неоднозначен.
Больше всего меня улыбнул Google Chrome. Он буквально разрезал картинку на три части и расположил эти части в трех колонках. Fire Fox отобразил картинку целиком, но на половине картинки написал текст (поверх). Opera просто обрезала половину картинки показав только ту часть, которая уместилась в колонке. IE 8 - не смог.
На http://www.xiper.net/collect/js-plug...ti-column.html
описан эмулятор многоколоночного текста для IE, Однако с ним много проблем. И вообще, когда я заглянул вовнутрь эмулятора http://www.xiper.net/examples/html-a...ulti-column.js - мне стало страшно. Там для эмуляции "column-width" даже используется xmlhttp (!?)
В общем, сырое это всё пока что ещё.
Скажите, а кто-нибудь уже сейчас использует многоколоночный текст на своих сайтах?

Не знаю, вроде должны, но не видел.)

Как сделать кроссбраузерный многоколоночный текст?
 

Меня посетила гениальная идея ;) как сделать кроссбраузерный многоколоночный текст. Делается это не с помощью CSS3, а с помощью всеми нами любимого javascript.
Рассказываю суть механизма (на упрощенном примере). Предположим, у нас на экране текст помещается в 5 колонок. Создаем 5 элементов DIV с абсолютным позиционированием, заданными размерами и overflow:hidden.
Например, стиль такой:

position:absolute; top:50px; left:' + l + 'px; width:'+dx+'px; height:'+dy+'px; overflow:hidden

Каждый такой элемент будет имитировать одну колонку текста. После этого в каждую такую колонку вставляем тоже контейнер DIV, в который помещаем наш длииииинный текст. После этого смещаем в отрицательную область свойство top встроенных (внутренних) контейнеров на высоту "колонки" текста пропорционально номеру колонки. Получаем волне красиво и одинаково во всех браузерах: Живой пример: http://gigalit.com.ua/test/test119.htm
Проблемки:
1. Пример я сделал умышленно только для "plain" текста. Чтобы не было разрезания текста прямо посередине строки необходимо задавать свойство line-height и высоту DIV "колонки" таким образом, чтобы второе было кратно первому (делилось нацело).
2. Для очень больших текстов может потребоваться значительно больше памяти, чем для небольших, т.к. практически весь текст дублируется столько раз, сколько колонок на странице. Но, это можно поправить, усложнив механизм (рисовать только видимые колонки на экране и отслеживать координату top при перемещении горизонтального скроллера).

Для чтения текста на планшете или ином другом лопатнике я использую ссылку с выпадающим текстом. Сейчас решил сделать другую фичу - рисунок в векторной графике *.svg в программе Inkscape пишу текст и сохраняю в векторе. Преимущество - текст читаем. Для скроллинга - кнопка с ссылкой на якорь. Как бы там ни было многие лопатники не поддерживают множество скриптов.