CSS Property: quotes
[this page | pdf | back links]
The CSS (CSS2) quotes property indicates how quotation
marks should be rendered in the text of an element.
Valid property values
(other than inherit
and initial) are:
|
Value
|
Description
|
|
none
|
Open-quote and
close-quote elements within an element (i.e. the <q> and </q> of
a <q> element) will not produce any quotation marks
|
|
string1 string2
string3 string4
|
String1 and string2
define the first level of quotation embedding (opening and closing
respectively), string3 and string4 (if present) the next level
of embedding etc.
|
|
Default Value:
|
N/A
|
|
JavaScript syntax:
|
e.g. object.style.quotes="'\u00AB' '\u00BB'"
|
|
Inherited:
|
No
|
|
Animatable:
|
No
|
Common quotation mark
characters include:
|
Representation
|
Character code used in
Javascript syntax
|
Name
|
|
"
|
\u0022
|
Double quotation mark
|
|
'
|
\u0027
|
Single quotation mark
|
|
‘
|
\u2018
|
Left single high
quotation mark
|
|
’
|
\u2019
|
Right single high
quotation mark
|
|
“
|
\u201C
|
Left double high
quotation mark
|
|
”
|
\u201D
|
Right double high
quotation mark
|
|
‹
|
\u2039
|
Left single angle
quotation mark
|
|
›
|
\u203A
|
Right single angle
quotation mark
|
|
«
|
\u00AB
|
Left double angle
quotation mark
|
|
»
|
\u00BB
|
Right double angle
quotation mark
|
|
„
|
\u201E
|
Right double low
quotation mark
|
EXAMPLE:
HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
q.x1 {quotes: '\00AB' '\00BB';}
</style>
</head>
<body>
<q>Element with default property</q><br>
<q class="x1">Element with property set by HTML</q><br>
<q id="x2">Element with property set by JavaScript</q>
<script>
var x = document.getElementById("x2");
x.style.quotes = "'\u00AB' '\u00BB'";
</script>
</body>
</html>
|
FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedCSSPropertyQuotes() {
var x = document.createElement("DIV"); x.style.quotes = "'\u00AB' '\u00BB'"; return (window.getComputedStyle(x, null).quotes == "'\u00AB' '\u00BB'");
} |
NAVIGATION LINKS
Contents | Prev | Next | CSS Properties