Przypisy dolne

Przypis dolny polega w wiekszości wypadków na umieszczeniu liczby, litery albo gwiazdki przy wyrazie, zdaniu, aby wyjaśnić jego znaczenie, rozszerzyć przekazywaną informację albo odeslać do źródeł. No ale ja nie jestem od składania książek, ja tu tylko sprzątam ;), więc zostawiam użycie przypisu woli użytkowników.

Na pierwszy ogień idzie cyferka. Będzie ona linkiem do przypisu pod tekstem. Powinna być wyżej niż resta tekstu, pomniejszona. Znakomicie nam do tego pasuje znacznik <sup/>. Ja jednak zachęcam do użycia innego sposobu. Bo widzicie, co innego książka, co innego ekran monitorka i mysz. Trudno wcelować w malutki znak - link.

O wiele lepiej zmniejszyć rozmiar tekstu (font-size: 0.6em) dla takiego hiperłącza, zmienić jego położenie w pionie i dodać dopełnienie. Położenie w pionie zmieniamy za pomocą właściwości vertical-align. Ja używam wartości top, sup powoduje na niektórych przeglądarkach dziwne przerwy w interlinii (line-height). Dlatego, nie użyłem <sup/>, bo dopełnienie (padding: 0 0.3em 0.5em 0.5em) powoduje, że taki link bardzo łatwo kliknąć; porównywalnie łatwo z każdym innym.

Nie trzeba mówić, że można też zwiększyć dostępność, ustawiając kolor tła po nakierowaniu myszą (background-color: #FF0). Oczywiście można także inaczej to rozwiązać kolorystycznie i stylowo, mi chodziło jedynie o wytłumaczenie nieużycia znacznika <sup/>, mimo że z wyłączonymi stylami znacznik indeksu górnego wygląda nadal dobrze.

No dobrze, teraz dochodzimy do samych przypisów. Ja postawiłem na listę uporządkowaną. Zaletami jest automatyczne numerowanie, jeśli ktoś reflektuje takie rozwiązanie (o tym za chwilę) oraz nie trzeba wstawiać <br/>. Stylami da się wyzerować marginesy oraz nadać indywidualny charakter - wszystko zależy od kreatywności piszącego.

Przed przypisami często widzi się linię poziomą oddzielającą tekst od przypisów. Jest zwykle 30% długa. Można to rozwiązać nieładnie - przez obrazek o odpowiedniej długości ustawiony jako tło <ol/> (background: url(spacer.gif) left top no-repeat). No albo użyć znacznika linii poziomej <hr/>, o którym wszyscy zapomnieli, myśląc że to już nie jest XHTML-owe. ;) Styl dla takiej linii poziomej wyglądałby tak:

1. hr {
2. border: none;
3. border-top: 1px solid #000;
4. width: 30%;
5. float: left;
6. }

Należałoby także pamiętać, o zablokowaniu opływania przypisów przez tą linię, przez clear: left. Bo text-align tutaj nie działa i trzeba floatować tą linię.

Kolejnym elementem budowania naszych przypisów jest sposób linkowania. Oczywiste jest, żeby korzystać z wygodnych przypisów należałoby je zlinkować ze sobą. To znaczy - po kliknięciu na numerek, jesteśmy przewijani do odpowiedniego przypisu, tam czytamy i klikamy go. Wracamy w ten sposób do miejsca czytania.

Do tego potrzebne są identyfikatory, najlepiej ustawiać je dosyć skomplikowane, żeby była pewność, że nie powtórzą się na stronie. Ja używam albo godziny z datą (tylko kolejna rzecz do pamiętania, to fakt że id="" nie może się rozpoczynać cyfrą) bądź kawałka tekstu przypisu.

Linkiem w przypisach na dole może być cała jego treść, jeśli wykorzystujemy numerowanie z list-style-type listy <ol/>. Może być także nieco bardziej wyszukany sposób - usunięcie markera listy (list-style-type: none) oraz dopisanie własnego, podlinkowanego znowu do fragmentu tekstu. Na przykład: „1) Przypis”, gdzie „1)” będzie linkiem. No jak wolicie, ja bym tylko radził w pierwszym sposobie wykolorować CSS-em hiperłącza-przypisy na standardowo (można wykorzystać color: inherit, jeśli nie zależy nam na IE). Nadmiar niebieskiego może razić. Plus wariant drugi powoduje tylko pojawienie się fokusa (obrysowania kropkowanego) na malusim linku z lewej strony od treści przypisu co nie psuje to tak bardzo widoczności.

Na koniec dodam informację o pseudoklasie :target. Dzięki wykorzystaniu jej w selektorach CSS, możecie zapanować nad wyglądem przypisu, do którego linkujecie. Pogrubić go, dodać kolorowe tło. Tak samo z powrotem - cyferkę można powiększyć, zmienić kontrast, żeby ułatwić wzrokowi „wskoczenie” w odpowiednie miejsce w tekście.

Można obejrzeć jak to mniej więcej wygląda. „Results may vary” no albo jak kto woli „to hell with bad browsers”. ;) Efekt nie powala, owszem, ale to tylko koncept. Zachęcam do modyfikacji wyglądu i ulepszeń semantyki. :)