Газетные колонки в формате HTML

CSS3 позволит вам сделать это с их многоколоночная поддержка, но на данный момент вы, вероятно, не можете полагаться на то, что очень многие браузеры его поддерживают, поэтому вам, вероятно, придется полагаться на альтернативный метод.

Два примечания:

• То, что подходит для печатного носителя, не подходит для показа. Прокрутка вверх, чтобы продолжить чтение, не кажется мне хорошей идеей. В конце концов, длина веб-страниц не ограничена ...
• Вы не можете этого сделать с помощью CSS2. Я думаю, что CSS3 поддерживает это (не уверен), я сомневаюсь, что он поддерживается большинством браузеров.

Поэтому я полагаю, что JS - ваш лучший выбор, но, конечно, он не будет работать для пользователей с отключенным JS.

Я согласен с PhiLho. Если вы все еще хотите попробовать, код js, разделяющий ваш контент на два столбца, довольно прост, если столбцы имеют фиксированную ширину. Сложность состоит в том, чтобы решить, где разделить контент. Вероятно, вы не захотите разбивать слова на середине и т. д.

Вы можете попробовать следующий сценарий: Добавьте на страницу два столбца. Поместите текст в первый столбец (это позволяет браузерам, отличным от js, по-прежнему отображать ваш контент). Получите текст с помощью js (например, из события onload). Найдите следующий индекс "." (или если у вас есть абзацы «</ p>»), начиная с середины. Используйте этот индекс, чтобы разделить текст и вернуть первую часть в первый столбец и так далее ...

Вот простая (не поддерживающая CSS) функция javascript, которая сделает это:

function Newspaperize(elem)
{
    var halflength = elem.innerText.length / 2; 
    var col1 = elem.innerText.substring(0, halflength);
    var col2 = elem.innerText.substring(halflength);

    elem.innerHTML = '<TABLE WIDTH=100%><TR>' + 
        '<TD WIDTH=50% VALIGN=TOP>' + col1 + '</TD>' +
        '<TD VALIGN=TOP>' + col2 + '</TD>' +
        '</TR></TABLE>';
}

Поместите текст где-нибудь в обычный элемент и вызовите Newspaperize (yourelement), когда страница загрузится.

Примечание: эта функция просто разделяет текст пополам. Чтобы действительно работать правильно, вам нужно найти пробел или дефис рядом с серединой и разделить текст там.

У IHT хорошая реализация формата 3 столбца. Однако, похоже, это вычисляется на стороне сервера, я думаю, путем подсчета слов.

Как говорили другие, это невозможно с ванильным CSS / XHTML (по крайней мере - до тех пор, пока мы не получим широкое распространение CSS3 :-)

Однако, облачаясь в мою шляпу пользовательского опыта, я был бы заинтересован в вашем варианте использования, если вы хотите, чтобы это было на веб-странице (при условии, что вы ориентируетесь на обычную веб-страницу). В отличие от печати, разделение блока текста на два столбца может затруднить чтение. Если он длиннее экрана, то пользователю приходится много прокручивать вверх и вниз, чтобы отсканировать / прочитать все.

Так что - даже если вы можете сделать это с помощью взлома JS - может быть лучше придумать альтернативный дизайн, который в нем не нуждается.

Мне удалось сделать что-то подобное, но опять же, не в CSS, я использовал PHP для подсчета слов и разделения текста. К сожалению, подсчет слов - довольно плохой способ сделать это, поскольку некоторые слова длиннее других, а столбцы не совпадают. Мой дизайн был вдохновлен сайтом IHT. Это не очень сложно реализовать на PHP.

Если вы решите сделать это, это уже возможно в Mozilla и WebKit (и Принц) только с CSS:

selector {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}

Итак, я искал ответ на этот вопрос, к сожалению, сначала я не нашел его, а теперь, через 3 часа, нашел.

Я нашел библиотеку JavaScript, которая использует атрибуты css3 (если я правильно понял, только попытался заставить ее работать, и это сработало, я прочитаю в js позже)

библиотека найдена здесь: http://www.csscripting.com/wiki/index.php?title=CSS3_Multi_Column

Единственным недостатком является то, что текст, который вы хотите сделать в несколько столбцов, должен находиться между двумя тегами (я предпочитаю использовать тег <p>, поскольку он также поддерживает несколько тегов <p>.)

тестировал в ff 3.6, т.е. 8, opera 10.51 и chrome 4.1. Я не в состоянии тестировать старые браузеры, поэтому рекомендую, чтобы кто-нибудь сделал это в ближайшее время; P

ваше здоровье!

Это входит в спецификацию CSS3, и в Moz / Webkit он уже реализован с префиксами поставщиков. Используйте свойства column-count и column-gap:

#container {
  -moz-column-count: 2;
  -moz-column-gap: 20px;
  -webkit-column-count: 2;
  -webkit-column-gap: 20px;
  column-count: 2;
  column-gap: 20px;
}

Обратите внимание, что, конечно, они не поддерживаются ни одной версией IE, которую кто-либо использует. CanIUse.com утверждает, что IE 10 будет поддерживать его как часть CSS3.

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

В качестве отправной точки см. Справочную страницу w3schools.com CSS3 Несколько столбцов.

Однако, как обычно, только IE среди широко используемых браузеров не поддерживает свойства столбца CSS3.

Одним из кроссбраузерных решений является Плагин Columnizer jQuery.