DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die CSS-Eigenschaft quotes ermöglicht es Ihnen, anzugeben, welche Arten von Anführungszeichen verwendet werden, wenn Anführungszeichen über die Regeln content: open-quote; oder content: close-quote; hinzugefügt werden. Hier erfahren Sie, wie Sie sie verwenden.
q {
quotes: "“" "”" "‘" "’";
}
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}Im obigen Beispiel wurden vier Werte hinzugefügt. Ein Satz doppelte intelligente Anführungszeichen und ein Paar einfache intelligente Anführungszeichen. Es ist etwas verwirrend, da jedes Anführungszeichen in Anführungszeichen eingeschlossen ist – aber das sind nur programmatische Anführungszeichen (können doppelt („) oder einfach (‘) sein), wie überall sonst in CSS. Die Anführungszeichen darin sind das, was auf der Seite verwendet wird.
Es gibt vier Werte für die content-Eigenschaft, die sich auf die quotes-Eigenschaft beziehen: open-quote, close-quote, no-open-quote und no-close-quote.
Das erste Paar Anführungszeichen im Wert sind die öffnenden und schließenden Anführungszeichen. Das zweite Paar sind die öffnenden und schließenden Anführungszeichen für Anführungszeichen, die *eine Ebene tiefer* in andere Anführungszeichen verschachtelt sind, die ebenfalls die quotes-Eigenschaft verwenden. Z. B. ein <q>-Element innerhalb eines <q>-Elements.
Ein paar Beispiele
Doppelte Anführungszeichen beim ersten Zitat,
einfache Anführungszeichen beim zweiten.
Ein Zitat mit französischen Anführungszeichen.
Sie können beliebig viele Anführungszeichenpaare in der quotes-Eigenschaft platzieren. Aber Sie müssen nicht mehr als zwei angeben, denn für jedes zusätzliche Anführungszeichen werden einfach die quotes-Werte von Anfang an wiederholt.
Die Werte no-open-quote und no-close-quote verhindern die Anzeige der Anführungszeichen, aber sie erhöhen weiterhin die Zitat-Tiefe.
Weitere Informationen
- Verwenden Sie das
<q>-Element nicht, es sei denn, Sie zitieren jemanden. In allen anderen Fällen (Ironie, Sarkasmus oder was auch immer Sie für Anführungszeichen verwenden) verwenden Sie einfach die Anführungszeichen selbst (wie diese: „ “). - Dies gilt nicht nur für das
<q>-Element, sondern kann auch<blockquote>oder etwas anderes sein. - Zitate & Akzente
Verwandte Eigenschaften
Weitere Ressourcen
Browser-Unterstützung
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 11+ | Alle | 1.5+ | 4+ | 8+ | Alle | Alle |
Nicht mein Zitat, aber ich habe es übernommen.
„Großartiges Design wird die Menschen dazu bringen, Ihr Produkt/Unternehmen zu lieben“
danke aus Peru :D!
Auf mehrsprachigen Websites können wir das
lang-Attribut auf demhtml-Tag verwenden, anstatt einer Klasse für Zitate hinzuzufügen. SoNach viel Recherche, einschließlich der Betrachtung vieler Online-Versionen von Zeitungen auf Nutzung und Konsistenz, stellte ich fest, dass, obwohl die offiziellen Stilrichtlinien für Länder die Zitatzeichen festlegen, die Nutzung innerhalb eines Landes so stark variiert, dass der Versuch, die Zitatzeichen der Sprache für allgemeine Zwecke zuzuordnen, zu Frustrationen führen könnte.
Zum Beispiel scheinen in Frankreich die Guillemets nur in traditionellen Zeitungen verwendet zu werden, aber die meisten im Rest des Landes verwendeten einwärts gerichtete oder einfache doppelte Anführungszeichen, wie in den USA. Dasselbe gilt für Spanien. Und so ist es fast überall sonst, außer in Nordkorea!
Es scheint ein weiteres Beispiel für den Einfluss des Webs auf nationale Kulturen zu sein, wobei Online-Autoren wahrscheinlich stärker von der enormen US-amerikanischen Online-Präsenz als von ihren eigenen Printmedien beeinflusst werden. Ich weiß, dass einige gerne die „richtige“ Schreibweise in ihren Ländern verwenden würden, aber solche Dinge sind heutzutage viel fließender, da das, was „normal“ ist, einen größeren Abweichungsbereich hat als früher!
Es läuft darauf hinaus, zu wissen, was die eigenen Leser gewohnt sind. Wenn sie keine Guillemets erwarten, kann die Bereitstellung falscher Anführungszeichen den Eindruck erwecken, wie „hip“ man ist.
Für die Werkzeuge, die ich erstelle, werde ich die 19 Hauptvarianten von zweistufigen Zitatzeichenkombinationen zur Auswahl anbieten, zusammen mit der Sprache.
Leider habe ich gerade erfahren, dass Chrome keine Anführungszeichen mag, die mit dem CSS-Quotes-Attribut angegeben werden, also muss ich sehen, ob es eine Problemumgehung gibt.
Zumindest kann das html-dir=rtl-Attribut aus Sprachen abgeleitet werden, die mit ‚ar‘, ‚dv‘, ‚fa‘, ‚he‘, ‚ps‘, ‚ur‘ oder ‚yi‘ beginnen. Leider muss das über eine PHP-Funktion und nicht über CSS erfolgen. :(
In den meisten Fällen ist es besser, die Pseudo-Klasse
:lang()zu verwenden, vgl. http://www.w3.org/International/questions/qa-css-langWelches Anführungszeichen auf einer mehrsprachigen Seite gerendert werden soll, hängt nicht von der Sprache der gesamten Seite ab, sondern von der Sprache des Textes, der das Zitat umgibt, vgl. https://lists.w3.org/Archives/Public/www-international/2011JulSep/0069.html Verwenden Sie
:lang(fr) > q.In der französischen Typografie gibt es Leerzeichen zwischen dem öffnenden und schließenden Anführungszeichen, d.h.
quotes: "«\A0" "\A0 »";@ Patanjali
Ja, das liegt daran, dass Guillemets auf einer Tastatur nicht leicht zu erreichen sind. Und die lustige Geschichte ist, dass die vorherige französische Regierung tatsächlich eine Standardisierungsorganisation beauftragt hat, ein Tastaturlayout zu entwerfen, auf dem sie (sowie akzentuierte Zeichen) vorhanden wären.
Das Ärgerlichste ist definitiv die Spezifikation, die für französische Standardwerte einfach falsch ist.
Sie schlägt „«“ „»“ „«“ „»“ als Standard vor, aber das ist einfach falsch.
Zuerst benötigen Sie ein nicht-brechendes (dünnes) Leerzeichen nach dem öffnenden und vor dem schließenden Anführungszeichen. Dann sollten verschachtelte Zitate geschwungene Anführungszeichen sein, da verschachtelte Guillemets einen Text unleserlich machen.
Französische Leser haben überhaupt keine Probleme mit Guillemets. Sie gewöhnen sich daran, sobald sie zu lesen beginnen (es wird überall verwendet, außer auf John Does Computer, weil es eine wahnsinnig komplizierte Windows-Kombination erfordert, um auf Guillemets zuzugreifen).
Tatsächlich werden gerade Anführungszeichen in bestimmten Kontexten als amateurhaft, typografisch falsch und, was noch wichtiger ist, als respektlos gegenüber der französischen Sprache/Kultur angesehen.
Ich habe festgestellt, dass ich diese doppelten Anführungszeichen in der ‚quotes‘-Eigenschaft mit einem Backslash escapen musste, damit sie funktionieren.
Verwendet Chrome 28.0.1500.71 auf Mac OS X.
Das liegt daran, dass Sie (fälschlicherweise) gerade Anführungszeichen anstelle von typografischen Anführungszeichen verwenden (siehe https://en.wikipedia.org/wiki/Quotation_mark).
Ich war auf einer Website mit einem Online-CSS-Kompressor gestoßen, der eine Sequenz wie „{quotes:’\201C’ ‚\201D’ ‚\2018‘ ‚\2019’;}“ in „{quotes:201C201D20182019;}“ umwandelte, obwohl ich es für Lesbarkeit bei „{quotes:201C 201D 2018 2019;}“ belassen habe. Es funktionierte in den meisten Browsern, außer in Desktop- und mobilen Chrome-Versionen.
Nachdem ich Ihren Beitrag gelesen hatte, habe ich ihn zurückgeändert und Chrome funktioniert wieder!
DANKE!
Mit Chrome ist es nicht so einfach.
Bei anderen Browsern (IE, Samsung, iOS) führt das Anwenden eines Stils, der die Anführungszeichen für das Body-Element und absteigende Elemente definiert, zu den erwarteten Ergebnissen, nämlich
a) Die Regeln für die Definition des Body-Elements, es sei denn, ein absteigendes Element hat ebenfalls eine, unabhängig vom lang-Attribut.
b) Wenn ein q-Element einen Stil für Anführungszeichen hat, erhält nur ein eingebettetes q-Element den neuen Stil, während das übergeordnete Element seine vorangegangenen Anführungszeichen behält, unabhängig von lang-Attributen auf einem der Elemente.
Leider beachtet Chrome die Stile nur, WENN keine lang-Attribute auf einem Element vorhanden sind. Sobald das lang-Attribut auf ein Element angewendet wird, gelten die „offiziell“ für das lang-Attribut anwendbaren Anführungszeichen für seine absteigenden q-Elemente, ABER auch für es selbst, wenn es ein q ist. Das ruiniert alles.
Es wäre in Ordnung, wenn
a) Alle Browser es so machen würden.
b) Jeder die „offiziellen“ Anführungszeichen für eine Sprache verwenden würde.
c) Chrome es auf das Body-Element anwenden würde.
Das lang-Attribut wird semantisch verwendet, vielleicht für Sprachwerkzeuge (Rechtschreibung, Grammatik), da es nicht tatsächlich für das Layout von Text in die erforderliche Richtung benötigt wird, aber das entsprechende dir-Attribut, das direkt von lang abgeleitet werden kann (durch die Verwendung einer benutzerdefinierten PHP-Funktion), IST erforderlich, um die entsprechende Ausrichtung anderer Elemente, wie Tabellen und Feldsätze, sicherzustellen.
Nun entwerfe ich Werkzeuge für HTML-Laien und möchte vermeiden, dass Benutzer sich mit solchen Problemen auseinandersetzen müssen. Ich gehe davon aus, dass die meisten nicht mehrere Sprachen auf derselben Seite verwenden werden, aber ich möchte, dass die Dinge „orthogonal“ (konsistent und regelmäßig) angewendet werden, so dass die Angabe der Sprache für ein semantisches Element, wie einen Abschnitt, dazu führt, dass dessen Inhalt entsprechend angeordnet wird, aber dass sie die Anführungszeichenkombination wählen können, die für ihre Zielgruppe geeignet ist.
Mit diesem Chrome-Problem muss ich mich für eines von Folgendem entscheiden:
a) Chrome-Benutzer damit leben lassen. Das heißt, möglicherweise seltsame Anführungszeichen für q-Elemente mit einem lang-Attribut oder innerhalb sprachspezifischer Blöcke in Kauf nehmen.
b) Seitenautoren (die „Laien“) das dir-Attribut explizit angeben lassen, aber das lang-Attribut weglassen.
c) Seitenautoren überall explizite Anführungszeichen setzen lassen.
Ich tendiere zu a), denn für
a) Tritt dies nur auf, wenn verschachtelte Zitate in einer anderen Sprache erforderlich sind. Ich erwarte nicht, dass meine Benutzer fortgeschrittene Benutzer mehrerer Sprachen auf derselben Seite sind. Natürlich müssten sie auf einem q-Element der ersten Ebene keine Quote-Klasse verwenden, obwohl das semantisch nicht korrekt ist.
b) Ich ziehe es vor, dass die Richtung explizit mit der Sprachnutzung verbunden ist, was der
Hauptgrund für die Verwendung ist. Meine Zielbenutzer würden sie aus keinem anderen Grund verwenden.
c) Ich möchte vermeiden, dass Benutzer zu viele Mikroentscheidungen treffen müssen.
Irgendwelche Kommentare?
Tatsächlich machte die korrekte Definition meiner Anführungszeichen in CSS sie unabhängig vom lang-Attribut, obwohl dies bedeutet, dass eine der Klassen auf JEDEM Element verwendet werden MUSS, auf dem ein lang-Attribut verwendet wird.
Meine Stile (Verwendung nach Belieben) sind
/ANFÜHRUNGSZEICHEN/
body{quotes:'\201C' '\201D' '\2018' '\2019';}/“”‘’STANDARD/
.Q_SuiDui * {quotes:'\2018' '\2019' '\201C' '\201D';}/‘’“”/
.Q_DuiSui * {quotes:'\201C' '\201D' '\2018' '\2019';}/“”‘’/
.Q_DS * {quotes:'\22' '\22' '\27' '\27';}/""''/
.Q_DsS * {quotes:'\301D' '\301E' '\27' '\27';}/〝〞''/
.Q_GdoGso * {quotes:'\AB' '\BB' '\2039' '\203A';}/«»‹›/
.Q_GdoDui * {quotes:'\AB' '\BB' '\201C' '\201D';}/«»“”/
.Q_GdoDol * {quotes:'\AB' '\BB' '\201E' '\201D';}/«»„”/
.Q_NK * {quotes:'\300A' '\300B' '\3008' '\3009';}/《》〈〉/
.Q_CJK * {quotes:'\300C' '\300D' '\300E' '\300F';}/「」『』/
.Q_DooSoo * {quotes:'\201E' '\201C' '\201A' '\2018';}/„“‚‘/
.Q_DolSui * {quotes:'\201E' '\201D' '\2018' '\2019';}/„”‘’/
.Q_DolSul * {quotes:'\201E' '\201D' '\2019' '\2019';}/„”’’/
.Q_DolGdo * {quotes:'\201E' '\201D' '\AB' '\BB';}/„”«»/
.Q_DolSuo * {quotes:'\201E' '\201D' '\2019' '\2018';}/„”’‘/
.Q_DolGdi * {quotes:'\201E' '\201D' '\BB' '\AB';}/„”»«/
.Q_GdiGsi * {quotes:'\BB' '\AB' '\203A' '\2039';}/»«›‹/
.Q_DulSul * {quotes:'\201D' '\201D' '\2019' '\2019';}/””’’/
.Q_Ja * {quotes:'\3010' '\3011' '\3016' '\3017';}/【】〖〗/
Es gibt eine Methode in meinen Klassennamen. Zum Beispiel DolGdo = Doppelte gegenläufige linke Guillemot-Doppelaußen.
Hallo Chris, du hast vergessen, das
<cite>-Tag zu erwähnen, das sich auch auf Zitate bezieht.nein, weil das -Tag nicht mehr für Zitate verwendet wird (html4). In HTML5 definiert es den Titel eines Werkes.
@Aurélien
Wahr, aber in einigen Ländern werden die Anführungszeichen dafür verwendet, sodass CSS wie folgt eingestellt werden kann: „cite:before{content:open-quote;} cite:after{content:close-quote;}“.
@Gunnar Bittersmann
Wie ich bereits geschrieben habe, ist die Zuordnung von Anführungszeichen zu einer Sprache möglicherweise nicht angemessen, da die online meist verwendeten Anführungszeichen, und daher das, was die Leute dort im Allgemeinen erwarten, meist eine Variante des in den USA verwendeten ” … ‘ … ‘ … ” sind.
Nun könnte man diese einfach für ein Land verwenden, aber ihre Verwendung ist nicht konsistent, und einige Autoren möchten Leser ansprechen, die die offiziellen Länderzitate erwarten, wie das einzige, das ich in Frankreich gefunden habe.
Hallo,
Im SCSS-Code verwende ich „\201D“, aber nach dem Grunt-Build wird es zu „\201D“. Ich bin mir nicht sicher warum. Kann mir jemand helfen?
Danke
Prateek
Hallo,
Im SCSS-Code verwende ich „\201D“, aber nach dem Grunt-Build wird es zu „\\201D“. Ich bin mir nicht sicher warum. Kann mir jemand helfen?
Danke
Prateek
Wenn Sie daran interessiert sind, was Online-Nachrichten-Websites in den Ländern, die Sie interessieren, für Zitate verwenden, gehen Sie zu: http://www.enewsreference.com/country_news.shtml
Diese Seite listet nach Land auf, wobei jeder Link zu einer Liste aller Publikationen führt, wobei jede angibt, ob sie online ist mit ‚IN‘ und in welchen Sprachen sie verfügbar ist.
In Bezug auf Frankreich sind die meisten Online-Sites auf Englisch, und von denen auf Französisch verwenden etwa die Hälfte US-Zitate. Zeiten, die ändern sich!
Sehr gut, wenn Sie deutsche Anführungszeichen brauchen!
https://jsfiddle.net/bloggerschmidt/hnaw4p2j/
Ich verstehe nicht, warum die Pseudo-Elemente before und after benötigt werden. Wenn dieser gesamte Codeblock entfernt wird, scheint die einzelne Codezeile (die den q-Selektor und die quotes-Eigenschaft enthält) immer noch zu funktionieren. Was übersehe ich?!