CSS Quotation Marks (w3c)
more related media: books
Gigantic Quotes
At the moment the trend is for larger text on the web. For quotes the text is often enormous with gigantic quote marks.
Quotation Marks
- Quotation marks should be used to set off speech, a quotation or a phrase
- Quotation marks should not be used to emphasize a point
- English American usage -Ending punctuation goes inside the quotation mark
- English - Ending punctuation goes outside the quotation mark
- Quotation marks are different depending upon the language
- Double quotation marks are used around an entire quote
- Single quotation marks are use when you are quoting someone who is quoting someone else
Measurements not Quotes
The straight up and down marks that we use a lot of the time on the web are not really quotation marks, they represent lengths of measurements but these symbols still need to be used within the html and css code.
-
' this is a foot
" this is an inch
Html
There are three html tags that are used in connection with quotations.
- <blockquote></blockquote>
The blockquote is a block level tag and goes around long quotations.
This tag will cause the text to indent on the right and the left. If you do not want this to happen then remove the margins in your reset at the begining of your CSS.
<q></q>
q is a line level tag and goes around short quotations.
<cite></cite>
Place the cite tag around the name of the person you are quoting.
The text within this tag will be in italics unless you create a CSS style.
CSS
We can define the types of quote marks in the CSS.
Language
Quote marks are not the same in all languages, you need to define the language using the quotes property. The following code specifies that the quote marks will be the ones used for english.
q:lang(en)
{
quotes: "«" "»" "'" "'";
}
Before and After
You need to use the pseudeo elements before and after. The following are some examples of when they can be used.
p:after{
a:after{
q:before{
q:after{
These elements are also used in conjunction with the content property.
q:before{
content:
}
You also need to define the actual quotation marks. The following code with give you correct quotation marks.
\201C Opening double quotes
\201D Closing double quotes
\2018 Opening single quotes
\2019 Closing single quotes
Now you have:
q:before {
content: '\201C';
}
Opera
For some versions of Opera you need to include:
q {
quotes: '\201C' '\201D' '\2018' '\2019';
}
Even though as I stated earlier the blockquote is for the block and the q is inline, web designers often just use the q without the blockquote, then the css that has the q for the double quote marks includes: display: block and single includes display: inline.
The value for the property content causes the quote marks to be added.
html
<q>open and closing quote marks</q>
css
q:before {
display: block;
content: '\201C';
}
q:after {
display: block;
content: '\201D';
}
looks like this
open and closing quote marks
If you are enclosing a single quote within double quotes you could use this:
html
<q>...and the loveliest of all was the Unicorn...from the book<q>Where the Sidewalk Ends</q>(1974)</q>
css
q:before {
display: block;
content: '\201C';
}
q:after {
display: block;
content: '\201D';
}
q q:before {
display: inline;
content: '\2018';
}
q q:after {
content: '\2019';
}
looks like this
A long time ago, when the earth was green
and there was more kinds of animals than you've ever seen,
and they run around free while the world was bein' born,
and the loveliest of all was the Unicorn...
Sil Silverstein
from the bookWhere the Sidewalk Ends(1974)
Gigantic Quotes and Enormous Text
Obviously you can enlarge the quote marks and text size by giving a higher font size but this can result in two problems, the lack of space between the text and the quote marks on the right and left and too much space between the top of the text and the quotes. You need to give the text some breathing room on the left and right and also move it up to close the gap between the top of the text and the quotes.
First create a span around the text and give it a class, I have called mine gigantic.
Html
<q><span class="gigantic">...when the earth was green</span></q>
To resolve the lack of space between the the quotes and the text on the left and right add padding to the before and after.
To close the gap create a class (for your span) with a relative position then you can give a negative to the top (make it relative because if you do not give it a position and just use margins they do not workin all situations). Finally give font sizes to your text and quotes
CSS
.gigantic {
position: relative;
top: -16px;
height: auto;
font-size:2.5em;
}
q:before
{
content: '\201C';
font-size:500%;
padding-right: 10px;
}
q:after
{
content: '\201D';
font-size:500%;
padding-left: 20px;
}
Here's the result:
...when the earth was green
Smashing CSS
Transending CSS
The Zen of CSS design
share / bookmark