Cambiar el flujo del documento en salto de página para llenar el espacio

Question

Al imprimir (o, en general, mostrar documentos en el medio paginado), es posible refluir los elementos del documento para que cuando algún elemento (por ejemplo, imagen) se cambie a la página siguiente porque no cabe en el espacio disponible en la página real, los elementos que lo siguen se moverán al espacio restante de la página real?

Estoy tratando de lograr un efecto similar (o igual que) LaTeX Floats, pero usando solo CSS.

Para ilustrarlo, supongamos que tenemos esta situación:

Page 1 | Paragraph A (...) | 
     | Paragraph B (...) | 
     | _________________ | 
     | | Top of image A | | 
     |_|_________________|_| 

     ---- page break ----- 
     _____________________ 
Page 2 | | Rest of image A | | 
     | |_________________| | 
     |      | 
     | Paragraph C (...) | 
     | Paragraph D (...) | 
     |   ...   | 
     |_____________________| 

Usando un poco de CSS básica (ver this question), no hay ningún problema la consecución de este:

Page 1 | Paragraph A (...) | 
     | Paragraph B (...) | 
     |      | 
     |      | 
     |_____________________| 

     ---- page break ----- 
     _____________________ 
Page 2 | _________________ | 
     | | Image A (whole) | | 
     | |     | | 
     | |_________________| | 
     |      | 
     | Paragraph C (...) | 
     | Paragraph D (...) | 
     |   ...   | 
     |_____________________| 

Pero Whan que realmente necesito es algo como esto:

Page 1 | Paragraph A (...) | 
     | Paragraph B (...) | 
     | Paragraph C (...) | 
     | Paragraph D (...) | 
     |_____________________| 

     ---- page break ----- 
     _____________________ 
Page 2 | _________________ | 
     | | Image A (whole) | | 
     | |     | | 
     | |_________________| | 
     |   ...   | 
     |_____________________| 

Así que, básicamente, solo quiero llenar todo l el espacio restante que queda en la página real con los elementos siguientes image A (por supuesto, solo si caben en él).

Estoy haciendo algunas investigaciones de CSS3 y quiero ver si los editores de Office pueden ser reemplazados por estilo CSS, por lo que no necesito que la solución sea compatible (es decir, implementado en algún navegador en este momento). Todo lo que quiero saber es si está cubierto en cualquier módulo o construcción de CSS (incluso si solo está trabajando en borrador), así que puedo suponer que los navegadores lo admitirán en el futuro.

ya he buscado para esto en

• CSS3 medios paginados,
• CSS3 Regiones y
• CSS3 contenido generado para medios paginados

especificaciones y no encontró nada, pero todavía hay un chan ce simplemente he pasado por alto algo (o no lo entendía en absoluto), por lo que después de dos días de buscar en Google supongo que es hora de preguntar aquí :-)

---

EDIT: sólo para que quede claro, una vez nuevamente: No necesito la solución para ser compatible con cualquier navegador ahora, necesito saber si hay un estándar o especificación que lo permita (y en caso afirmativo, cómo).

Answer 1

Ésta es una puñalada total en la oscuridad, pero es posible que al menos se encuentra en la dirección correcta ...

Combinando el selector page(n) pseudo-element, las propiedades float/float-modifier, y posiblemente CSS4 parent selectors puede proporcionar algún tipo de solución.

Éstos son algunos comportamientos un ejemplo:

/* CSS3 GCPM */ 
#image-a::page(2) { 
    page-break-before: auto; 
    float: top next-page; 
    margin-bottom: -320px; /* Assuming the image height is 320px */ 
} 

/* CSS4 Parent Selector */ 
$#image-a ::page(2) { 
    page-break-before: auto; 
    float: top next-page; 
    margin-bottom: -320px; /* Assuming the image height is 320px */ 
} 

Esto, básicamente, establece que si la imagen a una realidad envuelve en una segunda página, que un flotador se debe aplicar a él, enviándolo a la parte superior de la siguiente página.Dependiendo de cómo los navegadores eligen para hacer esto, es posible obtener el resultado que busca (con suerte):

se detecta

1. de envolver en la segunda página
2. La propiedad page-break-before obliga a la propiedad float aplicar a los elementos enteros (o el selector padre no es el trabajo)
3. los float y margin propiedades lleva el elemento de flujo de documentos y permitir que otros contenidos a tomar su espacio

Sé que esto es un tramo real y no funcionará, pero tal vez desencadene una línea de pensamiento que le permita obtener una solución más sólida :)