<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Rendering Quotes Example</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="imagetoolbar" content="false">
<meta name="MSSmartTagsPreventParsing" content="true">
<meta name="description" content="Testing quotes">
<meta name="keywords" content="quotes,test">
<style type="text/css" media="all">
/* SOME GENERIC CSS FOR THIS EXAMPLE */
body { width: 500px; margin: 2em auto; color: #444; font: 1em/1.5em georgia, serif; }
/* STANDARD QUOTES */
q { quotes: "\201C" "\201D" "\2018" "\2019"; }
q:lang(sv) { quotes: '\201D' '\201D' '\2019' '\2019'; }
q:lang(da) { quotes: '\00BB' '\00AB' '\203A' '\2039'; }
q:before { content: open-quote; }
q:after { content: close-quote; }
/* SAFARI SUPPORT */
q:before { content: '\201C'; }
q:after { content: '\201D'; }
q q:before { content: '\2018'; }
q q:after { content: '\2019'; }
/* BLOCKQUOTES */
blockquote * { quotes: none; }
blockquote > *:before { content: '\201C'; }
blockquote > *:after { content: '\201D'; }
blockquote q:before { content: '\2018'; }
blockquote q:after { content: '\2019'; }
/* LANGUAGE-SPECIFIC QUOTES SAFARI STYLE */
*[lang~='da'] q:before, q[lang~='da']:before,
*[lang~='da'] blockquote > *:before, blockquote[lang~='da'] > *:before { content: '\201E'; }
*[lang~='da'] q:after, q[lang~='da']:after,
*[lang~='da'] blockquote > *:after, blockquote[lang~='da'] > *:after { content: '\201C'; }
*[lang~='da'] q q:before, q[lang~='da'] q:before,
*[lang~='da'] blockquote q:before, blockquote[lang~='da'] q:before { content: '\2019'; }
*[lang~='da'] q q:after, q[lang~='da'] q:after,
*[lang~='da'] blockquote q:after, blockquote[lang~='da'] q:after { content: '\2019'; }
*[lang~='sv'] q:before, q[lang~='sv']:before,
*[lang~='sv'] blockquote > *:before, blockquote[lang~='sv'] > *:before { content: '\201D'; }
*[lang~='sv'] q:after, q[lang~='sv']:after,
*[lang~='sv'] blockquote > *:after, blockquote[lang~='sv'] > *:after { content: '\201D'; }
*[lang~='sv'] q q:before, q[lang~='sv'] q:before,
*[lang~='sv'] blockquote q:before, blockquote[lang~='sv'] q:before { content: '\2019'; }
*[lang~='sv'] q q:after, q[lang~='sv'] q:after,
*[lang~='sv'] blockquote q:after, blockquote[lang~='sv'] q:after { content: '\2019'; }
</style>
</head>
<body><!-- BEGIN WAYBACK TOOLBAR INSERT -->
<script type="text/javascript" src="/static/js/timestamp.js?v=1548381079" charset="utf-8"></script>
<script type="text/javascript" src="/static/js/graph-calc.js?v=1548381079" charset="utf-8"></script>
<script type="text/javascript" src="/static/js/auto-complete.js?v=1548381079" charset="utf-8"></script>
<script type="text/javascript" src="/static/js/toolbar.js?v=1548381079" charset="utf-8"></script>
<style type="text/css">
body {
margin-top:0 !important;
padding-top:0 !important;
/*min-width:800px !important;*/
}
.wb-autocomplete-suggestions {
text-align: left; cursor: default; border: 1px solid #ccc; border-top: 0; background: #fff; box-shadow: -1px 1px 3px rgba(0,0,0,.1);
position: absolute; display: none; z-index: 2147483647; max-height: 254px; overflow: hidden; overflow-y: auto; box-sizing: border-box;
}
.wb-autocomplete-suggestion { position: relative; padding: 0 .6em; line-height: 23px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.02em; color: #333; }
.wb-autocomplete-suggestion b { font-weight: bold; }
.wb-autocomplete-suggestion.selected { background: #f0f0f0; }
</style>
<div id="wm-ipp" lang="en" style="display:none;direction:ltr;">
<div style="position:fixed;left:0;top:0;right:0;">
<div id="wm-ipp-inside">
<div style="position:relative;">
<div id="wm-logo" style="float:left;width:130px;padding-top:10px;">
<a href="/web/" title="Wayback Machine home page"><img src="/static/images/toolbar/wayback-toolbar-logo.png" alt="Wayback Machine" width="110" height="39" border="0" /></a>
</div>
<div class="r" style="float:right;">
<div id="wm-btns" style="text-align:right;height:25px;">
<div id="wm-save-snapshot-success">success</div>
<div id="wm-save-snapshot-fail">fail</div>
<a href="#"
onclick="__wm.saveSnapshot('http://monc.se/kitchen/stew/quotes/src.txt', '20101215234017')"
title="Share via My Web Archive"
id="wm-save-snapshot-open"
>
<span class="iconochive-web"></span>
</a>
<a href="https://archive.org/account/login.php"
title="Sign In"
id="wm-sign-in"
>
<span class="iconochive-person"></span>
</a>
<span id="wm-save-snapshot-in-progress" class="iconochive-web"></span>
<a href="http://faq.web.archive.org/" title="Get some help using the Wayback Machine" style="top:-6px;"><span class="iconochive-question" style="color:rgb(87,186,244);font-size:160%;"></span></a>
<a id="wm-tb-close" href="#close" onclick="__wm.h(event);return false;" style="top:-2px;" title="Close the toolbar"><span class="iconochive-remove-circle" style="color:#888888;font-size:240%;"></span></a>
</div>
<div id="wm-share" style="text-align:right;">
<a href="#" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=https://web.archive.org/web/20101215234017/http://monc.se/kitchen/stew/quotes/src.txt', '', 'height=400,width=600'); return false;" title="Share on Facebook" style="margin-right:5px;" target="_blank"><span class="iconochive-facebook" style="color:#3b5998;font-size:160%;"></span></a>
<a href="#" onclick="window.open('https://twitter.com/intent/tweet?text=https://web.archive.org/web/20101215234017/http://monc.se/kitchen/stew/quotes/src.txt&via=internetarchive', '', 'height=400,width=600'); return false;" title="Share on Twitter" style="margin-right:5px;" target="_blank"><span class="iconochive-twitter" style="color:#1dcaff;font-size:160%;"></span></a>
</div>
</div>
<table class="c" style="">
<tbody>
<tr>
<td class="u" colspan="2">
<form target="_top" method="get" action="/web/submit" name="wmtb" id="wmtb"><input type="text" name="url" id="wmtbURL" value="http://monc.se/kitchen/stew/quotes/src.txt" onfocus="this.focus();this.select();" /><input type="hidden" name="type" value="replay" /><input type="hidden" name="date" value="20101215234017" /><input type="submit" value="Go" /></form>
</td>
<td class="n" rowspan="2" style="width:110px;">
<table>
<tbody>
<!-- NEXT/PREV MONTH NAV AND MONTH INDICATOR -->
<tr class="m">
<td class="b" nowrap="nowrap"><a href="https://web.archive.org/web/20100927091623/http://monc.se/kitchen/stew/quotes/src.txt" title="27 Sep 2010"><strong>Sep</strong></a></td>
<td class="c" id="displayMonthEl" title="You are here: 23:40:17 Dec 15, 2010">DEC</td>
<td class="f" nowrap="nowrap">Jan</td>
</tr>
<!-- NEXT/PREV CAPTURE NAV AND DAY OF MONTH INDICATOR -->
<tr class="d">
<td class="b" nowrap="nowrap"><a href="https://web.archive.org/web/20100927091623/http://monc.se/kitchen/stew/quotes/src.txt" title="09:16:23 Sep 27, 2010"><img src="/static/images/toolbar/wm_tb_prv_on.png" alt="Previous capture" width="14" height="16" border="0" /></a></td>
<td class="c" id="displayDayEl" style="width:34px;font-size:24px;white-space:nowrap;" title="You are here: 23:40:17 Dec 15, 2010">15</td>
<td class="f" nowrap="nowrap"><img src="/static/images/toolbar/wm_tb_nxt_off.png" alt="Next capture" width="14" height="16" border="0" /></td>
</tr>
<!-- NEXT/PREV YEAR NAV AND YEAR INDICATOR -->
<tr class="y">
<td class="b" nowrap="nowrap"><a href="https://web.archive.org/web/20091204210013/http://monc.se:80/kitchen/stew/quotes/src.txt" title="04 Dec 2009"><strong>2009</strong></a></td>
<td class="c" id="displayYearEl" title="You are here: 23:40:17 Dec 15, 2010">2010</td>
<td class="f" nowrap="nowrap">2011</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="s">
<div id="wm-nav-captures">
<a class="t" href="/web/20101215234017*/http://monc.se/kitchen/stew/quotes/src.txt" title="See a list of every capture for this URL">33 captures</a>
<div class="r" title="Timespan for captures of this URL">01 May 2008 - 15 Dec 2010</div>
</div>
</td>
<td class="k">
<a href="" id="wm-graph-anchor">
<div id="wm-ipp-sparkline" title="Explore captures for this URL" style="position: relative">
<canvas id="wm-sparkline-canvas" width="600" height="27" border="0"></canvas>
</div>
</a>
</td>
</tr>
</tbody>
</table>
<div style="position:absolute;bottom:0;right:2px;text-align:right;">
<a id="wm-expand" class="wm-btn wm-closed" href="#expand" onclick="__wm.ex(event);return false;"><span id="wm-expand-icon" class="iconochive-down-solid"></span> <span style="font-size:80%">About this capture</span></a>
</div>
</div>
<div id="wm-capinfo" style="border-top:1px solid #777;display:none; overflow: hidden">
<div style="background-color:#666;color:#fff;font-weight:bold;text-align:center">COLLECTED BY</div>
<div style="padding:3px;position:relative" id="wm-collected-by-content">
<div style="display:inline-block;vertical-align:top;width:50%;">
<span class="c-logo" style="background-image:url(https://archive.org/services/img/webwidecrawl);"></span>
Organization: <a style="color:#33f;" href="https://archive.org/details/webwidecrawl" target="_new"><span class="wm-title">Internet Archive</span></a>
<div style="max-height:75px;overflow:hidden;position:relative;">
<div style="position:absolute;top:0;left:0;width:100%;height:75px;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 90%,rgba(255,255,255,255) 100%);"></div>
The Internet Archive discovers and captures web pages through many different web crawls.
At any given time several distinct crawls are running, some for months, and some every day or longer.
View the web archive through the <a href="http://archive.org/web/web.php">Wayback Machine</a>.
</div>
</div>
<div style="display:inline-block;vertical-align:top;width:49%;">
<span class="c-logo" style="background-image:url(https://archive.org/services/img/wide00001)"></span>
<div>Collection: <a style="color:#33f;" href="https://archive.org/details/wide00001" target="_new"><span class="wm-title">Wide Crawl started October 2010</span></a></div>
<div style="max-height:75px;overflow:hidden;position:relative;">
<div style="position:absolute;top:0;left:0;width:100%;height:75px;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 90%,rgba(255,255,255,255) 100%);"></div>
Web wide crawl with initial seedlist and crawler configuration from October 2010
</div>
</div>
</div>
<div style="background-color:#666;color:#fff;font-weight:bold;text-align:center" title="Timestamps for the elements of this page">TIMESTAMPS</div>
<div>
<div id="wm-capresources" style="margin:0 5px 5px 5px;max-height:250px;overflow-y:scroll !important"></div>
<div id="wm-capresources-loading" style="text-align:left;margin:0 20px 5px 5px;display:none"><img src="/static/images/loading.gif" alt="loading" /></div>
</div>
</div></div></div></div><script type="text/javascript">
__wm.bt(600,27,25,2,"web","http://monc.se/kitchen/stew/quotes/src.txt","2010-12-15",1996);
</script>
<!-- END WAYBACK TOOLBAR INSERT -->
<h3>Rendering Quotes With CSS</h3>
<p>This is an example on how to render quotes in a language-specific manner according to the <abbr>W3C</abbr> specifications.</p>
<p>The quotes will work in any modern browser, but unfortunately not in IE since they do not support quotes properly. You'd have to add some javascript magic to make things happen in IE - but that's another topic.</p>
<h4>Examples:</h4>
<p><q>Generic quote and <q>another quote</q> inside</q></p>
<p lang="sv"><q>Swedish quote and <q>another quote</q> inside</q></p>
<p lang="da"><q>Danish quote and <q>another quote</q> inside</q></p>
<p><q lang="sv">Swedish quote and <q>another quote</q> inside with the lang attribute set in the parent <code><q></code> tag</q></p>
<blockquote><p>This is a generic paragraph with a <q>quote element</q> inside a blockquote</p></blockquote>
<div lang="sv"><blockquote><p>This is a swedish paragraph with a <q>quote element</q> inside a blockquote</p></blockquote></div>
<div lang="da"><blockquote><p>This is a danish paragraph with a <q>quote element</q> inside a blockquote</p></blockquote></div>
<p><small>Link back to article: <a href="#">Rendering Quotes With CSS</a></small></p>
</body>
</html>
