CSS-aanhalingstekens: de quotes-property, q en opgemaakte blockquotes
Gids voor CSS-aanhalingstekens
CSS-property quotes: q, open-quote en aanhalingstekens per taal
Zo werken de CSS-property quotes, het q-element en open-quote / close-quote, met een live taalkiezer, geneste aanhalingsniveaus en opgemaakte blockquote-patronen.
De CSS-property quotes bepaalt welke aanhalingstekens een browser tekent voor het q-element en voor content: open-quote en close-quote. quotes: auto kiest tekens die passen bij het lang-attribuut, een lijst met paren strings stelt per nestingniveau uw eigen tekens in, en quotes: none verwijdert ze. Een blockquote krijgt geen tekens, tenzij u ze toevoegt.
Waarden van quotes
Waarde
Effect
Tekens die passen bij de taal van het element (ingesteld met lang)
open-quote en close-quote tekenen niets
Eén paar, gebruikt op elk nestingniveau
Buitenste paar, daarna binnenste paar voor geneste citaten
Aanhalingstekens zijn een typografisch detail dat de meeste sites verkeerd doen: rechte aanhalingstekens die in templates zijn getypt, de verkeerde tekens voor Frans of Duits, of een decoratief blockquote-teken dat schermlezers hardop voorlezen. Hier ziet u de quotes-property live in verschillende talen, samen met nette patronen voor uitgelichte citaten en testimonials.
Kies een taal in de kiezer. Het voorbeeld gebruikt quotes: auto, dus uw browser kiest de tekens op basis van lang.
Schakel over naar eigen tekens en typ uw eigen buitenste en binnenste paar om de nesting te zien werken.
Kopieer de gegenereerde quotes-regel.
Gebruik de blockquote-patronen hieronder voor testimonials en uitgelichte citaten.
Zet lang op het html-element, en op elke passage in een andere taal, zodat automatische aanhalingstekens bij de tekst passen.
Gebruik het q-element voor korte citaten in de tekst, en blockquote voor langere passages die een eigen blok vormen.
Gaat de nesting dieper dan uw lijst met paren, dan wordt het laatste paar opnieuw gebruikt.
Gebruik no-open-quote en no-close-quote om nestingniveaus in balans te houden zonder een teken te tekenen, bijvoorbeeld over meerdere alinea's.
Veelgestelde vragen
Hoe verwijder ik de aanhalingstekens van een q-element?
Zet q { quotes: none; }. De tekens komen uit de standaard ::before- en ::after-content van de browser, namelijk open-quote en close-quote, en none zorgt dat die niets tekenen terwijl de betekenis van het element behouden blijft.
Waarom toont blockquote geen aanhalingstekens?
Browsers voegen alleen bij q automatisch tekens toe. Een blockquote springt standaard in, maar heeft geen tekens. Voeg blockquote::before { content: open-quote; } en een bijpassende ::after toe, of een decoratief teken, als uw ontwerp er een wil.
Hoe gebruik ik gekrulde aanhalingstekens in CSS?
Schrijf de tekens direct in een UTF-8-stylesheet, quotes: "“" "”" "‘" "’";, of als escapes zoals "\201C" en "\201D". Escapes zijn handig als een editor of buildstap niet-ASCII-tekens verminkt.
Lezen schermlezers aanhalingstekens uit CSS voor?
Gegenereerde content kan door hulptechnologie worden voorgelezen, dus behandel tekens als tekst. Een enorm decoratief teken kunt u beter tekenen met een achtergrondafbeelding, een SVG met aria-hidden, of content met lege alternatieve tekst: content: "“" / "";.
Hoe nestingniveaus werken
Elke open-quote verhoogt de nestingdiepte met één en elke close-quote verlaagt hem. Diepte nul gebruikt het eerste paar in quotes, diepte één het tweede, enzovoort. Daarom schakelt een q binnen een q in het Engels automatisch van dubbele naar enkele tekens.
Omdat de diepte over het hele document wordt bijgehouden, laat een open-quote zonder tegenhanger elk volgend citaat één niveau te diep staan. Koppel ze zorgvuldig in pseudo-elementen, of gebruik de no-varianten om de diepte ongemerkt aan te passen.
Rechte tegenover typografische aanhalingstekens
De " en ' van het toetsenbord zijn typemachinetekens. Gedrukte tekst gebruikt gekrulde tekens die naar het citaat wijzen: “ en ” voor dubbele, ‘ en ’ voor enkele. Tekens genereren met CSS houdt ze consistent, ook als redacteuren rechte tekens typen.
Andere talen gebruiken andere vormen en posities: guillemets « » in het Frans, laag-hoog „ “ in het Duits, hoekhaken 「 」 in het Japans. quotes: auto met de juiste lang regelt dit voor q zonder CSS per taal.
Aanhalingstekens en hun CSS-escapes
Veelgebruikte aanhalingstekens met Unicode-codepunten
Teken
Naam
CSS-escape
Dubbel aanhalingsteken links en rechts
Enkel aanhalingsteken links en rechts
Dubbele hoekige aanhalingstekens (guillemets)
\AB \BB
Enkele hoekige aanhalingstekens
Dubbel laag-9-aanhalingsteken
Hoekhaken
Eigen tekens voor geneste citaten
Twee niveaus met escapes
De buitenste q gebruikt dubbele tekens, de q daarbinnen gebruikt enkele tekens. De escapes leveren gekrulde aanhalingstekens op.
Patronen voor opgemaakte blockquotes
Uitgelicht citaat met een decoratief teken en een bijschrift
Het grote teken gebruikt lege alternatieve tekst, zodat het niet wordt voorgelezen. figure en figcaption koppelen het citaat aan de bron. Browsers zonder de syntaxis voor alternatieve tekst slaan die regel over en tekenen geen teken.
Blockquote die echte openings- en sluitingstekens tekent
open-quote en close-quote doen mee aan de nesting, dus een q binnen deze blockquote krijgt de binnenste tekens.