css - tablas - Administrar columnas de texto en diseño receptivo

div dos columnas responsive

Question

Estoy trabajando en un sitio que utiliza un diseño receptivo y me he encontrado con un problema para solucionar las deficiencias de las nuevas propiedades CSS de varias columnas (http://dev.w3.org/csswg/css3-multicol/) .

Cuando la ventana del navegador es lo suficientemente amplia, divido el texto en dos columnas con una barra lateral para imágenes más pequeñas. Las propiedades CSS de varias columnas funcionan muy bien, pero no son demasiado inteligentes.

La primera sección se divide de manera uniforme en dos columnas de igual altura, pero son demasiado altas. Para que alguien lea esta sección tendrían que desplazarse hacia abajo a lo largo de la primera columna, luego retroceder hasta el comienzo de la siguiente para leer el resto.

La segunda sección está dividida en dos columnas de igual altura también, pero solo hay dos oraciones, por lo que se ve incómodo; no hay suficiente contenido para justificar una segunda columna que el usuario debe leer.

La solución, en mi mente, es esta:

1. Separe las secciones en subsecciones con una altura máxima fija. De esta forma, puede leer columnas sin desplazarse por la página, y se parece más a un artículo.
2. Mantenga las secciones que son más cortas que esa altura máxima como una sola columna.

El problema es que las columnas múltiples CSS3 no funcionan de esta manera. Creo que la única forma sería algún tipo de solución de javascript que implique cálculos de recuentos de caracteres, propiedades de texto css y dimensiones de elementos, y luego dividir cadenas / agregar nuevos elementos html para distribuir el contenido en secciones separadas para hacer que las columnas se rompan correctamente.

Tenga en cuenta dos cosas:

1. Estas columnas tienen un ancho de fluido, por lo que elegir números mágicos no funcionará.
2. El proceso debe ser reversible, por lo que el diseño receptivo puede volver a 1 columna con anchos de navegador más estrechos.

Es un poco complicado, pero creo que es lo suficientemente factible como para intentarlo. ¿Alguien ha oído hablar de alguien que ya esté abordando este problema? O si no, ¿tienes alguna idea sobre cómo armar un algoritmo para esto?

Muchas gracias por su ayuda.

1/8/13:

Para aclarar, aquí hay algunas imágenes de los modos previstos del diseño receptivo. (Solo dos enlaces ya que soy nuevo en SO)

Modo 1: columna única linealizada para dispositivos móviles

Modo 2. Columna única con barra lateral para iPad / ventanas de navegador estrechas

Modo 3. Dos columnas para ventanas de navegador anchas

Modo 3 es donde está el problema. El contenido de la primera sección es demasiado largo para caber en una página, por lo que en este caso lo estoy dividiendo en filas que se ajustan a la altura del navegador. Para eso estoy buscando una solución de JavaScript.

Answer 1

Creo que lo que buscas es esto -> http://codepen.io/justincavery/full/KsjHa

Lo que estoy haciendo aquí es usar jquery para verificar el recuento de la cantidad de caracteres dentro del div de contenido.

var $div = $( ''#blah'' );
if($div.text().length >= 600) {
$div.addClass(''columns'');
}

Si el número de caracteres es igual o mayor que 600, entonces agrega la clase de ''columnas'' al div que lo contiene.

Para que quede claro, esto significa que cualquier artículo de menos de 600 caracteres no tendrá aplicada la clase "columna" y cualquier cosa que tenga más o igual a 600 caracteres no lo hará.

Ahora que tenemos el DOM ordenado, en el CSS (tenga en cuenta que este codepen tiene algunos estilos que no se relacionan con esta respuesta, por lo que debe usar solo como una guía).

La próxima etapa es agregar las columnas para el contenido que es más largo que los 600 caracteres, pero aún debemos asegurarnos de que en anchos más pequeños solo tengamos una sola columna, de lo contrario, solo se vería peculiar.

@media screen and (min-width:48em) {
/* 48.000em /*(ackkkkkk, device specific bad)768px*/
.columns {
-webkit-column-count: 2; /* Saf3, Chrome*/
-webkit-column-gap: 4%; /* Saf3, Chrome*/
-moz-column-count: 2; /* FF3.5+ */
-moz-column-gap: 4%; /* FF3.5+ */
column-count: 2; /* Opera 11+*/
column-gap: 4%; /* Opera 11+*/
}
}

Aquí he elegido 48ems y superior (retrato de ipad y arriba) como el punto en el que se definen las columnas, lo que permite que las pantallas más pequeñas sean una sola columna.

Uno de los problemas que recogí más adelante fue que si el texto era demasiado largo, querías que estuviera en una sola columna nuevamente. En este caso, deberá eliminar la clase para obtener un valor más alto, o poner una marca para ver si el recuento de caracteres se encuentra entre los dos valores.

También puede observar que comencé a buscar en una consulta de medios verticales que establece el fondo en rosa y el contenido en dos columnas, pero no iba a lograr lo que estaba buscando.

Unos pocos puntos para este tipo de técnica que la pregunta está mirando.

1. En realidad, no me di cuenta por la imagen que eran dos secciones separadas hasta que leí la pregunta por tercera vez. La mayoría de la gente supondría que el contenido de la columna izquierda continuaba en la parte inferior de la página antes de pasar a la columna de la derecha (periódicos y revistas). Necesitarías algún tipo de descanso entre cada sección para mostrar esto.
2. Esto es algo de diseño, así que supongo que se usaría principalmente para páginas de aterrizaje / instrucción en las que desearía dedicar más tiempo al diseño del contenido. Con eso en mente, debe adaptarlo agregando las clases manualmente.
3. Finalmente, la web no está impresa y las personas encuentran que leer cosas en una sola página, comprueban qué bonito es leer " The Great Discontent "

EDITAR

Después de actualizar la pregunta, creo que la implementación que está buscando se realiza en este excelente trabajo: http://kaikkonendesign.fi/typesetting-responsive-css3-columns/

Answer 2

Puedes hacer esto solo con CSS:

.box {
-o-text-overflow: ellipsis; /* Opera */
text-overflow: ellipsis; /* IE, Safari (WebKit) */
overflow:hidden; /* don''t show excess chars */
white-space:nowrap; /* force single line */
width: 300px; /* fixed width */
}

Espero que esto haya ayudado.