Показать сообщение отдельно
  #6 (permalink)  
Старый 27.03.2012, 18:59
Профессор
Отправить личное сообщение для Маэстро Посмотреть профиль Найти все сообщения от Маэстро
 
Регистрация: 02.07.2010
Сообщений: 642

Как сделать кроссбраузерный многоколоночный текст?
Меня посетила гениальная идея как сделать кроссбраузерный многоколоночный текст. Делается это не с помощью 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 при перемещении горизонтального скроллера).
Ответить с цитированием