Wcięcia akapitowe
Model Wieży Eiffla w Parc Mini-France
Teraz coś prostego: wcięcia pierwszej linii każdego akapitu. Wiele osób uważa, że wcięcia akapitowe są łatwiejsze do czytania niż odstępy międzyakapitowe (stosowane m.in. w języku angielskim, co przyczyniło się także do domyślnego podziału tekstu dla HTML-a i tagu <P>), szczególnie w dłuższych tekstach. Dodatkowo pozwalają one zarezerwować puste linie dla istotniejszych przerw.
Sztuczka polega na tym, że robimy wcięcie tylko dla akapitów, które następują po innych akapitach. Pierwszy akapit nie musi posiadać wcięcia, nie potrzebuje go także akapit, który występuje zaraz za wykresem, nagłówkiem bądź jakimkolwiek innym elementem, który jest oddzielony od tekstu. Kod jest bardzo prosty:
p {
margin-bottom: 0
}
p + p {
text-indent: 1.5em;
margin-top: 0
}
W ten sposób otrzymamy wcięcia wyłącznie dla akapitów, które występują po jakimś innym akapicie. Ukryte są także górne marginesy wszystkich akapitów oraz dolne marginesy wszystkich akapitów z wcięciami. W praktyce okaże się jednak, że istnieją pewne wyjątki.
Dla przykładu, na tej stronie znajdują się elementy P, które są
użyte do opisu obrazków (zobacz także przykłady z artykułu “Figury i opisy”). Zostały one wyśrodkowane,
ponieważ nie powinny posiadać wcięć. Zadbała o to prosta reguła:
'p.caption {text-indent: 0}'. (W kodzie źródłowym
tej strony możesz sprawdzić, że powyższa regułą faktycznie została
użyta.)
Możemy teraz używać różnych przerw między akapitami,
aby wskazać ważne przerwy w tekście. Zdefiniujmy trzy różne klasy:
mot (mały odstęp tematyczny), sot
(średni odstęp tematyczny) oraz dot (duży odstęp
tematyczny). Ten akapit jest klasy mot, więc łatwo
sprawdzić efekt.
p.mot { text-indent: 0; margin-top: 0.83em }
p.sot { text-indent: 0; margin-top: 2.17em }
p.dot { text-indent: 0; margin-top: 3.08em }
