forked from Dovyski/Waker
-
Notifications
You must be signed in to change notification settings - Fork 0
/
dossier-04.html
71 lines (57 loc) · 2.63 KB
/
dossier-04.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
<!--
This is an ordinary content page.
For more information, see dossier-01.html.
-->
<img src="./img/dossier-03/dossier-start-bg.jpg" class="media-headline" />
<h1>Enhanced content</h1>
<div class="full-column float-left">
<p>Waker has a set of custom tags that helps you create enhanced content such as styled blockquotes or embed QR codes. All custom tags are prefixed with <code>w:</code>, such as <code><w:end/></code>.</p>
<p>Below is a list and description of each Waker custom tag.</p>
</div>
<div class="medium-column float-left new-line">
<h2>Quotes</h2>
<p>If your text has a quote, you can use the <code><w:quote></code> tag to display it. All text within that custom tags will be displayed between quote marks, inside a box.</p>
<p>The code below will produce the quotes on the right:</p>
</div>
<div class="medium-column float-right">
<w:quote>Look mom! Some text surrounded by nice quote marks. Cool!</w:quote>
<w:quote>You can place your quote tags inside any column size.</w:quote>
</div>
<div class="full-column new-line">
<p>
<pre>
<w:quote> (text) </w:quote>
</pre>
</p>
</div>
<div class="full-column new-line">
<h2>QR Code</h2>
<p>Sometimes is useful to place a QR code in the text to help readers rich an URL using their mobile devices. If you want convert an URL into a QR code image, use the <code><w:qr></code> custom tag.</p>
<p>The following code...</p>
<p>
<pre>
<w:qr>http://dovyski.github.com/Waker</w:qr>
</pre>
</p>
<p>...will produce this image:</p>
<p style="text-align: center;"><w:qr width="200" height="200">http://dovyski.github.com/Waker</w:qr></p>
<p>You can adjust the width and height of the QR image using the <code>width</code> and <code>height</code> attributes, the same way you do when adjusting the size of an <code><img></code> tag. E.g.:</p>
<p>
<pre>
<w:qr width="300" height="300"> (...) </w:qr>
</pre>
</p>
</div>
<div class="full-column new-line">
<h2>End mark</h2>
<p>Several magazines use a special mark at the end of an article to indicate the end of that content. It is useful when an article uses several pages of the magazine and the author must instruct the reader to keep reading.</p>
<p>Waker has the <code><w:end /></code> custom tag which is replaced by a special sign that indicates the end of the current article.</p>
<p>The following code show how to use the custom tag:</p>
<p>
<pre>
<p> This is the last paragraph of an article. <w:end/> </p>
</pre>
</p>
<p>It will produce the following result: </p>
<p>This is the last paragraph of an article. <w:end/></p>
</div>