Przejdź do treści

Selektory pseudoelementów

Cudzysłowy

(interpretuje Internet Explorer 8.0, Firefox, Opera)

W języku (X)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:

  1. 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 (X)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.

  2. 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> ;-)


Wybrane znaki cudzysłowów używane w różnych językach
ZnakKodNazwa
""\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ę ;-)

albo (rzadziej spotykane):
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").

Komentarze

Zobacz więcej komentarzy