2012-05-28 12 views
15

Podczas drukowania (lub, ogólnie, wyświetlania dokumentu na nośnikach stronicowanych), możliwe jest ponowne wypełnienie elementów dokumentu tak, że gdy jakiś element (np. Obraz) zostanie przesunięty na następną stronę, ponieważ nie mieści się w dostępnym miejscu na aktualnej stronie, elementy po nim zostaną przeniesione do pozostałej przestrzeni rzeczywistej strony?Zmiana przepływu dokumentu na podział strony na wypełnienie przestrzeni

Próbuję osiągnąć efekt podobny do (lub tego samego) co LaTeX Floats, ale przy użyciu tylko CSS.

Aby zilustrować to, powiedzmy, że mamy taką sytuację:

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

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

Korzystanie podstawowe CSS (patrz this question), to nie ma problemu osiągnięcia tego celu:

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

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

Ale Whan naprawdę potrzebne jest coś takiego:

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

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

Tak więc, po prostu chcę tylko wypełnić l pozostałe miejsce, które pozostało na aktualnej stronie z elementami po image A (oczywiście, tylko jeśli pasują do niego).

Wykonuję niektóre badania CSS3 i chcę sprawdzić, czy edytory Office można w pełni zastąpić stylami CSS, więc nie potrzebuję rozwiązania, które będzie jeszcze obsługiwane (np. Zaimplementowane w niektórych przeglądarkach w tym momencie). Chcę tylko wiedzieć, czy jest on objęty jakimkolwiek modułem CSS lub konstruktem (nawet jeśli jest to tylko wersja robocza), więc mogę założyć, że przeglądarki będą go obsługiwać w przyszłości.

już szukał tego w

  • CSS3 Paged Mediów,
  • CSS3 Regiony i
  • CSS3 Generated Content dla Paged Mediów

specyfikacji i nic nie znalazłem, ale wciąż jest chan ce ja po prostu pomijane coś (lub nie rozumie go w ogóle), więc po dwóch dniach Googling Przypuszczam, że nadszedł czas, aby zapytać tutaj :-)


EDIT: tak, aby było jasne, raz ponownie: Nie potrzebuję rozwiązania, aby było obsługiwane w dowolnej przeglądarce teraz, muszę wiedzieć, czy istnieje standard lub specyfikacja, która pozwala to (a jeśli tak, jak).

+0

Czy wykonałeś wszystkie przyciski w CSS? Lub obrazy? – Brendan

+0

Cóż, nie zrobiłem - generowanie przycisków za pomocą CSS nie jest możliwe, ponieważ obrazy można użyć [właściwość background-image] (http://www.w3.org/TR/CSS21/colors.html#background-properties), ale to nie jest to, czego zwykle chcesz. W rzeczywistości zakładam HTML5 jako podstawowy format dokumentu i stosuję na nim CSS, starając się osiągnąć wszystko, co jest możliwe w edytorach Office. – FurloSK

Odpowiedz

4

Jest to całkowita stab w ciemności, ale może przynajmniej cię we właściwym kierunku ...

Łącząc selektor page(n) pseudo-element właściwości float/float-modifier i ewentualnie CSS4 parent selectors może dostarczyć jakieś rozwiązanie.

Oto kilka zachowań przykład:

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

To w zasadzie mówi, że jeśli obraz-a faktycznie okłady na drugiej stronie, że pływak powinien być stosowany do niego, wysyłając go do góry następny strona.W zależności od sposobu przeglądarek wybrać, aby uczynić to, można uzyskać wynik, którego szukasz (mam nadzieję):

  1. owijania w drugą stronę jest wykrywany
  2. Nieruchomość page-break-before zmusza właściwość float zastosowanie do całych elementów (lub selektor rodzic nie jest to zadanie)
  3. w float i margin właściwości bierze element z obiegiem dokumentów i innych treści pozwalają wziąć to przestrzeń

Wiem, że to naprawdę działa i nie zadziała, ale być może spowoduje to linię myślenia, która pozwoli ci wymyślić bardziej trwałe rozwiązanie :)

+0

Świetne pomysły, dziękuję! Widziałem selektor strony (n) w tym dokumencie, ale nigdy nie myślałem o jego użyteczności w ten sposób. – FurloSK