Propel Group, Inc.
hang-your-quotes

How to hang your quotes.

Working with quotes and blockquotes can be tricky when trying to decide the best way to implement consistent and contextual quotation marks. Below, we’ll explore how to hang the quotation marks outside of the text block. Note that the bold text has a quote element within the blockquote; this will come into play later.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a nisi. Ut sed mauris eu nulla imperdiet egestas. Aliquam aliquet consequat sapien.

Duis suscipit consectetuer quam. Nulla sed est, “Proin urna nisl, ullamcorper a, scelerisque vel, accumsan in, arcu.” Suspendisse aliquet pede volutpat pede.

Nulla mauris dolor, consectetuer sit amet, varius nec, molestie sit amet, mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Adding quotes.

We use the content attribute to generate quotes before and after our blockquote element.

blockquote:before{content:'\201C';}
blockquote:after{content:'\201D';}

“Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a nisi. Ut sed mauris eu nulla imperdiet egestas. Aliquam aliquet consequat sapien.

Duis suscipit consectetuer quam. Nulla sed est, “Proin urna nisl, ullamcorper a, scelerisque vel, accumsan in, arcu.” Suspendisse aliquet pede volutpat pede.

Nulla mauris dolor, consectetuer sit amet, varius nec, molestie sit amet, mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.”

Multi-paragraph quotes.

You might have noticed that we’re missing opening quotation marks on the second and third paragraphs. We can fix that by applying the dynamic content to the paragraphs inside the blockquote, instead of the blockquote itself.

blockquote p:before{content:'\201C';}
blockquote p:after{content:'';}
blockquote p:last-child:after{content:'\201D';}

“Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a nisi. Ut sed mauris eu nulla imperdiet egestas. Aliquam aliquet consequat sapien.

“Duis suscipit consectetuer quam. Nulla sed est, “Proin urna nisl, ullamcorper a, scelerisque vel, accumsan in, arcu.” Suspendisse aliquet pede volutpat pede.

“Nulla mauris dolor, consectetuer sit amet, varius nec, molestie sit amet, mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.”

Context-aware quotes.

Our problem now is that the quote element inside of our blockquote has double quotes as well, when they should be single. By using keywords instead of Unicode values, our quote element can change contextually. Note the change from double to single quotes in the bold sentence.

blockquote p:before{content:open-quote;}
blockquote p:after{content:no-close-quote;}
blockquote p:last-child:after{content:close-quote;}

“Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a nisi. Ut sed mauris eu nulla imperdiet egestas. Aliquam aliquet consequat sapien.

“Duis suscipit consectetuer quam. Nulla sed est, ‘Proin urna nisl, ullamcorper a, scelerisque vel, accumsan in, arcu.’ Suspendisse aliquet pede volutpat pede.

“Nulla mauris dolor, consectetuer sit amet, varius nec, molestie sit amet, mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.”

Specifying proper quotes.

The only problem with using keywords is that some browsers use improper marks—inch and foot marks. To get our curly quotes back, we’ll tell the blockquote element which Unicode characters to use. American-English quote patterns are used in this example; for other quotation marks, read the Localization section.

blockquote{quotes:'\201C' '\201D' '\2018' '\2019';}
blockquote p:before{content:open-quote;}
blockquote p:after{content:no-close-quote;}
blockquote p:last-child:after{content:close-quote;}

“Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a nisi. Ut sed mauris eu nulla imperdiet egestas. Aliquam aliquet consequat sapien.

“Duis suscipit consectetuer quam. Nulla sed est, ‘Proin urna nisl, ullamcorper a, scelerisque vel, accumsan in, arcu.’ Suspendisse aliquet pede volutpat pede.

“Nulla mauris dolor, consectetuer sit amet, varius nec, molestie sit amet, mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.”

Outsetting quote marks.

Now that we have proper, contextual quotation marks surrounding our blockquote paragraphs, a nice styling technique would be to outset them so that the text blocks are flush left. Note the position of the opening quote mark and first letter of each paragraph compared to the example above.

blockquote{quotes:'\201C' '\201D' '\2018' '\2019'; position:relative;}
blockquote p:before{content:open-quote; position:absolute; left:-.4em;}
blockquote p:after{content:no-close-quote;}
blockquote p:last-child:after{content:close-quote;}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a nisi. Ut sed mauris eu nulla imperdiet egestas. Aliquam aliquet consequat sapien.

Duis suscipit consectetuer quam. Nulla sed est, ‘Proin urna nisl, ullamcorper a, scelerisque vel, accumsan in, arcu.’ Suspendisse aliquet pede volutpat pede.

Nulla mauris dolor, consectetuer sit amet, varius nec, molestie sit amet, mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.”

Localization (beta).

Since other languages use different quotation mark patterns and characters, this is one way to specify those differences.

blockquote{position:relative;}
blockquote:lang(en){quotes:'\201C' '\201D' '\2018' '\2019';}
blockquote:lang(en-GB){quotes:'\2018' '\2019' '\201C' '\201D';}

blockquote p:before{content:open-quote; position:absolute; left:-.4em;}
blockquote:lang(en) p:before{position:absolute; left:-.4em;}
blockquote:lang(en-GB) p:before{position:absolute; left:-.3em;}
blockquote p:after{content:no-close-quote;}
blockquote p:last-child:after{content:close-quote;}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a nisi. Ut sed mauris eu nulla imperdiet egestas. Aliquam aliquet consequat sapien.

Duis suscipit consectetuer quam. Nulla sed est, “Proin urna nisl, ullamcorper a, scelerisque vel, accumsan in, arcu.” Suspendisse aliquet pede volutpat pede.

Nulla mauris dolor, consectetuer sit amet, varius nec, molestie sit amet, mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.’

British-English version shown.

Large list of quotes for internationalization via CSS Tricks.

Leave a Reply