Cudzysłowy w CSS: właściwość quotes, q i ostylowane blockquote
Przewodnik po cudzysłowach w CSS
Właściwość CSS quotes: q, open-quote i cudzysłowy w różnych językach
Jak działają właściwość CSS quotes, element q oraz open-quote / close-quote, z przełącznikiem języków na żywo, zagnieżdżonymi poziomami cudzysłowów i ostylowanymi wzorcami blockquote.
Właściwość CSS quotes określa, jakie cudzysłowy przeglądarka rysuje dla elementu q oraz dla content: open-quote i close-quote. quotes: auto dobiera znaki pasujące do atrybutu lang, lista par ciągów ustawia Twoje własne znaki dla każdego poziomu zagnieżdżenia, a quotes: none je usuwa. Element blockquote nie dostaje cudzysłowów, dopóki ich nie dodasz.
Wartości quotes
Wartość
Efekt
Znaki pasujące do języka elementu (ustawionego przez lang)
open-quote i close-quote niczego nie rysują
Jedna para, używana na każdym poziomie zagnieżdżenia
Para zewnętrzna, a potem wewnętrzna dla zagnieżdżonych cytatów
Cudzysłowy to typograficzny szczegół, który większość stron robi źle: proste cudzysłowy wpisane w szablony, niewłaściwe znaki dla francuskiego lub niemieckiego albo ozdobny znak w blockquote odczytywany na głos przez czytniki ekranu. Tutaj właściwość quotes jest pokazana na żywo w kilku językach, razem z czystymi wzorcami dla wyróżnionych cytatów i opinii klientów.
Wybierz język w przełączniku. Przykład używa quotes: auto, więc Twoja przeglądarka dobiera znaki na podstawie lang.
Przełącz na własne znaki i wpisz swoją parę zewnętrzną i wewnętrzną, aby zobaczyć, jak działa zagnieżdżanie.
Skopiuj wygenerowaną regułę quotes.
Używaj wzorców blockquote poniżej do opinii klientów i wyróżnionych cytatów.
Ustaw lang na elemencie html oraz na każdym fragmencie w innym języku, aby automatyczne cudzysłowy pasowały do tekstu.
Używaj elementu q dla krótkich cytatów w tekście, a blockquote dla dłuższych fragmentów tworzących osobny blok.
Gdy zagnieżdżenie jest głębsze niż Twoja lista par, ponownie używana jest ostatnia para.
Używaj no-open-quote i no-close-quote, aby zachować równowagę poziomów zagnieżdżenia bez rysowania znaku, na przykład między akapitami.
Najczęściej zadawane pytania
Jak usunąć cudzysłowy z elementu q?
Ustaw q { quotes: none; }. Znaki pochodzą z domyślnej treści ::before i ::after przeglądarki, czyli open-quote i close-quote, a none sprawia, że niczego nie rysują, przy zachowaniu znaczenia elementu.
Dlaczego blockquote nie pokazuje cudzysłowów?
Przeglądarki automatycznie dodają znaki tylko dla q. Blockquote ma domyślnie wcięcie, ale nie ma cudzysłowów. Jeśli Twój projekt ich wymaga, dodaj blockquote::before { content: open-quote; } i pasujące ::after albo ozdobny znak.
Jak używać cudzysłowów drukarskich w CSS?
Wpisz znaki bezpośrednio w arkuszu stylów UTF-8, quotes: "“" "”" "‘" "’";, albo jako sekwencje ucieczki, takie jak "\201C" i "\201D". Sekwencje ucieczki przydają się, gdy edytor lub krok budowania psuje znaki spoza ASCII.
Czy czytniki ekranu odczytują cudzysłowy z CSS?
Treść generowana może być ogłaszana przez technologie asystujące, więc traktuj znaki jak tekst. Duży ozdobny znak lepiej narysować obrazem tła, SVG z aria-hidden albo przez content z pustym tekstem alternatywnym: content: "“" / "";.
Jak działają poziomy zagnieżdżenia
Każde open-quote zwiększa głębokość zagnieżdżenia o jeden, a każde close-quote ją zmniejsza. Głębokość zero używa pierwszej pary z quotes, głębokość jeden drugiej i tak dalej. Dlatego q wewnątrz q w języku angielskim automatycznie przechodzi z podwójnych znaków na pojedyncze.
Ponieważ głębokość jest śledzona w całym dokumencie, niezrównoważone open-quote sprawia, że każdy późniejszy cytat jest o jeden poziom za głęboko. Starannie łącz je w pary w pseudoelementach albo używaj wariantów no-, aby po cichu korygować głębokość.
Cudzysłowy proste a typograficzne
Znaki " i ' z klawiatury to znaki maszynowe. Tekst drukowany używa zaokrąglonych znaków skierowanych w stronę cytatu: “ i ” dla podwójnych, ‘ i ’ dla pojedynczych. Generowanie znaków w CSS utrzymuje ich spójność, nawet gdy redaktorzy treści wpisują proste.
Inne języki używają innych kształtów i położeń: cudzysłowów ostrokątnych « » we francuskim, dolnego i górnego „ “ w niemieckim, nawiasów narożnych 「 」 w japońskim. quotes: auto z właściwym lang obsługuje to dla q bez osobnego CSS dla każdego języka.
Znaki cudzysłowu i ich sekwencje ucieczki CSS
Popularne cudzysłowy z punktami kodowymi Unicode
Znak
Nazwa
Sekwencja ucieczki CSS
Lewy i prawy cudzysłów podwójny
Lewy i prawy cudzysłów pojedynczy
Podwójne cudzysłowy ostrokątne (francuskie)
\AB \BB
Pojedyncze cudzysłowy ostrokątne
Podwójny cudzysłów dolny (low-9)
Nawiasy narożne
Własne znaki dla zagnieżdżonych cytatów
Dwa poziomy z sekwencjami ucieczki
Zewnętrzne q używa podwójnych znaków, a q wewnątrz niego pojedynczych. Sekwencje ucieczki dają cudzysłowy drukarskie.
Wzorce ostylowanych blockquote
Wyróżniony cytat z ozdobnym znakiem i podpisem
Duży znak ma pusty tekst alternatywny, więc nie jest odczytywany na głos. figure i figcaption wiążą cytat z jego źródłem. Przeglądarki bez obsługi składni tekstu alternatywnego pomijają tę regułę i nie rysują znaku.
Blockquote rysujący prawdziwe znaki otwarcia i zamknięcia
open-quote i close-quote biorą udział w zagnieżdżaniu, więc q wewnątrz tego blockquote dostaje znaki wewnętrzne.