Modificați fluxul de documente în ruperea paginii pentru a umple spațiul

Când se imprimă (sau, în general, se afișează documentul pe suportul paginat), este posibilă refolosirea elementelor documentului, astfel încât atunci când un element (de exemplu imaginea) este mutat în pagina următoare deoarece nu se încadrează în spațiul disponibil pe pagina efectivă, elementele ce urmează vor fi mutate în spațiul rămas al paginii reale?

Încerc să obțin un efect similar cu (sau la fel) Floaturile LaTeX , dar folosind doar CSS.

Pentru ao ilustra, să spunem că avem această situație:

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

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

Folosind câteva CSS-uri de bază (consultați această întrebare ), nu este nici o problemă realizarea acestui lucru:

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

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

Dar dacă am nevoie de ceva este așa:

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

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

Deci, în principiu, vreau doar să umple tot spațiul rămas care a rămas pe pagina actuală cu elemente care urmează image A (desigur, numai dacă se încadrează în ea).

Fac unele cercetări CSS3 și vreau să văd dacă editorii de birou pot fi complet înlocuiți cu stilul CSS, deci nu am nevoie de soluția care să fie încă acceptată (de ex. Implementată în unele browsere în acest moment). Tot ce vreau să știu este dacă este acoperit în orice modul sau construct CSS (chiar dacă este doar un proiect de lucru), așa că pot presupune că browserele o vor sprijini în viitor.

Am căutat deja acest lucru

  • CSS3 Paged Media,
  • CSS3 Regions and
  • CSS3 Generated Content for Paged Media

nu am gasit nimic, dar totusi exista o sansa ca pur si simplu am trecut cu vederea ceva (sau nu am inteles deloc), asa ca dupa doua zile de googling presupun ca este timpul sa intre aici :-)


EDITAȚI | ×: just to make it clear, once again: Nu am nevoie ca soluția să fie acceptată în orice browser acum, I need to kacum if there's a standard or specification that allows this (and if yes, how).
0
Ei bine, nu am făcut - butoanele de generare cu CSS nu sunt posibile, pentru imaginile pe care le puteți utiliza proprietate imagine-imagine , dar asta nu este ceea ce doriți în mod normal. De fapt, presupun HTML5 ca format de document de bază și aplicând CSS pe acesta, încercând să obțin tot ce este posibil în editorii Office.
adăugat autor FurloSK, sursa
Ați făcut toate butoanele în CSS? Sau imagini?
adăugat autor Brendan, sursa

1 răspunsuri

Aceasta este o înjunghiere totală în întuneric, dar poate cel puțin să vă poziționeze în direcția cea bună ...

Combinând pagina (n) pseudo-element selector , proprietăți float/float-modifier și, eventual, selectorii părinte CSS4 pot oferi un fel de soluție.

Iată câteva exemple de comportament:

/* 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 */
}

Acest lucru afirmă, în principiu, că dacă imaginea - într-adevăr o împachetează pe oa doua pagină, trebuie să se aplice un flotor, trimițându-l în partea de sus a paginii următoare. În funcție de modul în care browserele aleg să facă acest lucru, puteți obține rezultatul pe care îl căutați (Sperăm):

  1. Înfășurarea în a doua pagină este detectată
  2. Proprietatea break-before-before obligă proprietatea float să se aplice întregului element (sau selectorul părinte face treaba)
  3. Proprietățile float și margin îndepărtează elementul din fluxul de documente și permit altui conținut să-și ia spațiul

Știu că aceasta este o adevărată întindere și nu va funcționa, dar poate că va declanșa o linie de gândire care vă permite să veniți cu o soluție mai solidă :)

0
adăugat
Idei grozave, vă mulțumesc! Am văzut selectorul de pagină (n) în documentul respectiv, dar nu m-am gândit niciodată că este util în acest fel.
adăugat autor FurloSK, sursa