27
Nov
A good quote does wonders for an article; so how can CSS help?
I recently realised what I always assumed was simple is made incredibly complex by the myriad of implementations user agents have for CSS quoting.
According to CSS2, adding quote marks to any blockquote automatically, should be pain free. The spec handles it in such a way as to be entirely language independent - negating hard coded quote marks and allowing simple style sheet changes.
It would appear there’s nothing really simple about it at all however. So, standing on the shoulders of giants I did some searching and found a great explanation, and functioning code on David’s Kitchen.
I would heartily advise your read the full article to understand what’s happening but for those impatient developer’s out there, as we all are - click read more for an easy to drop in code sample.
/* STANDARD QUOTES */
q { quotes: "\201C" "\201D" "\2018" "\2019"; }
q:lang(sv) { quotes: '\201D' '\201D' '\2019' '\2019'; }
q:lang(da) { quotes: '\00BB' '\00AB' '\203A' '\2039'; }
q:before { content: open-quote; }
q:after { content: close-quote; }
/* SAFARI SUPPORT */
q:before { content: '\201C'; }
q:after { content: '\201D'; }
q q:before { content: '\2018'; }
q q:after { content: '\2019'; }
/* BLOCKQUOTES */
blockquote * { quotes: none; }
blockquote > *:before { content: '\201C'; }
blockquote > *:after { content: '\201D'; }
blockquote q:before { content: '\2018'; }
blockquote q:after { content: '\2019'; }
/* LANGUAGE-SPECIFIC QUOTES SAFARI STYLE */
*[lang~='da'] q:before, q[lang~='da']:before,
*[lang~='da'] blockquote > *:before, blockquote[lang~='da'] > *:before { content: '\201E'; }
*[lang~='da'] q:after, q[lang~='da']:after,
*[lang~='da'] blockquote > *:after, blockquote[lang~='da'] > *:after { content: '\201C'; }
*[lang~='da'] q q:before, q[lang~='da'] q:before,
*[lang~='da'] blockquote q:before, blockquote[lang~='da'] q:before { content: '\2019'; }
*[lang~='da'] q q:after, q[lang~='da'] q:after,
*[lang~='da'] blockquote q:after, blockquote[lang~='da'] q:after { content: '\2019'; }
*[lang~='sv'] q:before, q[lang~='sv']:before,
*[lang~='sv'] blockquote > *:before, blockquote[lang~='sv'] > *:before { content: '\201D'; }
*[lang~='sv'] q:after, q[lang~='sv']:after,
*[lang~='sv'] blockquote > *:after, blockquote[lang~='sv'] > *:after { content: '\201D'; }
*[lang~='sv'] q q:before, q[lang~='sv'] q:before,
*[lang~='sv'] blockquote q:before, blockquote[lang~='sv'] q:before { content: '\2019'; }
*[lang~='sv'] q q:after, q[lang~='sv'] q:after,
*[lang~='sv'] blockquote q:after, blockquote[lang~='sv'] q:after { content: '\2019'; }
.blog-item blockquote{
display: block;
margin-left: 30px;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
font-size: 120%;
font-weight: bold;
color: #bcc4a8 ;
}
.blog-item blockquote p{
line-height: 125%;
}
CSS,