Pull to refresh

Comments 89

бррр! Какие цвета картинок ужасные!
вот так вот, поставишь человеку "+" в топик

а тебе минуса в коммент (картинки-то и правда глаза режут!) и карму.
UFO landed and left these words here
UFO landed and left these words here
> если у юзера отключен javascript
и картинки
– О-о-ох…
Получается, на странице два блока с одинаковым текстом. Не уверен, что с т.з. SEO это гуд.

По сути реализации. Если уж подключать JS, то можно в динамике дробить текст на две части и распихивать по блокам. На небольших объемах текста тормозить не должно.
Как разбить текст на две равные части? Тут же не символы считать надо, а его высоту при отображении в браузере. Да еще и в разных браузерах она может отличаться.
А я не про точное деление говорил. Допустим, бить на предложения. Свои грабли у этого способа есть. Причем, не хилые. Но, имхо, лучше, чем дублировать текст на странице.
А чем не устроил подсчет кол-ва символов? По-моему, можно определить их кол-во для каждого абзаца P, и после перенести несколько последних абзацев в соседний div так, чтобы суммарное кол-во символов в абзацах справа и слева было примерно одинаково.

При этом вторую колонку можно вообще создавать динамически и немного менять цсс, тогда решается проблема даже с параноиками с откл. js — у них просто будет одна колонка.
В приведенном примере пять одинаковых абзацев. Куда в таком случае должен пойти третий абзац? Здесь он делится на две части
Два варианта:
— либо бьем его на два, чтобы уравнять кол-во символов;
— либо оставляем в левой колонке три абзаца, а два переносим в правую (здесь логично, что в первой колонке должно быть больше текста).
Вот, можно, например, так разбивать. Это далеко не оптимально, но вполне себе работает. Можно даже на onresize повесить обработчик и следить.
pastebin.ca/1913728
Ага. И при копировании текста их тоже получается два.
Я где-то про копирование сказал?
Понедельник день тяжелый? :) Вы сказали про два блока, я добавил, что при выделении и копировании информация тоже дублируется.
Насколько я понял, автор предлагает копировать текст во вторую колонку с помощью JS, то есть на SEO это не должно отразиться.
Скрипт не всем браузерам нужен, есть же CSS Multi-column Layout Module и в некоторых браузерах разбиение на колонки уже работает. С исключениями, но работает.
работает в лисе и вебкитовских браузерах.
Проще подгрузить плагин для jquery (там 4 строки :))

$(function(){
	$('.wide').columnize({width:400});
	$('.thin').columnize({width:200});
});
и ~60kb кода скриптов
http://code.jquery.com/jquery-latest.min.js


всего 24 кб
И тем более jquery используется повсеместно. А если используется не он, то не проблема под свой фреймворк переписать
это если стоит гзип, и поверь мне он мало где стоит, а если и есть, то выключен
а так, просто джиквери само 72кб + приблуда будет отдельным файлом
jQ надо брать с Google CDN. Все нормальные разрабы так делают, поэтому jQ у пользователей закеширован — либа-то очень популярная. Чем больше разрабов станут использовать CDN, тем меньше траффика будут тратить пользователи.
UFO landed and left these words here
или…
и все кэширование теряет смысл)
Нет, надо брать с CDN. Иначе толку от кеша? Большинство юзает CDN, а про йандекс за пределами России не знает никто. Йандекс молодцы, но тут они дали маху.
UFO landed and left these words here
А, тады сорри. Я не местный, как там у вас с инетом — ничего не знаю. Если есть такая проблема, то стоит юзать Yandex, полностью согласен. Если есть много посетителей с зарубежа, то стоит фильтровать по IP и выдавать два сервера.

Извините, да, я просто привык, что инет он какбе один и его дофига и он бесплатный.
UFO landed and left these words here
это немного разные вещи
большой монитор — это значит, деньги есть
а браузеры — они бесплатные
если человек с монитором не сильно (или вообще не)разбирается в технологиях, то будет пользоваться тем, что по умолчанию
так что еслу у него Mac — это будет Safari, а если Windows — будет IE
При попытки копировать, копируется 2 идентичных текста, а это существенный минус…
При изменении шрифта текст обрезается
При изменении размера шрифта, наверное?
Сейчас JS рассчитан на line-height 20px, как указано в CSS, поэтому там строчка if (cmax%40>0) {cmax = cmax + 20; }
20 и 40 могут стать константами и зависить от размера шрифта, это ведь просто пример.
А что, если высота блока не кратна высоте строки?
Тогда строка переноса разрежется пополам?
Ответил выше. Как раз в указанном примере высота не кратна — приходится «добавлять» еще одну строку за счет строки JS if (cmax%40>0) {cmax = cmax + 20; }, где 20 — высота строки, а 40 — удвоенная высота
Плохая распорка :) <sup> например вам все порушит. Не говоря уже о каком-то более глубоком форматировании.
В идеале надо было бы половинным делением делать:
1. Делаем скрытый див размером в 1 колонку.
2. Копируем в него полтекста (бьем, к примеру, по пробелу)
3. Копируем в него вторую половину
4. Сравниваем высоты.
5. Если надо — переразбиваем (бьем бОльшую часть пополам)

Половинным делением можно за логарифмическое время разбить, думаю что будет не очень ресурсоемко.
Да, это пожалуй получше метод, чем тот, что я предложил. Не думаю, что сожрет много ресурсов, а поделит действительно ровно пополам.
На самом деле немного. Логарифмическая сложность — она «несложная» :)
Хотя над таким методом тоже думать надо, он гораздо сложнее в реализации, а значит больше вероятность ошибок в разных браузерах.
Например, разбивка по пробелу. Пробел может оказаться внутри тэга html. Значит тэг нужно продублировать. А еще хуже, если пробел вообще стоит там, где текст делить нельзя, например между a и href.
И все эти условия нужно проверить JS, ни о чем не забыть. И если будет много итераций, то сожрет немеряно ресурсов.
P.S. Но способ все равно очень хороший)
Да, Вы правы, HTML нужно учесть. В простейшем случае просто не бить внутри тега — это несложно. Однако это может нарушить ДОМ (закрывающий тег попадет в другую колонку). Тут уже все сложнее, конечно. И для корректной реализации нужно придется идти по дереву и дублировать разорванные теги.
ой, сорри, вы это уже написали, а я ниже сдублировал
я бы не стал реализовывать такой алгоритм потому что помимо логарифмического приближения предстоит еще многократный посимвольный перебор. Сложность анализа приближается к сложности написания своего браузера, учитывая что последовательность дивов не всегда означает что они будут на экране выглядеть именно в такой последовательности.

Ну и время. Разница для больших многостраничных документов таки есть, если для генерации страницы ждать секунду или 30 секунд.

Гораздо проще использовать алгоритм из топика плюс заглушки для самых популярных тегов. Я использовал эту технологию и писал заглушку для тега имадж. Она делала несколько вещей: дописывала марджин, выравнивающий картинку под шаг шрифта, проверяла, не стоит ли картинка сразу на двух страницах и тоже увеличивала марджин, уменьшала картинку если она не вписывалась в колонку. Весил весь код, включая код оформления книжки и пагинатор 1.8 кбайт без сторонних библиотек. Быстро и просто.
Ну если по-умному реализовывать, то посимвольный перебор (синтаксический анализ) необходимо делать только 1 раз: предварительно разбиваем на дерево тегов (с тем же jquery это несложно), и каждое содержимое контейнера уже посимвольно анализируем, запоминая в листе дерева возможную позицию разбивки.

После этого задача сводится к обходу дерева поиском в глубину, при этом «первой половиной» будет левая часть относительно текущей вершины, а «второй половиной» — правая.

Сложность «написания своего браузера» — это уж слишком пессимистичная оценка ;) В приведенном выше алгоритме сложность сводится к дублированию всех родителей текущей вершины для закрытия тегов или их открытия.

Наверное, на досуге таки реализую… может быть в качестве плагина к тому же жквери.

Однако соглашусь с тем, что див на экране может находиться не совсем там где он есть в коде — но тут придется таки принебречь некоторыми возможностями, вроде position: absolute; или всяческих манипуляций с маргинами, иначе тогда двухколоночная верстка смысла особого не имеет. Все же мы ее хотим применить с обычным текстом (streamLayout, если так можно выразиться).
если бьёте внутри абзаца или <div>'а — надо в первой колонке закрыть </p> или </div>
а во второй надо открыть новый, с теми же стилями, что и первый был
то есть когда бьёте, надо будет ещё отследить открывающий тэг
Идея интересная. Но, можно предположить, найдутся какие-то маргинальные случаи, когда будет виден кусочек строки.
Стандартного тэга в css для этого не существует, поэтому пришлось немного потанцевать с бубном для решения поставленной задачи.

Прими небольшую поправку по тексту твоего поста: в css тег — это сущность, которой можно задавать свойства, ты, в свою очередь, видимо хотел сказать про свойство.

По поводу самого метода разделения текста — мне кажется, что этот метод является решением лишь для одного расклада требований, не больше, следовательно полезность его приближается к 1% случаев.

Эээх, вот в таких ситуациях и понимаешь всю мощь CSS3.0, где можно было бы написать одну строчку column-count: 2; и ничего более. Кому интересно — ссылка на источник w3c
Держите готовый плагин Columnizer jQuery Plugin. На странице представлено много демок, если лень все смотреть, то можете посмотреть демо с текстом и демо с картинками. Кстати, 2 колонки на главной странице плагина — это тоже результат его применения.
В демке с картинками вторая колонка начитается с точки почему то.
ff 3.6.8, вторая колонка начинается с «timeam sapientem eos».
В каждом браузере по разному начинается. Да и с картинками бока какие-то, если уж писали с учетом картинок, то можно было и получше реализовать. Хотя для разработчика гораздо проще — скопировал код и готово)
судя по тому что в опере и хроме окрашиваются синим цветом разные блоки текста, сделаю предположение, что алгоритм похож на алгоритм, предложенный 0lympian выше.
стоит тогда для людей с отключённым JS делать первую колонку изначально растянутую на всю ширину блока. А если включён JS то уже им уменьшать колонку в 2 раза и создавать вторую, дабы текст при отключённом скрипте не выглядел узким
Решение тривиальное, непонятно зачем писать об этом
App Engine Error


Over Quota
This Google App Engine application is temporarily over its serving quota. Please try again later.
да я уже и не думал, что пост на главную пробьется
Ага, осталось только дождаться, когда IE и Opera будут ассоциироваться у пользователей со словом «вирус»…
Еще с выделением проблемы: попробуйте выделить немного текста в первой колонке, потом нажмите Shift+вниз — обе колонки начнут прокручиваться вниз и вылезет скрытый текст (Chrome, Safari). В FF прокрутки не будет, но выделение поползет в скрытую область, а не на следующую колонку, как бы я ожидал. В Opera и IE Shift+вниз не работают.

Ну и +1 за то, что при копировании мышкой скопированный текст дублируется — это плохо.
«Данный топик — это не изложение азов на тему, куда не нужно заливать картинки...»
Пожалуй, стоит поизучать азы)))
Я уже и забыл про этот пост, никак не ожидал, что он два дня спустя на главную выберется
Способ годится лишь как упражнение для студентов первого курса.
В реальных проектах использовать вряд ли порекомендую.
что-то у меня картинки не отображаются…
недавно написал код для разбиения DL-списка на две колонки, ничего два раза копировать не требуется, решение на js
Распилил и откатил.
Тестировал как-то хабраэффект на GAE. Одна картинка размером 17kb (на главной), дала трафика чуть больше чем на 1Gb.
Стандартного тэга в css для этого не существует
Неудивительно — в CSS нет тегов. Кстати, когда-то в Netscape для этой цели придумали тег MULTICOL.
С Javascript не интересно, будет куда восхитительней сделать это на HTML+CSS. Уже не одно копье сломал, пытаясь этого добиться.
В принципе, алгоритм все тот же. Сделал за 10 минут без проблем, ток почему-то в Опере лажу выдает. Chrome, ff и IE(!!!) работает отлично.
Я не большой мастер верстки, сейчас попробую устранить, но не обещаю. Получится — выложу…
Я не большой мастер верстки, сейчас попробую

А зачем тогда «небольшому мастеру вёрстки» писать топик с решением проблемы, в которой он не разбирается и даже не знаком с модулем Multi-column?
UFO landed and left these words here
Меня одного передергивает от justify на первом скриншоте?

А про идею — практическое применение с мультимедиа контентом убьет верстку, как автор, впрочем, и заметил в конце поста. Но предложение применить JS для исправления косяков верстки меня вгоняет в ступор.

Увидел, что плагин для jQ уже предложили. Дважды. Повторяться не буду, лишь соглашусь.
а почему бы не делать это так как это делают в бумажных изданиях? я имею ввиду руками. имхо, луче чем привязывать к килобайтной страничке гигабайтный скрипт который делает это автоматом…
Какае-то выдуманная проблема и попытки ее решить.
Я бы не читал текст разбитый таким образом.
Вёрстка в узкие колонки это наследие печати (газет и журналов). На экране она нафиг не упала.
Максимум допустимоси — если высота колонки не превышает высоту видимой области. Если мне нужно три раза проскролить вверх-вниз экран — читать жутко неудобно.
о ajax и серверсайд никто не подумал.
что вы клиента мучаете, как в корейских сайтах. 160 кб жабаскрипта из которого исполняется 1%.
да и еще — дико извиняюсь, но вообще-то уже появились вебсокеты.
в корее никто не считает килобайтов, поскольку широкополосный интернет там распространился почти на десять лет раньше, чем у нас
Не хочу показаться неадекватным — не проще ли вставлять в текст специальные метки (например, [p]) по которым резать текст на колонки яваскриптом?
В любом JS-текстовом редакторе можно наглядно определить где разместить такой псевдо-тег.
Ну и не задача это браузера разбивать текст на колонки. а задача верстальщика (редактора текстов), т.к. только он может оценить полученный результат с точки зрения правильности
Only those users with full accounts are able to leave comments. Log in, please.