CSS / Selektory pseudoelementów
Cudzysłowy {QUOTES}
W jaki sposób kontrolować wygląd cudzysłowów? Jak powinno się wpisywać cytaty zagnieżdżone w języku polskim?
(interpretuje Internet Explorer 8.0, Firefox, Opera)
W języku HTML istnieją specjalne znaczniki, przeznaczone do oznaczania cytatów: <q>...</q> (krótki cytat), <blockquote>...</blockquote> (blok cytowany). Jak mówi specyfikacja HTML 4.01, cytatów wstawianych w elementach q nie należy obejmować cudzysłowami, gdyż powinna zrobić to przeglądarka. Ponadto, ponieważ w różnych językach (mówionych) używa się różnych znaków cudzysłowu, przeglądarki powinny wygenerować takie, które odpowiadają aktualnemu językowi treści. Od języka zależą również znaki cudzysłowów w cytatach zagnieżdżonych, czyli gdy jeden cytat znajduje się wewnątrz innego. Niestety problem w tym, że przeglądarki zwykle sobie z tym nie radzą :-(
Między innymi z tego powodu specyfikacja CSS 2 umożliwia jawne określenie znaków cudzysłowu i to dla wielu języków jednocześnie. Robi się to dwustopniowo:
- Najpierw ustalamy jakie znaki mają być wyświetlone w miejscu automatycznie generowanych cudzysłowów:
q { quotes: '"' '"' "'" "'" }
Pierwsza para odpowiada normalnym cytatom, a druga - cytatom zagnieżdżonym. Można tutaj podać więcej takich par - dla głębszych poziomów zagnieżdżenia. Jeżeli w kodzie HTML wystąpi cytat zagnieżdżony o większą liczbę poziomów niż podano, to zostanie dla niego użyta ostatnia z wymienionych par znaków cudzysłowu.
- Następnie za pomocą pseudoelementów przed... oraz po... wstawiamy wcześniej zadeklarowane znaki cudzysłowu w odpowiednich miejscach cytatu:
q:before { content: open-quote } q:after { content: close-quote }
UWAGA! Nie obsługuje Chrome 4 ani MSIE 7.0! W MSIE 8.0 wszystko jest w porządku, ale tylko w trybie Standards Compliance.
Przykład:
Ferdynand Wspaniały powiedział: <q>Słyszałem, jak Bill G. mówił:
;-)<q>Internet Explorer 7.0 tego nie wyświetli</q>
... i miał rację</q>
Znak | Kod | Nazwa |
---|---|---|
" | "\0022" | Cudzysłów (podwójny znak cudzysłowu ASCII) |
' | "\0027" | Apostrof (pojedynczy znak cudzysłowu ASCII) |
‹ | "\2039" | Pojedynczy lewy cudzysłów ostrokątny |
› | "\203A" | Pojedynczy prawy cudzysłów ostrokątny |
« | "\00AB" | Podwójny lewy cudzysłów ostrokątny |
» | "\00BB" | Podwójny prawy cudzysłów ostrokątny |
‘ | "\2018" | Lewy pojedynczy cudzysłów (górne "6") |
’ | "\2019" | Prawy pojedynczy cudzysłów (górne "9") |
“ | "\201C" | Lewy podwójny cudzysłów (górne "66") |
” | "\201D" | Prawy podwójny cudzysłów (górne "99") |
„ | "\201E" | Podwójny dolny cudzysłów (dolne "99") |
‚ | "\201A" | Pojedynczy dolny cudzysłów (dolne "9") |
Źródło: Cascading Style Sheets, Level 2
Cytaty w języku polskim można oznaczać następująco:
q:lang(pl) { quotes: "\201E" "\201D" "\00BB" "\00AB" } q:before { content: open-quote } q:after { content: close-quote }
To jest akapit w języku polskim (pl). Ferdynand Wspaniały powiedział: Słyszałem, jak Bill G. mówił:
;-)Internet Explorer 7.0 tego nie wyświetli
... i miał rację
q:lang(pl) { quotes: "\201E" "\201D" "\201A" "\2019" } q:before { content: open-quote } q:after { content: close-quote }
To jest akapit w języku polskim (pl). Ferdynand Wspaniały powiedział: Słyszałem, jak Bill G. mówił:
;-)Internet Explorer 7.0 tego nie wyświetli
... i miał rację
Ponadto istnieją dwie dodatkowe wartości, które można przypisać do własności content zamiast open-quote i close-quote. Są to: no-open-quote i no-close-quote. Różnią się one w działaniu tym, że normalnie zwiekszają/zmniejszają poziom zagnieżdżenia cytatów, jednak nic nie wyświetlają. Czasami może to być przydatne w przypadku bloków cytowanych, gdzie zdarza się konieczność postawienia na początku każdego akapitu w takim bloku znaku otwarcia cudzysłowu, ale zamknięcie tylko po ostatnim z nich:
blockquote p { quotes: "\201E" "\201D" } blockquote p:before { content: open-quote } blockquote p:after { content: no-close-quote } blockquote p.last:after { content: close-quote }
To jest pierwszy akapit cytatu blokowego...
To jest drugi akapit cytatu blokowego...
To jest ostatni akapit cytatu blokowego (posiada przypisaną klasę class="last").