/
index.html
108 lines (100 loc) · 6.24 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery.emphasis.js</title>
<meta name="Keywords" content="jquery.emphasis,text-emphasis,css3,fallback,emphasis marks"/>
<meta name="Description" content="A javascript fallback for CSS3 emphasis mark, aka `text-emphasis`."/>
<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
<link href='http://fonts.googleapis.com/css?family=Autour+One' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="assets/google-code-prettify/prettify.css" />
<link rel="stylesheet" href="assets/index.css" />
</head>
<body>
<div class="container">
<div class="header">
<h1>jQuery.<span class="emphasis">emphasis</span>.js</h1>
<p>A javascript fallback for CSS3 emphasis mark, aka <a class="emphasis" href="http://www.w3.org/TR/css-text-decor-3/#emphasis-marks" target="_blank"><code>text-emphasis</code></a>. It’s really useful for East Asian documents. Using small symbols next to each glyph to emphasize a run of text.</p>
<p class="demo"><img src="./assets/demo.png" alt="demo"/></p>
</div>
<div class="main">
<div class="button-container">
<ul class="button-group">
<li>
<a href="https://github.com/zmmbreeze/jquery.emphasis/" class="large button color green">Github</a>
</li>
<li>
<a target="_blank" href="https://raw.github.com/zmmbreeze/jquery.emphasis/master/bin/jquery.emphasis.min.js" class="large button">Download</a>
</li>
<li>
<a href="demo.html" class="large button">Demo</a>
</li>
</ul>
<p>Depends on jQuery >= 1.10. Support IE 8+, Chrome, Firefox 4+, Safari 5+, Opera 12+, Mobile Safari(iOS 5+)</p>
<p>
<a href="https://twitter.com/share" class="twitter-share-button" data-text="jQuery.emphasis.js – A javascript fallback for CSS3 emphasis mark, aka `text-emphasis`." data-size="large" data-related="zhoumm" data-hashtags="jquery.emphasis">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</p>
</div>
<h2>Getting Started</h2>
<p>Include jquery and emphasis plugin into html like this:</p>
<pre><code><script src="jquery-1.10.2.min.js"></script>
<script src="jquery.emphasis.js"></script>
<script>
$('em').emphasis('dot');
</script></code></pre>
<h3><a href="#emphasis-text-emphasis" id="emphasis-text-emphasis"><code>.emphasis(text-emphasis)</code></a></h3>
<dl>
<dt><code>text-emphasis</code></dt>
<dd>Type: <code>String</code></dd>
<dd>A string representing <a href="http://www.w3.org/TR/css-text-decor-3/#text-emphasis" target="_blank">text-emphasis</a> style.</dd>
<dd>For example: <code>filled</code>, <code>dotted</code>, <code>filled sesame red</code>, <code>"@" #069</code>. You can also use value <code>none</code> to remove the style.</dd>
<dd>It's using <code>navigator.language || navigator.browserLanguage</code> to define which language was used. And it's not supporting vertical writing-mode.</dd>
</dl>
<h3><a href="#emphasis-text-emphasis-position" id="emphasis-text-emphasis-position"><code>.emphasis(text-emphasis, text-emphasis-position)</code></a></h3>
<dl>
<dt><code>text-emphasis</code></dt>
<dd>Type: <code>String</code></dd>
<dd>A string representing <a href="http://www.w3.org/TR/css-text-decor-3/#text-emphasis" target="_blank">text-emphasis</a> style.</dd>
<dt><code>text-emphasis-position</code></dt>
<dd>Type: <code>String</code></dd>
<dd>A string representing <a href="http://www.w3.org/TR/css-text-decor-3/#text-emphasis-position" target="_blank">text-emphasis-position</a> style. Currently it's not support "right" and "left" in vertical writing-mode.</dd>
</dl>
<h2>Links</h2>
<ul>
<li><a href="http://www.w3.org/TR/css-text-decor-3/#emphasis-marks" target="_blank">W3C emphasis marks document</a></li>
<li><a href="http://dailyjs.com/2013/08/13/jquery-roundup/">jQuery.emphasis.js on Dailyjs</a></li>
</ul>
<h2>Know issues</h2>
<ul>
<li>Not support "right" and "left" position.</li>
<li>Not work right on <code>inline-block</code> element in some case.</li>
<li>If browser don't support <code>transform:scale(0.5);</code>, it will have the minimal font-size issue.</li>
</ul>
<p>If you find more issue, welcome to <a href="https://github.com/zmmbreeze/jquery.emphasis/issues" target="_blank">report it</a>.</p>
</div>
</div>
<script src="assets/google-code-prettify/prettify.js"></script>
<script src="assets/jquery-1.10.2.min.js"></script>
<script src="bin/jquery.emphasis.min.js"></script>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36422454-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
(function() {
var pres = document.getElementsByTagName('pre');
for (var i=0,l=pres.length; i<l; i++) {
pres[i].className = 'prettyprint';
}
prettyPrint();
})();
$('.emphasis').emphasis('filled dot', 'under');
$('.header h1 .emphasis').emphasis('filled #08c circle', 'under');
</script>
</body>
</html>