Quotes

Type of quotation marks for embedded quotations.

Syntax
      quotes: "openQuote1" "closeQuote1" "openQuote2" "closeQuote2" | inherit ;

none - Do not produce any quotation marks.
openQuote - The opening quotation mark to use.
closeQuote - The closing quotation mark to use.
inherit - inherit from the parent element.

The <q> element is designed for quotations. The quotation marks will be automatically inserted into the rendering by the user agent. The only thing that has to be added to the markup is <q> and </q> for open/close quotes respectively.

The default quotation marks for the English language are “ ” and ‘ ’.In other languages the standard/default quotation marks may vary: « and ».

The quotes CSS property can be used to insert or to over-ride the user agent default quotation marks. This allows the quotation marks on a page to be customised according to the viewers language.

Of course this skips over the somewhat larger issue of converting the language of the rest of the text! Changing the quotation marks without changing the rest of the language may actually reduce the readability of the page.
Spanish quotes with English text don't make much sense to either Spanish or English readers.

The quotation marks must be given in pairs, one pair for each level of nested quotations that you need to support:

 "'" "'"
 '"' '"'
 "‘" "’"
 "“" "”"
 "‹" "›"
 "«" "»" 

Although intended only for quotation marks, it is possible to insert one (or several) ASCII characters (A-Z, 0-9 etc.)

Examples:
h1 { quotes: "“" "”" "‹" "›" ; }
.emw3class { quotes: "“" "”" "‘" "’" ; }

#emw3id { quotes: "«" "»" "‹" "›" ; }

Try it:

#sample {
  quotes: "«" "»" "'" "'";
}

Outer quote, inner nested quote, remainder of outer quote. Normal text

 

(CSS 2) Browser Support: All major browsers.

It is with books as with men: a very small number play a great part, the rest are lost in the multitude ~ Voltaire

Related:

content - Insert generated content before or after an element. (open-quote, close-quote, no-open-quote, and no-close-quote.)
hyphens - How to split words to improve the layout of paragraphs.


Copyright © 2013-2022 Emw3.com
Some rights reserved