Kurs HTML - style (drukowanie)







SPIS TREŚCI


Przełamanie strony  - 
Blokada przełamania strony  - 
Linijki  - 
Media


Drukowanie




PRZEŁAMANIE STRONY
(obsługuje IE4, Netscape oraz Opera 3.5 lub nowsze)

Przed elementem:
SELEKTOR { page-break-before: wartość }
Po elemencie:
SELEKTOR { page-break-after: wartość }


SELEKTOREM może być znacznik HTML
wyświetlany w bloku
[zobacz: Wstawianie stylów].
Natomiast jako "wartość" należy podać:

always - przełamanie zawsze
auto - brak ograniczeń
left - następna strona formatowana jako lewa
right - następna strona formatowana jako prawa
avoid - unikanie przełamania (nie interpretuje IE4)



Wartości left, right, avoid nie są interpretowane jednoznacznie przez
Internet Explorer. Natomiast działa poprawnie polecenie always.



Polecenie to wymusza na drukarce natychmiastowe przełamanie strony, czyli zakończenie drukowania
na danym arkuszu papieru i przejście do następnego.
Pierwsze z nich czyni to przed wybranym elementem (wybranym przez SELEKTOR),
a sam element znajdzie się już na nowej kartce.
Natomiast drugie polecenie przełamuje stronę po elemncie, a sam element
zostaje na poprzedniej kartce.


Polecenie takie jest przydatne, jeśli strona składa się z rozdziałów, których
tytuły są wpisane np. w znacznikach H1.
Możemy wtedy np. w zewnętrznym arkuszu stylów
umieścić deklarację:

H1 { page-break-before: always }

lub z podaniem klasy:

H1.tytul { page-break-before: always }

Dzięki temu każdy rozdział rozpocznie się na nowej stronie, co sprawi, że treść
będzie wyglądała bardziej estetycznie. Takie rozwiązanie nie jest jednak zbyt odpowiednie,
jeśli strona zawiera bardzo krótkie rozdziały, ponieważ wtedy wydruk będzie składał się
z większej ilości stron, które nie będą całkowicie zapełnione (właściciel drukarki
może nie być tym zachwycony :-)
Innym przydatnym zastosowaniem page-break-after: avoid
może być zablokowanie przełamania strony po tytułach rozdziałów. Kto to widział, żeby tytuł
znajdował się na końcu poprzedniej strony, a sama treść rozdziału na początku następnej?
Niestety jeśli wydrukujesz ten kurs, najprawdopodobniej tak właśnie może się zdarzyć,
ponieważ np. IE nie interpretuje wartości "avoid" :-(

Przykład:
Jeśli to wydrukujesz, to w tym miejscu powinna zostać przełamana strona...
... a tutaj rozpocznie się następna strona (ponieważ ten
paragraf zawiera polecenie: page-break-before: always, zostanie on przeniesiony na nową stronę).
Natomiast ten paragraf zawiera polecenie: page-break-after: always.
Dlatego jeśli to wydrukujesz, to w tym miejscu powinna zostać przełamana strona
(paragraf zostanie na poprzedniej stronie)...
... a tutaj rozpocznie się następna strona.


Uwaga: aby zobaczyć efekt, nie musisz drukować tej strony - wystarczy włączyć podgląd
wydruku (menu Plik).




BLOKADA PRZEŁAMANIA STRONY
(nie obsługuje IE4)
SELEKTOR { page-break-inside: wartość }

SELEKTOREM może być znacznik HTML
wyświetlany w bloku
[zobacz: Wstawianie stylów].
Natomiast jako "wartość" należy podać:

avoid - unikanie przełamania
auto - brak ograniczeń




Polecenie page-break-inside: avoid powoduje, że strona nie zostanie
przełamana wewnątrz wskazanego elementu, tzn. pozostanie on w całości na jednej stronie
(chyba, że będzie zbyt duży, aby się na niej zmieścić).
Jest to przydatne, jeśli nie chcemy, aby np. wykaz został przedzielony pomiędzy
dwie strony. W takim przypadku lepiej żeby drukarka przełamała stronę trochę wcześniej,
a element zostanie przeniesiony na następną kartkę.




LINIJKI
(obsługuje Opera, ale nie IE4)

Na górze strony:
SELEKTOR { widows: liczba }
Na dole strony:
SELEKTOR { orphans: liczba }


SELEKTOREM może być znacznik HTML
wyświetlany w bloku
[zobacz: Wstawianie stylów].
Natomiast jako "liczba" należy podać minimalną ilość linijek paragrafu,
które muszą znaleźć się odpowiednio: na górze lub na dole strony.



Powyższe polecenia nie blokują przełamania strony ani go nie wywołują.
Mogą być jednak przydatne ze względów estetycznych.
Na przykład przeniesienie ostatniej linijki długiego paragrafu na następną
stronę, może nie wyglądać zbyt dobrze. Jeśli już przełamanie musi nastąpić wewnątrz
bloku, znacznie lepiej byłoby przenieść na następną stronę więcej niż jedną linijkę.
Za pomocą widows: liczba możemy określić, że
na początku strony powinny wystąpić przynajmniej np. 4 linijki. Wtedy co najmniej
cztery ostatnie wiersze zostaną przeniesione na następną stronę (a nie jeden, dwa lub trzy).
Podobnie orphans: 4 wymusi w takim przypadku, pozostawienie
przynajmniej czterech pierwszych linijek paragrafu na poprzedniej stronie.


Działanie to może wydawać się podobne do przełamania strony,
jednak podstawowa różnica polega na tym,
że powyższe polecenia nie wymuszają przełamania strony, a jedynie określają co zrobić
w przypadku, gdy taka konieczność już wystąpi wewnątrz paragrafu. Jeżeli cały tekst
zmieści się na jednej stronie, nie zobaczymy żadnego ich działania.




MEDIA
(obsługuje IE)

Jest oczywiste, że dokument wydrukowany na drukarce, wygląda inaczej niż na ekranie monitora (w przeglądarce
internetowej). Podczas drukowania zwykle pomijane są wszystkie parametry, które dotyczą tła (trudno sobie wyobrazić
wydrukowanie strony z czarnym tłem :-). Z uwagi na odrębność różnych mediów, wprowadzono
możliwość definiowania oddzielnych własności dla różnych form prezentacji dokumentu.


Na przykład rozmiar czcionki można
ustalić zarówno dla ekranu, jak i dla drukarki, lecz dokumenty na komputerze potrzebują zwykle
większej czcionki niż na papierze. Podobnie doświadczenie wskazuje, że czcionki
z rodziny sans-serif są czytelniejsze na ekranie, podczas gdy serif - na papierze.
Z tych powodów konieczne jest określenie, że dany arkusz stylów
lub jego część jest przyporządkowana do pewnego z mediów. Oznacza to, że można sprawić,
aby ta sama strona, po wydrukowaniu, wyglądała zupełnie inaczej niż na ekranie monitora.
Możemy np. chcieć, aby cały tekst został napisany kolorem czarnym, zmniejszyć jego wielkość,
a nawet usunąć wyświetlanie obrazków czy menu nawigacyjnego
(po co komu menu na papierze?) itd.


Istnieją dwie drogi do określenia niezależności arkuszy stylów,
a przez to przypisania różnym mediom odmiennych cech:


Wydzielenie dla wydruku części istniejącego arkusza:

/* Domyślny arkusz dla wszystkich mediów */
/* (tu znajdują się ogólne deklaracje) */

@media print
{
/* Arkusz dla wydruku */
}



Dołączenie specjalnie dla wydruku zewnętrznego arkusza:

<HEAD>
<LINK REL="Stylesheet" HREF="domyslny.css" TYPE="text/css">
<LINK REL="Stylesheet" HREF="wydruk.css" TYPE="text/css" MEDIA="print">
</HEAD>




[zobacz także rozdział pt.: Media].



UWAGA! W IE6 kolejność wpisywania poleceń ma znaczenie, tzn. najpierw należy określić arkusz
domyślny (deklaracje w istniejącym arkuszu lub dołączenie zewnętrznego),
a dopiero na końcu ustalamy własności dla wydruku.


Aby zobaczyć efekt, nie musisz za każdym razem drukować strony - wystarczy włączyć podgląd
wydruku (menu Plik).

Przykład:

Ta strona powinna wyglądać inaczej na wydruku. Aby to sprawdzić włącz podgląd wydruku (menu Plik).