Problema con contenido multicolumna y PRINT

noruas · #1 (**permalink**) 29/04/2013, 10:12

Hola.

Tengo una página web que crea contenido dinámicamente, en concreto largos textos. Estoy usando la maquetación en múltiples columnas con las especificaciones css3 para el caso.

El problema es que también quiero imprimir estas páginas y a la hora de la impresión no queda bien.

En la vista de navegador todo queda perfecto, el texto se agrupa en columnas según la cantidad de texto que se genere, pero cuando le doy a imprimir, si necesita mas de un folio, el segundo folio se agrupa también en columnas, pero en el mismo número que en la primera página, de forma que solo se rellena de texto a lo ancho en vez de llenar primero cada columna a lo alto...

Creo que la explicación no queda demasiado clara así que os pongo el código para que veais bien lo que digo.

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            .multicolumna {
                text-align: justify;
 
                -moz-column-gap: 15px;
                -moz-column-rule: none;
                -moz-column-width: 15em;
                
                -webkit-column-rule: none;
                -webkit-column-gap: 15px;
                -webkit-column-width: 15em;
            }
        </style>
    </head>
    <body>
        <div class="multicolumna">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eleifend ipsum eget sapien vulputate accumsan. Proin pellentesque justo nec sem fermentum et bibendum libero mattis. Integer feugiat volutpat sapien, quis rhoncus augue vehicula a. Curabitur auctor tempus accumsan. In sodales elementum lectus, non sollicitudin lectus blandit viverra. Suspendisse potenti. Duis sed nulla felis, sed tincidunt massa. Maecenas vestibulum, eros id semper condimentum, turpis elit vulputate tellus, sit amet porta sem nibh eget mauris.
 
Vestibulum auctor convallis ipsum et vehicula. Suspendisse et sem diam, ac pharetra mauris. Mauris volutpat placerat sapien, non volutpat dolor blandit at. Donec et tellus nibh. Suspendisse commodo augue vitae mi bibendum dapibus. Etiam purus tortor, ornare ut porttitor et, tincidunt eu nunc. Vestibulum aliquam ipsum id sem tempus tincidunt. Vivamus accumsan dui quis ipsum semper ornare. Donec elementum pellentesque risus ut viverra. Pellentesque ut purus dui, at sagittis mi. Sed cursus lorem et lorem vehicula fringilla. Nulla iaculis lectus ac eros malesuada in elementum nisl consequat. Vestibulum ut augue orci. Vivamus sed nisi vel tortor consequat accumsan sit amet id velit.
 
Sed euismod gravida risus, sit amet interdum lectus pulvinar id. Sed dignissim tempus congue. Phasellus ut ligula nisi. Aliquam erat volutpat. Vestibulum eget velit dui. In sit amet metus scelerisque mauris ultricies dignissim vitae et nisi. Vestibulum mi purus, auctor vel luctus sit amet, facilisis luctus arcu. Pellentesque dapibus viverra ullamcorper. Phasellus et augue vitae ligula porttitor lobortis ornare in mauris. Morbi vitae arcu ac massa blandit imperdiet vel vel purus. Maecenas sit amet erat lacinia mauris accumsan interdum.
 
Aliquam accumsan tortor in ipsum consequat in ornare nulla tempor. Suspendisse nec quam metus, at convallis libero. Aliquam varius, quam nec porta cursus, nibh quam mollis arcu, nec tempor neque magna at nisi. Cras interdum massa quis leo rutrum at sodales erat dignissim. Morbi sodales commodo turpis non luctus. Donec vel quam a lacus fringilla dapibus a eu lectus. Suspendisse est neque, consectetur vel aliquam vel, ultrices in diam. Morbi ornare, justo non feugiat varius, sem augue porta enim, auctor commodo felis felis fermentum sem.
 
Aenean tincidunt porta odio nec sollicitudin. Curabitur porttitor, dui ut aliquet viverra, nibh justo accumsan velit, et molestie leo nibh non augue. Aliquam erat volutpat. Proin velit tortor, tempor quis bibendum vel, viverra at lacus. Proin non quam id turpis commodo hendrerit vel id massa. Donec vehicula ante a dui pharetra sit amet sagittis diam tristique. Donec erat est, scelerisque eu adipiscing et, ornare ut lorem. Morbi quam orci, facilisis quis sagittis non, fermentum vitae ante. Ut ultricies lectus at lacus porta sit amet posuere lorem tristique. Cras vestibulum odio vitae justo sollicitudin feugiat. Fusce vel magna neque. Phasellus eu velit a urna aliquet commodo eu in ante. Nulla sit amet elit sit amet ipsum condimentum hendrerit. Praesent malesuada euismod urna in tempor.
 
Cras condimentum felis sit amet neque pulvinar dictum. Curabitur nec dui non nulla fermentum laoreet. Phasellus egestas sem ut arcu porta vehicula. Suspendisse potenti. In vel laoreet urna. Fusce eu sapien ac purus commodo vehicula. Maecenas non malesuada enim.
 
Nullam cursus blandit suscipit. Fusce pellentesque justo vel velit ornare commodo. Praesent eget dui turpis, sed blandit justo. Suspendisse augue mauris, viverra id ultrices nec, luctus eget arcu. Phasellus accumsan libero id dolor sollicitudin pharetra. Maecenas vehicula bibendum ipsum vitae scelerisque. Morbi in dignissim lorem. Etiam quam lorem, fringilla vel tincidunt in, viverra ac nibh. Sed quis mattis risus.
 
Suspendisse tortor nulla, malesuada vitae fermentum eu, rutrum vitae arcu. Suspendisse suscipit congue massa, in scelerisque ante sodales vestibulum. Suspendisse id dignissim purus. Nunc sodales felis a eros consequat iaculis. Nulla pretium, metus vel convallis venenatis, nisi erat varius lacus, ac dignissim diam odio ac nulla. Sed vestibulum varius imperdiet. Fusce ut tellus quis mi auctor commodo non et lectus. Curabitur elit nisi, vestibulum non suscipit vestibulum, mollis quis quam. Donec mollis congue iaculis. Nunc felis nibh, molestie ut sodales eget, iaculis sed eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam quis mauris diam, eget convallis mauris. Quisque ac lectus vel urna laoreet mollis eu quis massa. Phasellus interdum, nisl quis laoreet venenatis, arcu orci iaculis lectus, ut rutrum dui ligula a enim. Sed nec neque neque, at dignissim magna. Integer sit amet hendrerit nisl.
 
Etiam lectus enim, euismod non fermentum vel, rutrum sit amet turpis. Pellentesque eget orci dui, vel blandit tellus. Morbi tincidunt nibh eu leo rutrum vehicula. Praesent non erat velit. In hac habitasse platea dictumst. Nulla pretium ante sit amet libero sollicitudin in euismod eros malesuada. Praesent a tempus metus. Morbi hendrerit enim quis metus lobortis non interdum magna dictum. Sed at ante vitae ante fringilla porttitor eu eget augue. Vivamus mattis sodales turpis eget sagittis. Nulla pretium, tellus ut faucibus malesuada, libero nibh mattis dolor, et imperdiet nibh dolor sed augue. Praesent nec metus sit amet lacus adipiscing egestas.
 
Nulla aliquet vulputate ante non dapibus. Etiam mollis, enim id tincidunt sagittis, ipsum enim lacinia augue, ac dapibus risus augue in libero. In posuere felis quis enim pharetra accumsan. Morbi augue justo, volutpat ut rutrum eget, blandit ac nibh. Fusce pellentesque massa accumsan nisi porttitor imperdiet pulvinar turpis congue. Ut vulputate tortor id ligula aliquet non consectetur erat auctor. Donec cursus ipsum nec elit lacinia egestas eget a urna. Pellentesque erat ipsum, feugiat nec vestibulum sed, rutrum eu dolor. Sed ut luctus nulla.
 
Proin molestie, elit nec ullamcorper rutrum, est nulla facilisis eros, id ornare augue nulla ut diam. In eget ullamcorper felis. Aliquam bibendum ipsum nec dolor porta lobortis. Ut porttitor nunc sit amet est ultrices molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec consectetur sagittis imperdiet. Fusce blandit justo sit amet felis porta fermentum. Quisque cursus faucibus eleifend. Nullam eu mi eu purus rutrum ornare.
 
Sed viverra elit lacinia mi luctus sed facilisis magna tristique. Donec nibh nunc, fringilla sed egestas eget, gravida id nisi. Nullam at ligula eleifend tellus consequat auctor vel sed mi. Sed sed ultrices justo. Donec vel est felis, non porttitor ipsum. Quisque placerat odio vel lacus eleifend et mollis ligula lacinia. Curabitur condimentum suscipit nibh, eu interdum risus porttitor elementum. Aliquam at velit leo. Duis ullamcorper egestas mauris, sit amet ultricies leo rhoncus aliquam. Fusce adipiscing consequat ligula, ac consequat mauris luctus nec.
 
Pellentesque in sapien vel nisl molestie fringilla at ut velit. Pellentesque pharetra sagittis augue vitae eleifend. Quisque tempus sodales molestie. Fusce congue ante et turpis iaculis quis pellentesque odio vehicula. Nunc felis metus, bibendum vel vestibulum id, pretium vitae quam. Proin luctus odio id erat dictum ullamcorper. Morbi scelerisque, ligula nec fermentum congue, felis ligula viverra arcu, a pretium odio nisi at arcu. Maecenas nibh neque, pulvinar ac lobortis vitae, commodo in turpis. Donec nec quam sed tortor ultricies luctus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam malesuada tellus porttitor ipsum aliquet venenatis. Mauris egestas venenatis nisl, et volutpat magna fringilla vel. Proin a est elit. Pellentesque convallis metus in nunc tristique non pellentesque ipsum ultricies.
        </div>
    </body>
</html>

Si abrís eso en el navegador todo correcto, pero si le dais a previsualizar para impresión y os vais a la última página vereis lo que digo.

¿Habría alguna forma de que se rompiera el flujo de las columnas en el salto de pagina?

Hay propiedades de css que permiten el salto de página, pero no se si habría alguna forma de que esto ocurriera "por arte de mágia" al detectar que ha habido un salto...