jQuery.exdent/demo.html at master · Boldewyn/jQuery.exdent · GitHub

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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Demo: Hanging Punctuation in CSS</title>
    <style>
body {
  font-family: Times New Roman, serif;
  font-size: 26px;
}
.article {
  margin: 0 2em 2em;
  border-left: 1px solid #faa;
}
.article p {
  color: #666;
}
q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
q:before {
  content: open-quote;
  color: darkgreen;
  font-weight: bold;
}
q:after {
  content: close-quote;
}
.cssHooks q,
.hardcoded q {
  quotes: '' '' '' '';
}
.cssHooks q:before,
.cssHooks q:after,
.hardcoded q:before,
.hardcoded q:after {
  content: '';
  content: none;
}
.article q {
}
.article strong {
  color: darkgreen;
}
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../bookmarks/bookmarks/static/jquery.js"><'+'/script>')</script>
    <script src="jquery.exdent.js"></script>
    <script>
$(window).bind('load resize', function() {
    $('div.pseudo q').exdent({ detect: true });
    $('div.hardcoded q').exdent({ by: '.5em'  });
    $('div.a-span span').exdent({ detect: 'This '  });
    $('div.cssHooks q').css('exdent', '.5em');
});
    </script>
  </head>
  <body>
    <div>
      <p><a href="http://boldewyn.github.com/jQuery.exdent/">Back to the
      homepage.</a></p>
      <div class="article">
        <p>Without hanging punctuation:</p>
        <p><strong>“</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Cras sagittis mauris ut nisi cursus eleifend. Quisque consectetur
        gravida urna id euismod. Sed consectetur adipiscing vehicula.
        Fusce arcu velit, scelerisque et iaculis eu, posuere quis lacus.
        Sed non est eu augue vestibulum malesuada ut non purus. Suspendisse
        vel feugiat turpis. Sed consectetur nibh ut ligula dignissim
        tincidunt. Donec luctus feugiat enim ac dapibus.</p>
      </div>
      <div class="article pseudo">
        <p>With hanging punctuation (pseudo-element):</p>
        <p><q>Lorem ipsum dolor sit amet,</q> consectetur adipiscing elit.
        Cras sagittis mauris ut nisi cursus eleifend. Quisque consectetur
        gravida urna id euismod. Sed consectetur adipiscing vehicula.
        Fusce arcu velit, scelerisque et iaculis eu, posuere quis lacus.
        <q><b>This works also in the middle of the text.</b> Try to resize the
        window to bring this quote to the left border.</q>
        Sed non est eu augue vestibulum malesuada ut non purus. Suspendisse
        vel feugiat turpis. Sed consectetur nibh ut ligula dignissim
        tincidunt. Donec luctus feugiat enim ac dapibus.</q></p>
      </div>
      <div class="article hardcoded">
        <p>With hanging punctuation (actual character):</p>
        <p><q><strong>“</strong>Lorem ipsum dolor sit amet,</q> consectetur adipiscing elit.
        Cras sagittis mauris ut nisi cursus eleifend. Quisque consectetur
        gravida urna id euismod. Sed consectetur adipiscing vehicula.
        Fusce arcu velit, scelerisque et iaculis eu, posuere quis lacus.
        <q><strong>“</strong><b>This works also in the middle of the text.</b> Try to resize the
        window to bring this quote to the left border.</q>
        Sed non est eu augue vestibulum malesuada ut non purus. Suspendisse
        vel feugiat turpis. Sed consectetur nibh ut ligula dignissim
        tincidunt. Donec luctus feugiat enim ac dapibus.</q></p>
      </div>
      <div class="article a-span">
        <p>By the string "This ":</p>
        <p><span>This is a span. Lorem ipsum dolor sit amet,</span> consectetur adipiscing elit.
        Cras sagittis mauris ut nisi cursus eleifend. Quisque consectetur
        gravida urna id euismod. Sed consectetur adipiscing vehicula.
        Fusce arcu velit, scelerisque et iaculis eu, posuere quis lacus.
        <span><b>This works also in the middle of the text.</b> Try to resize the
        window to bring this quote to the left border.</span>
        Sed non est eu augue vestibulum malesuada ut non purus. Suspendisse
        vel feugiat turpis. Sed consectetur nibh ut ligula dignissim
        tincidunt. Donec luctus feugiat enim ac dapibus.</span></p>
      </div>
      <div class="article cssHooks">
        <p>With jQuery CSS hook:</p>
        <p><q><strong>“</strong>Lorem ipsum dolor sit amet,</q> consectetur adipiscing elit.
        Cras sagittis mauris ut nisi cursus eleifend. Quisque consectetur
        gravida urna id euismod. Sed consectetur adipiscing vehicula.
        Fusce arcu velit, scelerisque et iaculis eu, posuere quis lacus.
        <q><strong>“</strong><b>This works also in the middle of the text.</b> Try to resize the
        window to bring this quote to the left border.</q>
        Sed non est eu augue vestibulum malesuada ut non purus. Suspendisse
        vel feugiat turpis. Sed consectetur nibh ut ligula dignissim
        tincidunt. Donec luctus feugiat enim ac dapibus.</q></p>
      </div>
    </div>
  </body>
</html>