pagina - learn javascript

Columnas de periódicos HTML

Question

Intento crear columnas de estilo de periódico usando un bloque de texto. Me gustaría que el texto se distribuya uniformemente en 2 columnas que podrían reaccionar al cambio de longitud en el texto.

¿Es posible usar solo HTML / CSS, si no se puede usar javascript?

Gracias

Answer 1

Aquí hay una función de JavaScript simple (no compatible con CSS) que hará esto:

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>'';
}

Coloque su texto en un elemento regular en alguna parte, y llame a Newspaperize (yourelement) cuando se cargue la página.

Nota: esta función solo divide el texto por la mitad. Para que realmente funcione correctamente, querrá encontrar un espacio o guión más cercano al punto medio y dividir el texto allí.

Answer 2

CSS3 le permitirá hacer esto con su soporte multicolumna , pero por el momento, probablemente no pueda confiar en muchos navegadores para admitirlo, por lo que probablemente deba confiar en un método alternativo.

Answer 3

Como han dicho otros, no es algo posible con CSS / XHTML vainilla (al menos) hasta que no seamos ampliamente distribuidos por CSS3 :-)

Sin embargo, usando mi sombrero de experiencia de usuario, me interesaría su caso de uso para querer esto en una página web (suponiendo que se trata de una página web normal a la que apunta). A diferencia de la división de impresiones, un bloque de texto sobre dos columnas puede dificultar la lectura. Si es más larga que una pantalla, el usuario tiene que desplazarse hacia arriba y hacia abajo para escanear / leer todo.

Por lo tanto, incluso si puede hacerlo con algunos pirateo JS, sería mejor crear un diseño alternativo que no lo necesite.

Answer 4

Dos notas:

• Lo que funciona para un medio impreso no es bueno para un medio de visualización. Tener que desplazarme hacia arriba para seguir leyendo no me parece una buena idea. Después de todo, las páginas web no están limitadas en longitud ...
• No puedes hacer eso con CSS2. Creo que CSS3 tiene soporte para eso (no estoy seguro), dudo que sea compatible con la mayoría de los navegadores.

Así que supongo que JS es tu mejor opción, pero no funcionará para usuarios con JS deshabilitado, por supuesto.

Answer 5

El IHT tiene una buena implementación de un formato de 3 columnas. Sin embargo, parece ser el lado del servidor calculado, supongo al contar palabras.

Answer 6

Estoy de acuerdo con PhiLho. Si aún quieres probarlo, el código js que divide tu contenido en dos columnas es bastante simple si las columnas tienen anchos fijos. Lo difícil es decidir dónde dividir el contenido. Probablemente no quiera dividirse en medio de una palabra, etc.

Podría intentar con la siguiente situación: agregue dos columnas a su página. Coloque su texto en la primera columna (esto permite que los navegadores que no sean js aún puedan mostrar su contenido). Obtenga el texto con js (por ejemplo, desde el evento onload). Encuentra el siguiente índice de "." (o si tiene párrafos "</ p>") comenzando desde el medio. Use ese índice para dividir el texto y coloque la primera parte en la primera columna y así sucesivamente ...

Answer 7

Logré hacer algo como esto, pero de nuevo, no en CSS, usé PHP para contar palabras y dividir el texto. Lamentablemente, contar palabras es una manera bastante mala de hacerlo, ya que algunas palabras son más largas que otras y las columnas no coinciden. Mi diseño fue inspirado por el sitio web de IHT. No es muy difícil de implementar en PHP.

Answer 8

Si decides hacer esto, ya es posible en Mozilla y WebKit (y Prince ) con solo CSS:

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

Answer 9

Así que estaba buscando una respuesta para esta pregunta, lamentablemente al principio no encontré ninguna, ahora lo hice 3 horas después.

Encontré una lib de JavaScript que usa los atributos css3 (si lo entendí bien, solo intenté hacerlo funcionar y lo hizo, va a leer en el js más adelante)

lib encontrado aquí: http://www.csscripting.com/wiki/index.php?title=CSS3_Multi_Column

La única desventaja es que el texto que desea tener con múltiples columnas TIENE que estar entre dos etiquetas (prefiero usar la etiqueta <p> , ya que también admite varias etiquetas <p> ).

lo probé en ff 3.6, es decir, 8, opera 10.51 y Chrome 4.1. No estoy en posición de probar navegadores antiguos, así que recomiendo que alguien lo haga pronto; P

¡aclamaciones!

Answer 10

Está en la especificación CSS3, y Moz / Webkit ya lo tiene implementado con prefijos de proveedor. Use las propiedades de 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;
}

Tenga en cuenta que, por supuesto, estos no son compatibles con ninguna versión de IE que alguien use. CanIUse.com afirma que IE 10 lo soportará como parte de CSS3 .

Answer 11

CSS3 proporciona una forma de convertir el contenido de cualquier nodo HTML en cualquier cantidad de columnas. Hay propiedades para controlar el número de columnas, así como su ancho, altura relativa ("relleno" o cómo se divide el contenido en las columnas existentes), canal entre columnas, "regla" (línea divisoria o borde), etc.

Como punto de partida, consulte la página de referencia de w3schools.com CSS3 Columnas múltiples .

Sin embargo, como es habitual, IE solo entre navegadores ampliamente utilizados no admite las propiedades column-CSS3.

Una solución de navegador cruzado es el plugin Columnizer jQuery .