{"id":14091,"date":"2011-09-05T21:02:00","date_gmt":"2011-09-06T04:02:00","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14091"},"modified":"2020-02-29T06:55:39","modified_gmt":"2020-02-29T13:55:39","slug":"quotes","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/q\/quotes\/","title":{"rendered":"quotes"},"content":{"rendered":"<p>The <code>quotes<\/code> property in CSS allows you to specify which types of quotes are used when quotes are added via the <code>content: open-quote;<\/code> or <code>content: close-quote;<\/code> rules. Here\u2019s how to use it:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">q {\r\n  quotes: \"\u201c\" \"\u201d\" \"\u2018\" \"\u2019\";\r\n}\r\nq::before {\r\n    content: open-quote;\r\n}\r\nq::after {\r\n    content: close-quote;\r\n}<\/code><\/pre>\n<p>In the example above, four values are added. A set of double <a href=\"http:\/\/www.typographyforlawyers.com\/?page_id=1322\" rel=\"noopener\">smart quotes<\/a> and a pair of single smart quotes. It&#8217;s slightly confusing as each quote is wrapped in quotes &#8211; but those are just programmatic quotes (could be double (&#8220;) or single (&#8216;)) as anywhere else in CSS. The quotes inside are what will be used on the page.<\/p>\n<p>There are four values for the <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/c\/content\/\">content<\/a> property that relate to the <code>quotes<\/code> property: <code>open-quote<\/code>, <code>close-quote<\/code>, <code>no-open-quote<\/code>, and <code>no-close-quote<\/code>.<\/p>\n<p>The first <strong>pair<\/strong> of quotes in the value are the opening and closing quotes. The second pair are the opening and closing quotes for quotes <em>nested one level deep<\/em> within other quotes that also use the <code>quotes<\/code> property. E.g. a <code>&lt;q&gt;<\/code> element inside of a <code>&lt;q&gt;<\/code> element.<\/p>\n<figure><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/quotes.png' alt='' data-recalc-dims=\"1\" \/><\/figure>\n<p>A few examples:<\/p>\n<p><q class=\"example-quote\">Double quotes on the first quote, <q class=\"example-quote\">single quotes on the second.<\/q><\/q><\/p>\n<p><q class=\"example-quote french-quote\">A quote with French quotes.<\/q><\/p>\n<p>You can place as many pairs of quotes in the <code>quotes<\/code> property as you like. But you don&#8217;t have to put more than two, because for every extra quote it simply repeats the <code>quotes<\/code> values from the beginning.<\/p>\n<p>The <code>no-open-quote<\/code> and <code>no-close-quote<\/code> values stop the quotes from displaying, but they continue to increment the quote depth. <\/p>\n<h3>More Information<\/h3>\n<ul>\n<li><a href=\"http:\/\/html5doctor.com\/blockquote-q-cite\/#q\" rel=\"noopener\">Don&#8217;t use the <code>&lt;q&gt;<\/code> element unless you&#8217;re quoting someone.<\/a> In all other cases (irony, sarcasm, or whatever else you use quotes for) simply use the quotation marks themselves (like these: \u201c \u201d).<\/li>\n<li>This isn&#8217;t just for the <code>&lt;q&gt;<\/code> element, it could be <code>&lt;blockquote&gt;<\/code> too or anything else. <\/li>\n<li><a href=\"http:\/\/quotesandaccents.com\/\" rel=\"noopener\">Quotes &#038; Accents<\/a><\/li>\n<\/ul>\n<h3>Related Properties<\/h3>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/c\/content\/\"><code>content<\/code><\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/a\/after-and-before\/\"><code>::before<\/code> \/ <code>::after<\/code><\/a><\/li>\n<\/ul>\n<h3>Other Resources<\/h3>\n<ul>\n<li><a href=\"http:\/\/www.w3.org\/TR\/CSS2\/generate.html#quotes\" rel=\"noopener\">CSS2 spec<\/a><\/li>\n<li><a href=\"http:\/\/www.w3.org\/TR\/CSS21\/generate.html\" rel=\"noopener\">CSS2 <code>content<\/code> spec<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/CSS\/quotes\" rel=\"noopener\">MDN<\/a><\/li>\n<li><a href=\"http:\/\/html5doctor.com\/blockquote-q-cite\/#q\" rel=\"noopener\">Semantics of the `q` element, on the HTML Doctor<\/a><\/li>\n<\/ul>\n<h3 id=\"browser-support\">Browser Support<\/h3>\n<table class=\"browser-support-table\">\n<thead>\n<tr>\n<th class=\"chrome\"><span>Chrome<\/span><\/th>\n<th class=\"safari\"><span>Safari<\/span><\/th>\n<th class=\"firefox\"><span>Firefox<\/span><\/th>\n<th class=\"opera\"><span>Opera<\/span><\/th>\n<th class=\"ie\"><span>IE<\/span><\/th>\n<th class=\"android\"><span>Android<\/span><\/th>\n<th class=\"iOS\"><span>iOS<\/span><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td class=\"yep\">11+<\/td>\n<td class=\"yep\">Any<\/td>\n<td class=\"yep\">1.5+<\/td>\n<td class=\"yep\">4+<\/td>\n<td class=\"yep\">8+<\/td>\n<td class=\"yep\">Any<\/td>\n<td class=\"yep\">Any<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"<p>The quotes property in CSS allows you to specify which types of quotes are used when quotes are added via the content: open-quote; or content: close-quote; rules. Here\u2019s how to use it: q { quotes: &#8220;\u201c&#8221; &#8220;\u201d&#8221; &#8220;\u2018&#8221; &#8220;\u2019&#8221;; } q::before { content: open-quote; } q::after { content: close-quote; } In the example above, four [&hellip;]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":13943,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[998],"acf":[],"jetpack-related-posts":[{"id":14220,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/l\/lang\/","url_meta":{"origin":14091,"position":0},"title":":lang()","date":"September 6, 2011","format":false,"excerpt":"The :lang() pseudo class selector in CSS matches elements based on the context of their given language attribute. Language in HTML, is determined by a combination of the lang=\"\" attribute, the element, and by information from the protocol such as the HTTP Accept-Language request-header1 field. Acceptable language-code strings are specified\u2026","rel":"","context":"With 4 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3795,"url":"https:\/\/css-tricks.com\/snippets\/css\/simple-and-nice-blockquote-styling\/","url_meta":{"origin":14091,"position":1},"title":"Simple and Nice Blockquote Styling","date":"September 4, 2009","format":false,"excerpt":"The blockquote displays in standards-compliant browsers with the \"big quotes before\" effect, and in IE with a thick left border and a light grey background. Unlike other blockquote techniques, this style does not require a nested block-level element (like p). As such, it turns a paragraph into an inline-styled element\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4832,"url":"https:\/\/css-tricks.com\/snippets\/php\/generate-csv-from-array\/","url_meta":{"origin":14091,"position":2},"title":"Generate CSV from Array","date":"November 25, 2009","format":false,"excerpt":"function generateCsv($data, $delimiter = ',', $enclosure = '\"') { $handle = fopen('php:\/\/temp', 'r+'); foreach ($data as $line) { fputcsv($handle, $line, $delimiter, $enclosure); } rewind($handle); while (!feof($handle)) { $contents .= fread($handle, 8192); } fclose($handle); return $contents; } Usage $data = array( array(1, 2, 4), array('test string', 'test, literal, comma', 'test literal\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3801,"url":"https:\/\/css-tricks.com\/snippets\/css\/internationalization-language-css\/","url_meta":{"origin":14091,"position":3},"title":"Internationalization Language CSS","date":"September 4, 2009","format":false,"excerpt":"\/*Language-specific*\/ :lang(af){quotes:'\\201E' '\\201D' '\\201A' '\\2019';} :lang(ak){font-family:Lucida,\"DejaVu Sans\",inherit;} :lang(ar){font-family:Tahoma 12,Nazli,KacstOne,\"DejaVu Sans\",inherit;} :lang(bg){quotes:'\\201E' '\\201C' '\\201A' '\\2018';} :lang(bn){font-family:FreeSans,MuktiNarrow,Vrinda,inherit;font-size:1.1em;line-height:1.4em;} :lang(cs){quotes:'\\201E' '\\201C' '\\201A' '\\2018';} :lang(da){quotes:'\\00BB' '\\00AB' '\\203A' '\\2039';} :lang(de){quotes:'\\201E' '\\201C' '\\201A' '\\2018';} :lang(el){font-family:\"DejaVu Sans\",inherit;quotes:'\\00AB' '\\00BB' '\\2039' '\\203A';} :lang(en-GB){quotes:'\\2018' '\\2019' '\\201C' '\\201D';} :lang(es){quotes:'\\00AB' '\\00BB' '\\2039' '\\203A';} :lang(fa){font-family:Terafik,Traffic,Roya,Nazli,Nazanin,sans;font-size:1.5em;} :lang(fi){quotes:'\\201D' '\\201D' '\\2019' '\\2019';} :lang(fr){quotes:'\\ab\\2005' '\\2005\\bb' '\\2039\\2005' '\\2005\\203a';} :lang(hr){quotes:'\\00BB'\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":307236,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/contain\/","url_meta":{"origin":14091,"position":4},"title":"contain","date":"May 8, 2020","format":false,"excerpt":"The contain property in CSS indicates to the browser that the element and its descendants are considered independent of the document tree as much as possible. This potentially provides performance benefits with calculations in layout, style, paint, size, or any combination for a limited area of the DOM and not\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":376818,"url":"https:\/\/css-tricks.com\/glossary-of-terms-for-theme-json\/","url_meta":{"origin":14091,"position":5},"title":"Glossary of Terms for theme.json","date":"January 31, 2023","format":false,"excerpt":"To kick things off, let\u2019s begin by reviewing a few glossary terms that are important for understanding what the theme.json file is, how it is structured, and how to configure it. We\u2019ll cover examples as we go, but the main goal here is to get familiar with terms that we\u2019ll\u2026","rel":"","context":"In \"json\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/guide-wordpress-block-theme-css.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14091"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14091"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14091\/revisions"}],"predecessor-version":[{"id":304487,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14091\/revisions\/304487"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13943"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14091"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14091"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}