Back to the index.
The quotes property allows you to define correct quotation marks for your language.
First some background: you can use open-quote and close-quote for any element, and the browser will automatically add quotation marks.
I’ve done so on this page using :before and :after. As you see, every single paragraph now has quotation marks.
p:before {
content: open-quote;
}
p:after {
content: close-quote
}
However, what you see now are the default quotation marks of the browser. I assume they depend on the browser’s language settings, but I haven’t been able to test that properly.
In any case, sometimes you want to use different quotation marks for specific sets of content. For instance, the paragraph below gives the first lines of the best-known tragedy by Vondel; the Dutch Shakespeare.
Het hemelsche gerecht heeft zich ten lange lesten
Erbarremt over my en mijn benaeuwde vesten
En arme burgery, en op mijn volcx gebed
En dagelix geschrey de bange stad ontzet.
I want to use proper Dutch quotation marks here, where the open quote is at the text baseline, and not at the text top, as in English. This is how I define quotation marks for the specific paragraph:
p.test {
quotes: "\201E" "\201D";
}
The defined quotation marks are now used instead of the default ones.