The best way to learn how to use the WebCore is by example. See the documentation for more information.
The requested URL is always shown first; if a page uses one or more WebCore templates, those are shown afterwards.
Source for: https://www.earthli.com/news/text_formatting.php
Uses WebCore template(s):
00 <?php
01
02 /****************************************************************************
03
04 Copyright (c) 2002-2014 Marco Von Ballmoos
05
06 This file is part of earthli News.
07
08 earthli News is free software; you can redistribute it and/or modify
09 it under the terms of the GNU General Public License as published by
10 the Free Software Foundation; either version 2 of the License, or
11 (at your option) any later version.
12
13 earthli News is distributed in the hope that it will be useful,
14 but WITHOUT ANY WARRANTY; without even the implied warranty of
15 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
16 GNU General Public License for more details.
17
18 You should have received a copy of the GNU General Public License
19 along with earthli News; if not, write to the Free Software
20 Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
21
22 For more information about the earthli News, visit:
23
24 http://www.earthli.com/software/webcore/news
25
26 ****************************************************************************/
27
28 require_once ('news/start.php');
29 require_once ($App->page_template_for ('webcore/pages/text_formatting.php'));
30 ?>
31
Source for template: webcore/pages/text_formatting.php
00 <?php
01
02 /****************************************************************************
03
04 Copyright (c) 2002-2014 Marco Von Ballmoos
05
06 This file is part of earthli WebCore.
07
08 earthli WebCore is free software; you can redistribute it and/or modify
09 it under the terms of the GNU General Public License as published by
10 the Free Software Foundation; either version 2 of the License, or
11 (at your option) any later version.
12
13 earthli WebCore is distributed in the hope that it will be useful,
14 but WITHOUT ANY WARRANTY; without even the implied warranty of
15 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
16 GNU General Public License for more details.
17
18 You should have received a copy of the GNU General Public License
19 along with earthli WebCore; if not, write to the Free Software
20 Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
21
22 For more information about the earthli WebCore, visit:
23
24 http://www.earthli.com/software/webcore
25
26 ****************************************************************************/
27
28 $Page->title->subject = 'Text formatting';
29
30 $Page->location->add_root_link();
31
32 $Page->location->append ($Page->title->subject);
33
34 $Page->start_display ();
35 ?>
36 <div class="main-box">
37 <div class="columns text-flow">
38 <div class="left-sidebar">
39 <h2>Text</h2>
40 <ul>
41 <li><a href="#exceptions">Single-line vs. Multi-line</a></li>
42 <li><a href="#new_lines">Newline handling</a></li>
43 <li><a href="#characters">Special Characters</a></li>
44 <li><a href="#literals">Literal characters</a></li>
45 <li><a href="#tags">Tags</a></li>
46 <li><a href="#Usingastext">Using < as text</a></li>
47 </ul>
48 <h2>Basic</h2>
49 <ul>
50 <li><a href="#attributes">Standard attributes</a></li>
51 <li><a href="#generic">Generic formatting</a></li>
52 <li><a href="#character">Character formatting</a></li>
53 <li><a href="#headings">Headings</a></li>
54 <li><a href="#lists">Lists</a></li>
55 </ul>
56 <h2>Links</h2>
57 <ul>
58 <li><a href="#links">Links</a></li>
59 <li><a href="#images">Images</a></li>
60 <li><a href="#videos">Videos</a></li>
61 <li><a href="#paths">Paths/resources</a></li>
62 </ul>
63 <h2>Special</h2>
64 <ul>
65 <li><a href="#pre_text">Pre-formatted text</a></li>
66 <li><a href="#code_text">Source code</a></li>
67 <li><a href="#quoting">Quoting</a></li>
68 <li><a href="#notes">Notes</a></li>
69 <li><a href="#abstract">Abstract</a></li>
70 <li><a href="#pullquotes">Pull quotes</a></li>
71 <li><a href="#boxes">Boxes</a></li>
72 <li><a href="#messages">Messages</a></li>
73 <li><a href="#footnotes">Footnotes</a></li>
74 <li><a href="#clear">Clearing floats</a></li>
75 <li><a href="#anchors">Anchors</a></li>
76 <li><a href="#rules">Rules</a></li>
77 </ul>
78 <h2>Advanced</h2>
79 <ul>
80 <li><a href="#macro">Controlling the formatter</a></li>
81 </ul>
82 </div>
83 <div>
84 <p>Blocks of text in this application are mainly plain
85 text. That means that newline characters will be faithfully represented
86 when rendered into an output format. There are also several tags supported
87 that allow you to build commonly used constructions, like ordered and
88 unordered lists, pre-formatted blocks, quoted blocks and more.</p>
89 <p>These tags look like HTML and often share a name with a similar HTML
90 element, but are <em>not</em> actually HTML tags. The content you write
91 is transformed to HTML when displayed in a web page, but can also be transformed
92 to plain-text—e.g. when generating a plain-text email.</p>
93 <h1>Text</h1>
94 <h2 id="exceptions">Single-line vs. Multi-line</h2>
95 <p>Some fields, like object titles, are explicitly single-line and support only a
96 limited number of nested tags. If block or image tags are included, they
97 are instead inserted as if they were just text. Only the <span class="highlight"><b></span>,
98 <span class="highlight"><i></span> and <span class="highlight"><c></span>
99 tags are supported in single-line mode.</p>
100 <h2 id="new_lines">Newline handling</h2>
101 <p>If you are just writing unformatted text, you may treat newlines as you
102 normally would; both the HTML and plain-text formatter will honor the
103 vertical spacing you've chosen. In some cases, HTML forces extra spacing that cannot
104 be avoided—e.g. if you separate a normal text run from a pre-formatted
105 text run with a single newline, HTML will render this with a double newline
106 because the blocks are separated by a margin. In these cases, it makes
107 no difference if you use zero, one or two newlines -- there are always
108 two newlines rendered. The plain-text formatter has been written to emulate
109 this behavior, so that the plain-text representation is as close as possible
110 to the 'main' HTML output format.</p>
111 <h2 id="characters">Special Characters</h2>
112 <p>Certain characters will be automatically replaced if they appear anywhere
113 in regular text. You can disable this replacement for whole
114 regions by using the <a href="#macro"><macro></a> tag.</p>
115 <table class="basic columns">
116 <tr>
117 <th>Input</th>
118 <th>Output</th>
119 </tr>
120 <tr>
121 <td>---</td><td>—</td>
122 </tr>
123 <tr>
124 <td>--</td><td>–</td>
125 </tr>
126 <tr>
127 <td>1/2</td><td>½</td>
128 </tr>
129 <tr>
130 <td>1/4</td><td>¼</td>
131 </tr>
132 <tr>
133 <td>3/4</td><td>¾</td>
134 </tr>
135 <tr>
136 <td>...</td><td>…</td>
137 </tr>
138 <tr>
139 <td>(tm)</td><td>™</td>
140 </tr>
141 <tr>
142 <td>(c)</td><td>©</td>
143 </tr>
144 <tr>
145 <td>(r)</td><td>®</td>
146 </tr>
147 <tr>
148 <td> x </td><td>×</td>
149 </tr>
150 <tr>
151 <td> - </td><td>−</td>
152 </tr>
153 <tr>
154 <td>(C,)</td><td>Ç</td>
155 </tr>
156 <tr>
157 <td>(c,)</td><td>ç</td>
158 </tr>
159 <tr>
160 <td>(C-)</td><td>Č</td>
161 </tr>
162 <tr>
163 <td>(c-)</td><td>č</td>
164 </tr>
165 <tr>
166 <td>(C')</td><td>Ć</td>
167 </tr>
168 <tr>
169 <td>(c')</td><td>ć</td>
170 </tr>
171 <tr>
172 <td>(g-)</td><td>ğ</td>
173 </tr>
174 <tr>
175 <td>(i-)</td><td>ı</td>
176 </tr>
177 <tr>
178 <td>(I.)</td><td>İ</td>
179 </tr>
180 <tr>
181 <td>(S,)</td><td>Ş</td>
182 </tr>
183 <tr>
184 <td>(s,)</td><td>ş</td>
185 </tr>
186 <tr>
187 <td>(S-)</td><td>Š</td>
188 </tr>
189 <tr>
190 <td>(s-)</td><td>š</td>
191 </tr>
192 <tr>
193 <td>(Z-)</td><td>Ž</td>
194 </tr>
195 <tr>
196 <td>(z-)</td><td>ž</td>
197 </tr>
198 <tr>
199 <td>(-cmd)</td><td>⌘</td>
200 </tr>
201 <tr>
202 <td>(-del)</td><td>⌫</td>
203 </tr>
204 <tr>
205 <td>(-eject)</td><td>⏏</td>
206 </tr>
207 <tr>
208 <td>(-enter)</td><td>⏎</td>
209 </tr>
210 <tr>
211 <td>(-opt)</td><td>⌥</td>
212 </tr>
213 <tr>
214 <td>(-shift)</td><td>⇧</td>
215 </tr>
216 <tr>
217 <td>(-tab)</td><td>⇥</td>
218 </tr>
219 </table>
220 <p>Additionally, the following character pairs are automatically converted to
221 their ligature equivalents. Most browsers don't especially like these characters<a href="#ligatures_footnote_body" id="ligatures_footnote_ref" class="footnote-number">[1]</a>,
222 so this conversion is off, by default. You can enable this replacement for
223 whole regions using the <a href="#macro"><macro></a> tag.</p>
224 <table class="basic columns">
225 <tr>
226 <th>Input</th>
227 <th>Output</th>
228 </tr>
229 <tr>
230 <td>ffi</td><td>ffi</td>
231 </tr>
232 <tr>
233 <td>ffl</td><td>ffl</td>
234 </tr>
235 <tr>
236 <td>ff</td><td>ff</td>
237 </tr>
238 <tr>
239 <td>fi</td><td>fi</td>
240 </tr>
241 <tr>
242 <td>fl</td><td>fl</td>
243 </tr>
244 </table>
245 <div class="footnote-reference"><span id="ligatures_footnote_body" class="footnote-number">[1]</span>As of this writing,
246 in 2014, all tested browser still consistently take the ligature from a fallback font rather than the specialized web
247 fonts used in the page. This is likely because such fonts (e.g. Raleway) don't have explicit ligatures defined. In such
248 cases, though, falling back to using individual letters is much preferred to importing a ligature from a completely
249 different font.<a href="#ligatures_footnote_ref" class="footnote-return" title="Jump back to reference.">↩</a></div>
250 <h2 id="literals">Literal characters</h2>
251 <p>In this version, you may type anything you like; there is no longer a
252 need to specifically escape characters as HTML. The input language is
253 no longer HTML, so escaping characters has been limited to the single
254 case of the < character, discussed next.</p>
255 <h2 id="tags">Tags</h2>
256 <p>Tags are the same format as HTML tags (e.g. <tag attr="value">).
257 The tokenizer recognizes as a tag any grouping of text that starts with
258 <, has a letter or number as the next letter, then ends with >.
259 This is discussed in more detail in <a href="#Usingastext">Using <
260 as text</a>. If a tag is not recognized, it will be rendered as text.
261 The list of recognized tags follow and are recognized by both the HTML
262 and plain-text formatters. When a tag is recognized, that means that it
263 will not be rendered as text by the formatter, but will either be used
264 directly, transformed to another tag or construct or discarded, depending
265 on the output format.</p>
266 <p>Unknown tags are rendered as text, by default.</p>
267 <h2 id="Usingastext">Using < as text</h2>
268 <p>Since the content can be delimited by tags, the < character must
269 be escaped in certain circumstances. These situations have been limited
270 so that you will only very rarely have to use the escaped character. The
271 only time you <em>may</em> need to escape the < character is if the
272 character immediately following it is a letter or number. To escape the
273 <, use <<.</p>
274 <p>If you want to write: </p>
275 <pre><code>x < y and 5 < 8</code></pre>
276 <p>you do not need to escape anything. Simply write it as shown above and
277 the formatter detects that the < characters in the text cannot be parts
278 of tags.</p>
279 <p>If you want to write:</p>
280 <pre><code>If the text in the input box is still <default>, then you have to...</code></pre>
281 <p>you still don't <em>have</em> to escape the bracket, since the formatter
282 simply renders unknown tags as text anyway. In the next example, we see
283 where we must include an escaped < character.</p>
284 <p>If you want to write:</p>
285 <pre><code><pre> to specify a backlink, use <linkname. </pre></code></pre>
286 <p>The problem here is that the tokenizer will recognize '<linkname.
287 </pre>' as a tag, which will cause the </pre> end tag to be
288 ignored, with unpredictable results. The text will still be output, but
289 the -matted region will not be properly rendered. To avoid this,
290 use the escaped version of the < character:</p>
291 <pre><code><pre> to specify a backlink, use <<linkname. </pre></code></pre>
292 <h1>Basic</h1>
293 <h2 id="attributes">Standard attributes</h2>
294 <p>All other attributes, unless otherwise specified below, are <em>discarded</em>.</p>
295 <h3>All tags</h3>
296 <p>The following attributes are recognized for all tags:</p>
297 <table class="basic columns left-labels">
298 <tr>
299 <th>Name</th>
300 <th>Comments</th>
301 </tr>
302 <tr>
303 <th>id</th><td>Can be used with the <span class="highlight">anchor</span> tag</td>
304 </tr>
305 <tr>
306 <th>class</th><td>References classes defined in CSS</td>
307 </tr>
308 <tr>
309 <th>style</th><td>CSS directives</td>
310 </tr>
311 <tr>
312 <th>title</th><td>Generally shown as a tooltip when hovered</td>
313 </tr>
314 </table>
315 <h3>All blocks</h3>
316 <p>The following attributes apply to all blocks:</p>
317 <table class="basic columns left-labels top">
318 <tr>
319 <th>align</th>
320 <td>
321 <p>The default value is 'none'. This parameter is ignored in the plain-text renderer.</p>
322 <table class="basic columns left-labels top">
323 <tr>
324 <th>left</th>
325 <td>Float the box to the left,
326 with text wrapped around to the right.</td>
327 </tr>
328 <tr>
329 <th>left-column</th>
330 <td>The same as <span class="highlight">left</span>, but also clears all preceding left-aligned elements.
331 Use this value to stack floated elements to one side or the other.</td>
332 </tr>
333 <tr>
334 <th>right</th>
335 <td>Float the box to the right,
336 with text wrapped around to the left.</td>
337 </tr>
338 <tr>
339 <th>right-column</th>
340 <td>The same as <span class="highlight">right</span>, but also clears all preceding right-aligned elements.
341 Use this value to stack floated elements to one side or the other.</td>
342 </tr>
343 <tr>
344 <th>center</th>
345 <td>Box is centered in its own block. Text is split, with the flow continuing after the image.</td>
346 </tr>
347 <tr>
348 <th>none</th>
349 <td>Box is formatted inline with the text.</td>
350 </tr>
351 </table>
352 </td>
353 </tr>
354 <tr>
355 <th>clear</th>
356 <td>
357 <p>The default value is 'none'. This parameter is ignored in the plain-text renderer.</p>
358 <table class="basic columns left-labels top">
359 <tr>
360 <th>both</th>
361 <td>Clear floating elements on both sides.</td>
362 </tr>
363 <tr>
364 <th>left</th>
365 <td>Clear floating elements only on the left side.</td>
366 </tr>
367 <tr>
368 <th>right</th>
369 <td>Clear floating elements only on the right side.</td>
370 </tr>
371 <tr>
372 <th>none</th>
373 <td>Don't clear any floating elements.</td>
374 </tr>
375 </table>
376 </td>
377 </tr>
378 <tr>
379 <th>width</th>
380 <td>If you specify a left or right alignment, you will probably want to
381 specify a width as well. This attribute accepts all CSS values.</td>
382 </tr>
383 </table>
384 <h3>Block captions</h3>
385 <p>These attributes also apply to all blocks and are used to construct the caption for a block.</p>
386 <table class="basic columns left-labels top">
387 <tr>
388 <th>author</th>
389 <td>Included in the caption by appending "by AUTHOR"</td>
390 </tr>
391 <tr>
392 <th>date</th>
393 <td>Included in the caption by appending "on DATE"</td>
394 </tr>
395 <tr>
396 <th>href</th>
397 <td>Wrapped as a link around the <span class="highlight">caption</span>, if both are given</td>
398 </tr>
399 <tr>
400 <th>source</th>
401 <td>Included in the caption by appending "(SOURCE)" wrapped in a link that goes to the root domain
402 of the <span class="highlight">href</span> value.</td>
403 </tr>
404 <tr>
405 <th>caption</th>
406 <td>If specified, it will be included with the block (top or bottom, depending
407 on <span class="highlight">caption-position</span>).</td>
408 </tr>
409 <tr>
410 <th>caption-position</th>
411 <td>
412 <p>The default value is 'top'. This parameter is ignored in the plain-text renderer.</p>
413 <table class="basic columns left-labels top">
414 <tr>
415 <th>top</th>
416 <td>Show the caption above the box.</td>
417 </tr>
418 <tr>
419 <th>bottom</th>
420 <td>Show the caption below the box.</td>
421 </tr>
422 </table>
423 </td>
424 </tr>
425 </table>
426 <div class="preview ">
427 <h3 class="preview-title">Example</h3>
428 <table class="basic">
429 <tr>
430 <td style="width: 50%">
431 <span class="highlight"><bq href="http://earthli.com/news" source="Earthli News" author="Marco" date="Feb 2014" caption="Some article"></span>This is the content of the quote<span class="highlight"></bq></span>
432 </td>
433 <td style="font-size: 150%">→</td>
434 <td>
435 <div><div class="auto-content-block"><blockquote class="quote quote-block"><div>“This is the content of the quote”</div></blockquote></div><div class="auto-content-caption"><a href="http://earthli.com/news">Some article</a> by <cite>Marco</cite> on Feb 2014 (<cite><a href="http://earthli.com/">Earthli News</a></cite>)</div></div>
436 </td>
437 </tr>
438 </table>
439 </div>
440 <h2 id="generic">Generic formatting</h2>
441 <p>You may also use <span class="highlight"><span></span> and <span class="highlight"><div></span>
442 tags. In the HTML formatter, they are copied in as tags and will have
443 whatever functionality the browser gives them. They are stripped by the
444 plain-text formatter.</p>
445 <h2 id="character">Character formatting</h2>
446 <p>There are several character-formatting tags, aligned more or less with the common
447 HTML tags. These are all stripped by the plain-text formatter.</p>
448 <table class="basic columns left-labels">
449 <tr>
450 <th>Tag</th>
451 <th>Input</th>
452 <th>Output</th>
453 <th>Description</th>
454 </tr>
455 <tr>
456 <th>b</th>
457 <td><b>strong</b></td>
458 <td><strong>strong</strong></td>
459 <td>Strongly formatted text</td>
460 </tr>
461 <tr>
462 <th>i</th>
463 <td><i>emphasized</i></td>
464 <td><em>emphasized</em></td>
465 <td>Emphasized text</td>
466 </tr>
467 <tr>
468 <th>u</th>
469 <td><u>underlined</u></td>
470 <td><em>underlined</em></td>
471 <td>Underlined text</td>
472 </tr>
473 <tr>
474 <th>s</th>
475 <td><s>strike-through</s></td>
476 <td><del>strike-through</del></td>
477 <td>Strike-through text</td>
478 </tr>
479 <tr>
480 <th>n</th>
481 <td><n>notes</n></td>
482 <td><small class="notes">notes</small></td>
483 <td>Notes/comments</td>
484 </tr>
485 <tr>
486 <th>c</th>
487 <td><c>code</c></td>
488 <td><code>code</code></td>
489 <td>Inline code</td>
490 </tr>
491 <tr>
492 <th>hl</th>
493 <td><hl>highlighted</hl></td>
494 <td><strong class="highlight">highlighted</strong></td>
495 <td>Highlighted text</td>
496 </tr>
497 <tr>
498 <th>del</th>
499 <td><del>deleted</del></td>
500 <td><del>deleted</del></td>
501 <td>Deleted text</td>
502 </tr>
503 <tr>
504 <th>var</th>
505 <td><var>variableOne</var></td>
506 <td><var>variableOne</var></td>
507 <td>Variable names</td>
508 </tr>
509 <tr>
510 <th>kbd</th>
511 <td><kbd>(-cmd)</kbd> + <kbd>B</kbd></td>
512 <td><kbd>⌘</kbd> + <kbd>B</kbd></td>
513 <td>Keyboard characters</td>
514 </tr>
515 <tr>
516 <th>dfn</th>
517 <td><dfn>definition</dfn></td>
518 <td><dfn>definition</dfn></td>
519 <td>Definitions</td>
520 </tr>
521 <tr>
522 <th>abbr</th>
523 <td><abbr title="Computer-aided Design">CAD</abbr></td>
524 <td><abbr title="Computer-aided Design">CAD</abbr></td>
525 <td>Abbreviations</td>
526 </tr>
527 <tr>
528 <th>cite</th>
529 <td><cite>citation</cite></td>
530 <td><cite>citation</cite></td>
531 <td>Citations</td>
532 </tr>
533 <tr>
534 <th>sub</th>
535 <td>10<sub>n</sub></td>
536 <td>10<sub>n</sub></td>
537 <td>Subscripts</td>
538 </tr>
539 <tr>
540 <th>sup</th>
541 <td>2<sup>16</sup></td>
542 <td>2<sup>16</sup></td>
543 <td>Superscripts</td>
544 </tr>
545 </table>
546 <h2 id="headings">Headings</h2>
547 <p>Headings are written with the <span class="highlight"><h></span> tag. Use
548 headings to delineate new sections in longer text flows. The default heading is
549 slightly larger than regular text and bold. Plain-text mode will maintain proper
550 spacing for headings even if you don't specify it.</p>
551 <p>The following additional attributes are allowed.</p>
552 <table class="basic columns left-labels top">
553 <tr>
554 <th>level</th>
555 <td>Heading level, analogous to the HTML heading level. The default is 2.
556 Since headings are usually just used to distinguish between sections, you
557 shouldn't often need to control the heading level.</td>
558 </tr>
559 </table>
560 <div class="preview ">
561 <h3 class="preview-title">Example</h3>
562 <table class="basic">
563 <tr>
564 <td style="width: 50%">
565 <p><span class="highlight"><h></span>Products<span class="highlight"></h></span></p>
566 <p><span class="highlight"><h level="3"></span>earthli WebCore<span class="highlight"></h></span></p>
567 </td>
568 <td style="font-size: 150%">→</td>
569 <td>
570 <h2>Products</h2>
571 <h3>earthli WebCore</h3>
572 </td>
573 </tr>
574 </table>
575 </div>
576 <h2 id="lists">Lists</h2>
577 <p>Unordered, ordered and definition lists are supported. Use a <span class="highlight"><ul></span>
578 tag to wrap text in an unordered list, an <span class="highlight"><ol></span>
579 tag to create an ordered one and a <span class="highlight"><dl></span> tag to create
580 a definition list. A new list item is created for each newline
581 encountered in the list. The first and last newlines in a list are always
582 ignored and are assumed to be for tag formatting. Lists and other tags
583 can be freely mixed and nested. Plain-text formatting will maintain vertical margins even if none
584 are specified in the source text.</p>
585 <p>Tag attributes, if specified, are <em>retained</em>.</p>
586 <h3>Examples</h3>
587 <p>This is the way you would normally write lists, with indenting and newlines
588 handled as expected. The indenting is <em>not</em> necessary here, but
589 is used to make the source text clearer.</p>
590 <div class="preview">
591 <h3 class="preview-title">Example 1</h3>
592 <table class="basic">
593 <tr>
594 <td><span class="highlight"><ul></span><br>
595 One<br>
596 <span class="highlight"><ol></span><br>
597 1.25<br>
598 1.50<br>
599 1.75<br>
600 <span class="highlight"></ol></span><br>
601 Two<br>
602 Three<br>
603 <span class="highlight"></ul></span></td>
604 <td style="font-size: 150%">→</td>
605 <td><ul>
606 <li>One
607 <ol>
608 <li>1.25</li>
609 <li>1.50</li>
610 <li>1.75</li>
611 </ol>
612 </li>
613 <li>Two</li>
614 <li>Three</li>
615 </ul></td>
616 </tr>
617 </table>
618 </div>
619 <p>It is possible to <em>fully</em> nest a list within an item, so that
620 the item's text can continue after the list. The first item in the outer
621 list is now formatted that way, so that 'Two' is no longer it's own list
622 item. The only difference here is that there is no new line after 'One'
623 in the text; this indicates that the item should continue after the embedded
624 list.</p>
625 <div class="preview">
626 <h3 class="preview-title">Example 2</h3>
627 <table class="basic">
628 <tr>
629 <td><span class="highlight"><ul></span><br>
630 One<span class="highlight"><ol></span><br>
631 1.25<br>
632 1.50<br>
633 1.75<br>
634 <span class="highlight"></ol></span><br>
635 Two<br>
636 Three<br>
637 <span class="highlight"></ul></span></td>
638 <td style="font-size: 150%">→</td>
639 <td><ul>
640 <li>One
641 <ol>
642 <li>1.25</li>
643 <li>1.50</li>
644 <li>1.75</li>
645 </ol>
646 Two</li>
647 <li>Three</li>
648 </ul></td>
649 </tr>
650 </table>
651 </div>
652 <p>Inserting blank lines will generate blank list items.</p>
653 <div class="preview">
654 <h3 class="preview-title">Example 3</h3>
655 <table class="basic">
656 <tr>
657 <td><span class="highlight"><ul></span><br>
658 <br>
659 One<br>
660 <span class="highlight"><ol></span><br>
661 1.25<br>
662 1.50<br>
663 1.75<br>
664 <span class="highlight"></ol></span><br>
665 Two<br>
666 Three<br>
667 More...<br>
668 <br>
669 <br>
670 <br>
671 <span class="highlight"></ul></span></td>
672 <td style="font-size: 150%">→</td>
673 <td><ul>
674 <li> </li>
675 <li>One
676 <ol>
677 <li>1.25</li>
678 <li>1.50</li>
679 <li>1.75</li>
680 </ol>
681 </li>
682 <li>Two</li>
683 <li>Three</li>
684 <li>More...</li>
685 <li> </li>
686 <li> </li>
687 <li> </li>
688 </ul></td>
689 </tr>
690 </table>
691 </div>
692 <p>Definition lists generate alternating terms and definitions for each newline
693 between the start and end tags. Two attributes are supported: <span class="highlight">dt_class</span>
694 and <span class="highlight">dd_class</span>, which define the CSS class for definition terms and
695 definitions, respectively. Use a <span class="highlight"><div></span> tag to include more complex
696 formatting in the definition, as shown in the example below, which has multiple paragraphs.</p>
697 <?php
698
699 ?>
700 <div class="preview">
701 <h3 class="preview-title">Example 4</h3>
702 <table class="basic">
703 <tr>
704 <td><span class="highlight"><dl dt_class="field" dd_class="notes"></span><br>
705 First Term<br>
706 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac
707 leo accumsan, semper magna in, consectetur metus. <br>
708 Second Term<br>
709 <span class="highlight"><div></span><br>
710 Mauris dictum adipiscing metus sed accumsan.<br>
711 <br>
712 Aenean facilisis justo lacus, et fringilla arcu luctus id.<br>
713 <br>
714 Nulla at tortor at erat sagittis pellentesque.<span class="highlight"></div></span><br>
715 <span class="highlight"></dl></span></td>
716 <td style="font-size: 150%">→</td>
717 <td><dl>
718 <dt class="field">First Term</dt>
719 <dd class="notes">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac
720 leo accumsan, semper magna in, consectetur metus.</dd>
721 <dt class="field">Second Term</dt>
722 <dd class="notes">
723 <div>
724 <p>Mauris dictum adipiscing metus sed accumsan.</p>
725 <p>Aenean facilisis justo lacus, et fringilla arcu luctus id.</p>
726 <p>Nulla at tortor at erat sagittis pellentesque.</p>
727 </div>
728 </dd>
729 </dl></td>
730 </tr>
731 </table>
732 </div>
733 <h1>Links</h1>
734 <h2 id="links">Links</h2>
735 <p>Links are written with the <span class="highlight"><a></span> tag.
736 The following attributes are allowed.</p>
737 <table class="basic columns left-labels top">
738 <tr>
739 <th>title</th>
740 <td>The title of the link. Can be a longer description of the resource
741 to which the link goes.</td>
742 </tr>
743 <tr>
744 <th>class</th>
745 <td>This will assign the specified CSS class to the link itself.</td>
746 </tr>
747 <tr>
748 <th>href</th>
749 <td>The url to which the link goes.</td>
750 </tr>
751 <tr>
752 <th>format</th>
753 <td><p> This is used only in the plain-text renderer. The default value is 'all'.</p>
754 <table class="basic columns left-labels top">
755 <tr>
756 <th>url</th>
757 <td>Show only the url.</td>
758 </tr>
759 <tr>
760 <th>all</th>
761 <td>Show the url and title.</td>
762 </tr>
763 <tr>
764 <th>none</th>
765 <td>Skip this link.</td>
766 </tr>
767 </table>
768 </td>
769 </tr>
770 </table>
771 <div class="preview ">
772 <h3 class="preview-title">Example</h3>
773 <table class="basic">
774 <tr>
775 <td style="width: 50%">
776 <span class="highlight"><a href="http://www.earthli.com/​software/webcore/" title="Try out the earthli WebCore!">earthli WebCore</a></span>
777 </td>
778 <td style="font-size: 150%">→</td>
779 <td>
780 <a href="http://www.earthli.com/software/webcore/" title="Try out the earthli WebCore!">earthli WebCore</a>
781 </td>
782 </tr>
783 </table>
784 </div>
785 <h2 id="images">Images</h2>
786 <p>Images are inserted with the <span class="highlight"><img></span>
787 tag. The following list of tags are supported.</p>
788 <p class="notes">The image must already exist as a URL. Inserting an image link does not
789 magically upload a file for you.</p>
790 <table class="basic columns left-labels top">
791 <tr>
792 <th>src</th>
793 <td>The url for the image itself. Use path/resource syntax or an absolute
794 URL.</td>
795 </tr>
796 <tr>
797 <th>href</th>
798 <td>If this is non-empty, a link is automatically wrapped around the image
799 with this url. Use path/resource syntax or an absolute URL.</td>
800 </tr>
801 <tr>
802 <th>attachment</th>
803 <td>If this is non-empty, both "src" and "href" are ignored. Instead, both
804 properties are automatically generated from the attachment file name given.
805 It's up to the user to make sure the attachment is exists and is accessible.</td>
806 </tr>
807 <tr>
808 <th>scale</th>
809 <td>A percentage value, generally between 10% and 100%</td>
810 </tr>
811 <tr>
812 <th>alt</th>
813 <td>Alternate description of the image. Should be concise. Put longer
814 description in 'title', if needed. If this is not given, then the value
815 for 'title' is used.</td>
816 </tr>
817 <tr>
818 <th>format</th>
819 <td>
820 <p>This is used only in the plain-text renderer. The default value
821 is 'all'. If 'alt' is not specified, 'title' is used for the text. If a url is
822 included, 'href' is always used before 'src'.</p>
823 <table class="basic columns left-labels top">
824 <tr>
825 <th>basic</th>
826 <td>Show only the 'alt' or 'title'.</td>
827 </tr>
828 <tr>
829 <th>url</th>
830 <td>Show a url and 'alt', but no title.</td>
831 </tr>
832 <tr>
833 <th>all</th>
834 <td>Show a url, 'alt' and the title
835 (if different than 'alt' and 'alt' is non-empty).</td>
836 </tr>
837 <tr>
838 <th>none</th>
839 <td>Skip this image.</td>
840 </tr>
841 </table>
842 </td>
843 </tr>
844 </table>
845 <div class="preview">
846 <h3 class="preview-title">Example</h3>
847 <table class="basic">
848 <tr>
849 <td style="width: 50%; vertical-align: top">
850 <p>
851 <span class="highlight"><img src="{icons}/file_types/file_50px" align="right" alt="WebCore File Icon" format="basic"></span>
852 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac
853 leo accumsan, semper magna in, consectetur metus. Mauris dictum adipiscing metus
854 sed accumsan. Aenean facilisis justo lacus, et fringilla arcu luctus id. Nulla at
855 tortor at erat sagittis pellentesque.
856 </p>
857 <p>
858 <span class="highlight"><img href="http://data.earthli.com/​albums/oz/images/im000185.jpg"
859 src="http://www.earthli.com/​users/oz/images/IM000185_tn.jpg"
860 align="center" title="Ozzie in the garden"></span>
861 </p>
862 </td>
863 <td style="font-size: 150%">→</td>
864 <td>
865 <p><?php echo $Page->resolve_icon_as_html ('{icons}file_types/file', Fifty_px, 'Webcore File Icon', 'align-right'); ?>
866 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac
867 leo accumsan, semper magna in, consectetur metus. Mauris dictum adipiscing metus
868 sed accumsan. Aenean facilisis justo lacus, et fringilla arcu luctus id. Nulla at
869 tortor at erat sagittis pellentesque.</p>
870 <p class="align-center">
871 <a href="http://data.earthli.com/albums/oz/images/im000185.jpg"><img title="Ozzie in the garden" alt="Ozzie in the garden" src="http://data.earthli.com/albums/oz/images/im000185_tn.jpg"></a>
872 </p>
873 </td>
874 </tr>
875 </table>
876 </div>
877 <h2 id="videos">Videos</h2>
878 <p>Videos can be embedded just as easily as images with the
879 <span class="highlight"><media></span> tag. All of the
880 properties documented for <a href="#images">image</a> handling work exactly
881 the same for videos. You can reference local videos using the "attachment"
882 property or remote videos using a full url in the "src" property. The "href"
883 property for videos refers to the page from which the video is being retrieved
884 and is used to format the caption, as described in <a href="#attributes">standard attributes for all blocks</a>.</p>
885 <table class="basic columns left-labels top">
886 <tr>
887 <th>src</th>
888 <td>The url for the video itself. Use path/resource syntax or an absolute
889 URL. It won't always be easy to find out the source URL for videos you want to embed, depending on the site.
890 For YouTube, though, it's as easy as taking the URL for the video's page and replacing "watch?v=" with "v/".</td>
891 </tr>
892 <tr>
893 <th>height</th>
894 <td>Sets the height of the video using CSS units.</td>
895 </tr>
896 <tr>
897 <th>args</th>
898 <td>Arguments that are passed to the plugin. Needed by some non-standard video pages (e.g. Comedy Central).</td>
899 </tr>
900 </table>
901 <div class="preview ">
902 <h3 class="preview-title">Example</h3>
903 <table class="basic">
904 <tr>
905 <td style="width: 50%">
906 <span class="highlight"><media author="mvonballmo" src="http://www.youtube.com/​v/7ryCiS3RxQY" caption="A rainy day in Züri Oberland" href="http://www.youtube.com/​watch?v=7ryCiS3RxQY" source="YouTube" width="280px" height="165px"></span>
907 </td>
908 <td style="font-size: 150%">→</td>
909 <td>
910 <span style="width: 280px; display: table"><span class="auto-content-inline"><embed src="http://www.youtube.com/v/7ryCiS3RxQY" type="application/x-shockwave-flash" style="width: 280px; height: 165px"></embed></span><span class="auto-content-caption"><a href="http://www.youtube.com/watch?v=7ryCiS3RxQY">A rainy day in Züri Oberland</a> by <cite>mvonballmo</cite> (<cite><a href="http://www.youtube.com/">YouTube</a></cite>)</span></span>
911 </td>
912 </tr>
913 </table>
914 </div>
915 <h2 id="paths">Paths/resources</h2>
916 <p>As you'll see below, you can add images and links to your text really easily.
917 You don't have to use absolute urls though. You can base your url on a path
918 defined in the WebCore application by specifying a base 'location' at the start
919 of your url, like this:</p>
920 <pre><code>{icons}file_types/file_32px</code></pre>
921 <p>If you leave off the extension when referring to an icon file, the default
922 application icon extension is applied, so you get:</p>
923 <p><?php echo $Page->resolve_icon_as_html ('{icons}file_types/file', Thirty_two_px, ' '); ?></p>
924 <p>If, at some point, you move your icons, your reference to the icons folder won't
925 be broken. This works for other stuff as well, like attachments. You can refer to
926 an attachment file like this:
927 <pre><code>{att_link}my_file.zip</code></pre>
928 <p>The path to the attachments folder for the current object will be prepended for
929 you. If the attachment is an image, you can use that path as the 'src' attribute
930 of an image and it will show up in the page. Or you can use <code>{att_thumb}</code>
931 to show only the thumbnail for it.</p>
932 <p>Supported locations (you can also add your own) are:
933 <table class="basic columns left-labels top">
934 <tr>
935 <th>Alias</th>
936 <th>Description</th>
937 </tr>
938 <tr>
939 <th>application</th>
940 <td>Root url for the current application</td>
941 </tr>
942 <tr>
943 <th>icons</th>
944 <td>Location of the application icons folder</td>
945 </tr>
946 <tr>
947 <th>styles</th>
948 <td>Location of the application styles folder</td>
949 </tr>
950 <tr>
951 <th>scripts</th>
952 <td>Location of the application scripts folder</td>
953 </tr>
954 <tr>
955 <th>att_link</th>
956 <td>Location of attachments for the current object</td>
957 </tr>
958 <tr>
959 <th>att_thumb</th>
960 <td>Converts the given attachment file to thumbnail name</td>
961 </tr>
962 <tr>
963 <th>pic_image</th>
964 <td>Location of images for the current album. Accepts a picture ID or file name. Only available in earthli Albums</td>
965 </tr>
966 <tr>
967 <th>pic_thumb</th>
968 <td>Same as "pic_image", but converts to the thumbnail name. Only available in earthli Albums</td>
969 </tr>
970 </table>
971 <h1>Special</h1>
972 <h2 id="pre_text">Pre-formatted text</h2>
973 <p>Whitespace is interpreted differently by different output formats, so
974 the <span class="highlight"><pre></span> tag can be used to force
975 the formatter to use the exact whitespace you have specified.</p>
976 <div class="preview ">
977 <h3 class="preview-title">Example</h3>
978 <table class="basic">
979 <tr>
980 <td style="width: 50%">
981 <pre>
982 <span class="highlight"><pre></span>Some text
983 just
984 needs
985 to be
986 formatted
987 just...
988 ...so.<span class="highlight"></pre></span>
989 </pre>
990 </td>
991 <td style="font-size: 150%">→</td>
992 <td>
993 <pre>
994 Some text
995 just
996 needs
997 to be
998 formatted
999 just...
1000 ...so.
1001 </pre>
1002 </td>
1003 </tr>
1004 </table>
1005 </div>
1006 <h2 id="code_text">Source code</h2>
1007 <p>
1008 Use the <span class="highlight"><code></span> tag to highlight source code.
1009 This tag acts much like the <span class="highlight">pre</span> tag but applies other
1010 styles. For inline code examples, use the <span class="highlight"><c></span>
1011 tag. Text is still generally formatted the same as with the code tag, except
1012 that it doesn't force block formatting.
1013 </p>
1014 <div class="preview ">
1015 <h3 class="preview-title">Example 1</h3>
1016 <table class="basic">
1017 <tr>
1018 <td style="width: 50%">
1019 <span class="highlight"><code></span><br>
1020 function _process($input, $tokenizer)<br>
1021 {<br>
1022 $tokenizer->set_input($input);<br>
1023 while ($tokenizer->available())<br>
1024 {<br>
1025 $tokenizer->read_next();<br>
1026 $token = $tokenizer->current();<br>
1027 $this->_process($token);<br>
1028 }<br>
1029 }<span class="highlight"></code></span>
1030 </td>
1031 <td style="font-size: 150%">→</td>
1032 <td>
1033 <pre><code>function _process($input, $tokenizer)
1034 {
1035 $tokenizer->set_input($input);
1036 while ($tokenizer->available())
1037 {
1038 $tokenizer->read_next();
1039 $token = $tokenizer->current();
1040 $this->_process($token);
1041 }
1042 }</code></pre>
1043 </td>
1044 </tr>
1045 </table>
1046 </div>
1047 <div class="preview ">
1048 <h3 class="preview-title">Example 2</h3>
1049 <table class="basic">
1050 <tr>
1051 <td style="width: 40%">
1052 This example highlights the <span class="highlight"><c></span>RunProcess()<span class="highlight"></c></span> method.
1053 </td>
1054 <td style="font-size: 150%">→</td>
1055 <td>
1056 This example highlights the <code>RunProcess()</code> method.
1057 </td>
1058 </tr>
1059 </table>
1060 </div>
1061 <h2 id="quoting">Quoting</h2>
1062 <p>Often, you pull information from other sites. You can indicate this with
1063 the <span class="highlight"><iq></span> (inline quote) and <span class="highlight"><bq></span>
1064 (block quote) tags. The inline quote just applies formatting and coloring.
1065 The block quote will put the text in a separate block and indent it slightly,
1066 while also providing theme-specific coloring and formatting.</p>
1067 <p>The following attributes apply to <span class="highlight"><bq></span> tags.</p>
1068 <table class="basic columns left-labels top">
1069 <tr>
1070 <th>quote-style</th>
1071 <td>
1072 <p>The default value is 'default'. This parameter applies to both the HTML and the plain-text renderer.</p>
1073 <table class="basic columns left-labels top">
1074 <tr>
1075 <th>multiple</th>
1076 <td>Add a quote mark at the very beginning of each each contained block/paragraph and quote mark at the
1077 very of the quoted content (this is the literary quoting style).</td>
1078 </tr>
1079 <tr>
1080 <th>none</th>
1081 <td>Do not add any quote marks. Use this when surrounding quotes for lists or code examples otherwise
1082 complex, quoted content just looks confusing.</td>
1083 </tr>
1084 <tr>
1085 <th>single</th>
1086 <td>Add a quote mark at the very beginning and very end of the quoted content.</td>
1087 </tr>
1088 <tr>
1089 <th>default</th>
1090 <td>A synonym for multiple.</td>
1091 </tr>
1092 </table>
1093 </td>
1094 </tr>
1095 </table>
1096 <div class="preview">
1097 <h3 class="preview-title">Example 1</h3>
1098 <table class="basic">
1099 <tr>
1100 <td style="width: 50%">
1101 As Mark Twain once said, <span class="highlight"><iq></span>A banker is a fellow who lends you
1102 his umbrella when the sun is shining, but wants it back the minute it
1103 begins to rain.<span class="highlight"></iq></span>.
1104 </td>
1105 <td style="font-size: 150%">→</td>
1106 <td>
1107 As Mark Twain once said, <span class="quote-inline">"A banker is a fellow
1108 who lends you his umbrella when the sun is shining, but wants it back
1109 the minute it begins to rain."</span>
1110 </td>
1111 </tr>
1112 </table>
1113 </div>
1114 <div class="preview">
1115 <h3 class="preview-title">Example 2</h3>
1116 <table class="basic">
1117 <tr>
1118 <td style="width: 50%">
1119 As Mark Twain once said, <span class="highlight"><bq></span>A banker is a fellow who lends you
1120 his umbrella when the sun is shining, but wants it back the minute it
1121 begins to rain.<span class="highlight"></bq></span>
1122 </td>
1123 <td style="font-size: 150%">→</td>
1124 <td>
1125 <p>As Mark Twain once said,</p>
1126 <div class="quote-block"><p>"A banker is a fellow who lends you his umbrella
1127 when the sun is shining, but wants it back the minute it begins to rain."</p></div>
1128 </td>
1129 </tr>
1130 </table>
1131 </div>
1132 <div class="preview">
1133 <h3 class="preview-title">Example 3</h3>
1134 <table class="basic">
1135 <tr>
1136 <td style="width: 50%">
1137 <p>As Mark Twain once said, <span class="highlight"><bq quote-style="multiple"></span>A banker is a fellow who</p>
1138 <p>lends you his umbrella when the sun is shining,</p>
1139 <p>but wants it back the minute it begins to rain.<span class="highlight"></bq></span></p>
1140 </td>
1141 <td style="font-size: 150%">→</td>
1142 <td>
1143 <p>As Mark Twain once said,</p>
1144 <div class="quote-block">
1145 <p>"A banker is a fellow who</p>
1146 <p>"lends you his umbrella when the sun is shining,</p>
1147 <p>"but wants it back the minute it begins to rain."</p>
1148 </div>
1149 </td>
1150 </tr>
1151 </table>
1152 </div>
1153 <h2 id="notes">Notes</h2>
1154 <p>The <span class="highlight"><n></span>
1155 tag uses a smaller font and is generally in italics to indicate that
1156 the text is supplemental or tangential. In the HTML formatter, this
1157 translates to the 'notes' CSS style. It is ignored in the plain-text formatter.</p>
1158 <div class="preview">
1159 <h3 class="preview-title">Example</h3>
1160 <table class="basic">
1161 <tr>
1162 <td style="width: 50%">
1163 <p><span class="highlight"><n></span>N.B. The following text is of draft quality.<span class="highlight"></n></span></p>
1164 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac
1165 leo accumsan, semper magna in, consectetur metus.</p>
1166 </td>
1167 <td style="font-size: 150%">→</td>
1168 <td>
1169 <p><span class="notes">N.B. The following text is of draft quality.</span></p>
1170 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac
1171 leo accumsan, semper magna in, consectetur metus.</p>
1172 </td>
1173 </tr>
1174 </table>
1175 </div>
1176 <h2 id="abstract">Abstract</h2>
1177 <p>Use the <span class="highlight"><abstract></span>
1178 tag at the beginning of longer articles to provide a synopsis or a
1179 <abbr title="too long; didn't read">tl;dr</abbr>. In the HTML formatter, this
1180 translates to the 'abstract' CSS style. It is ignored in the plain-text formatter.</p>
1181 <p>The <span class="highlight"><quote-style></span> attribute (see <a href="#quoting">quoting</a> above)
1182 applies this tag as well, but the default value is <span class="highlight">none</span>.</p>
1183 <div class="preview">
1184 <h3 class="preview-title">Example</h3>
1185 <table class="basic">
1186 <tr>
1187 <td style="width: 50%">
1188 <span class="highlight"><abstract></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac
1189 leo accumsan, semper magna in, consectetur metus. Mauris dictum adipiscing metus
1190 sed accumsan. Aenean facilisis justo lacus, et fringilla arcu luctus id. Nulla at
1191 tortor at erat sagittis pellentesque.<span class="highlight"></abstract></span>
1192 </td>
1193 <td style="font-size: 150%">→</td>
1194 <td>
1195 <p class="abstract">
1196 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac
1197 leo accumsan, semper magna in, consectetur metus. Mauris dictum adipiscing metus
1198 sed accumsan. Aenean facilisis justo lacus, et fringilla arcu luctus id. Nulla at
1199 tortor at erat sagittis pellentesque.
1200 </p>
1201 </td>
1202 </tr>
1203 </table>
1204 </div>
1205 <h2 id="pullquotes">Pull quotes</h2>
1206 <p>Use the <span class="highlight"><pullquote></span>
1207 tag throughout longer articles to highlight . In the HTML formatter, this
1208 translates to the 'abstract' CSS style. It is ignored in the plain-text formatter.</p>
1209 <p>The <span class="highlight"><quote-style></span> attribute (see <a href="#quoting">quoting</a> above)
1210 applies to this tag as well, but the default value is <span class="highlight">none</span>.</p>
1211 <div class="preview">
1212 <h3 class="preview-title">Example</h3>
1213 <table class="basic">
1214 <tr>
1215 <td style="width: 50%">
1216 <p><span class="highlight"><pullquote width="150px" align="right"></span>Mauris dictum adipiscing metus
1217 sed accumsan<span class="highlight"></pullquote></span> Lorem ipsum dolor
1218 sit amet, consectetur adipiscing elit. Nunc ac
1219 leo accumsan, semper magna in, consectetur metus. Mauris dictum adipiscing metus
1220 sed accumsan. Aenean facilisis justo lacus, et fringilla arcu luctus id. Nulla at
1221 tortor at erat sagittis pellentesque.</p>
1222 </td>
1223 <td style="font-size: 150%">→</td>
1224 <td>
1225 <blockquote class="quote pullquote right align-right" style="width: 150px"><div>Mauris dictum adipiscing metus
1226 sed accumsan</div></blockquote>
1227 <p>
1228 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac
1229 leo accumsan, semper magna in, consectetur metus. Mauris dictum adipiscing metus
1230 sed accumsan. Aenean facilisis justo lacus, et fringilla arcu luctus id. Nulla at
1231 tortor at erat sagittis pellentesque.
1232 </p>
1233 </td>
1234 </tr>
1235 </table>
1236 </div>
1237 <h2 id="boxes">Boxes</h2>
1238 <p>When formatting code or larger quoted samples, it's nice to be able box
1239 the content out. Use the <span class="highlight"><box></span> tag
1240 for this, with the following (optional) attributes:</p>
1241 <table class="basic columns left-labels top">
1242 <tr>
1243 <th>title</th>
1244 <td>Float the image to the left,
1245 with text wrapped around to the right.</td>
1246 </tr>
1247 <tr>
1248 <th>align</th>
1249 <td>
1250 <p>The default value is 'none'. This parameter is ignored in the plain-text renderer.</p>
1251 <table class="basic columns left-labels top">
1252 <tr>
1253 <th>left</th>
1254 <td>Float the box to the left,
1255 with text wrapped around to the right.</td>
1256 </tr>
1257 <tr>
1258 <th>right</th>
1259 <td>Float the box to the right,
1260 with text wrapped around to the left.</td>
1261 </tr>
1262 <tr>
1263 <th>center</th>
1264 <td>Box is centered in its own block. Text is split, with the flow continuing after the image.</td>
1265 </tr>
1266 <tr>
1267 <th>none</th>
1268 <td>Box is formatted inline with the text.</td>
1269 </tr>
1270 </table>
1271 </td>
1272 </tr>
1273 <tr>
1274 <th>width</th>
1275 <td>If you specify a left or right alignment, you will probably want to
1276 specify a width as well. This attribute accepts all CSS values.</td>
1277 </tr>
1278 <tr>
1279 <th>class</th>
1280 <td>This will assign the specified CSS class to the innermost generated
1281 container (affecting the box's content).</td>
1282 </tr>
1283 </table>
1284 <div class="preview">
1285 <h3 class="preview-title">Example 1</h3>
1286 <table class="basic">
1287 <tr>
1288 <td style="width: 50%">
1289 <span class="highlight"><box title="Listing One"><code></span><br>
1290 function _process($input, $tokenizer)<br>
1291 {<br>
1292 $tokenizer->set_input($input);<br>
1293 while ($tokenizer->available())<br>
1294 {<br>
1295 $tokenizer->read_next();<br>
1296 $token = $tokenizer->current();<br>
1297 $this->_process($token);<br>
1298 }<br>
1299 }<span class="highlight"></code><box></span>
1300 </td>
1301 <td style="font-size: 150%">→</td>
1302 <td>
1303 <div class="chart"><div class="chart-title">Listing One</div>
1304 <div class="chart-body">
1305 <pre><code>function _process($input, $tokenizer)
1306 {
1307 $tokenizer->set_input($input);
1308 while ($tokenizer->available())
1309 {
1310 $tokenizer->read_next();
1311 $token = $tokenizer->current();
1312 $this->_process($token);
1313 }
1314 }</code></pre>
1315 </div>
1316 </div>
1317 </td>
1318 </tr>
1319 </table>
1320 </div>
1321 <h2 id="messages">Messages</h2>
1322 <p>Use the <span class="highlight"><info></span>, <span class="highlight"><warning></span> or
1323 <span class="highlight"><error></span> tag to show a message box with some content.</p>
1324 <div class="preview">
1325 <h3 class="preview-title">Example</h3>
1326 <table class="basic">
1327 <tr>
1328 <td style="width: 50%">
1329 <p><span class="highlight"><info></span>This is an info message.<span class="highlight"></info></span></p>
1330 <p><span class="highlight"><warning></span>This is a warning message.<span class="highlight"></warning></span></p>
1331 <p><span class="highlight"><error></span>This is an error message.<span class="highlight"></error></span></p>
1332 </td>
1333 <td style="font-size: 150%">→</td>
1334 <td>
1335 <?php $Page->show_message('This is an info message.', 'info')?>
1336 <?php $Page->show_message('This is a warning message.', 'warning')?>
1337 <?php $Page->show_message('This is an error message.', 'error')?>
1338 </td>
1339 </tr>
1340 </table>
1341 </div>
1342 <h2 id="footnotes">Footnotes</h2>
1343 <p>Longer texts can include footnotes and end-notes by placing markers with the
1344 <span class="highlight"><fn></span> tag. These are replaced with integer markers (e.g. 1, 2, 3, etc.).
1345 Use the <span class="highlight"><ft></span> tag to create a block that forms the body of the footnote.
1346 These are also numbered incrementally. Footnotes can be placed anywhere in the text, but are commonly
1347 included at the end, separated by a horizontal rule, as shown in the example below.</p>
1348 <div class="preview">
1349 <h3 class="preview-title">Example</h3>
1350 <table class="basic">
1351 <tr>
1352 <td style="width: 50%">
1353 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac
1354 leo accumsan, semper magna in, consectetur metus. Mauris dictum adipiscing metus
1355 sed accumsan. Aenean facilisis justo lacus<span class="highlight"><fn></span>,
1356 et fringilla arcu luctus id. Nulla at tortor at erat sagittis pellentesque.</p>
1357 <p><span class="highlight"><hr></span></p>
1358 <p><span class="highlight"><ft></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac
1359 leo accumsan, semper magna in, consectetur metus. Mauris dictum adipiscing metus
1360 sed accumsan.<span class="highlight"></ft></span></p>
1361 </td>
1362 <td style="font-size: 150%">→</td>
1363 <td>
1364 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac
1365 leo accumsan, semper magna in, consectetur metus. Mauris dictum adipiscing metus
1366 sed accumsan. Aenean facilisis justo lacus
1367 <a href="#footnote_body" id="footnote_ref" class="footnote-number" title="Jump to footnote.">[1]</a>,
1368 et fringilla arcu luctus id. Nulla at
1369 tortor at erat sagittis pellentesque.
1370 </p>
1371 <hr>
1372 <div class="footnote-reference"><span id="footnote_body" class="footnote-number">[1]</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac
1373 leo accumsan, semper magna in, consectetur metus. Mauris dictum adipiscing metus
1374 sed accumsan.<a href="#footnote_ref" class="footnote-return" title="Jump back to reference.">↩</a></div>
1375 </td>
1376 </tr>
1377 </table>
1378 </div>
1379 <h2 id="clear">Clearing floats</h2>
1380 <p>Use a <span class="highlight"><clear></span> tag to clear any floating element in the preceding text. You can
1381 also use the attribute <span class="highlight">clear="both"</span> on any block to do the same thing, but this tag lets
1382 you avoid surrounding a paragraph with <span class="highlight"><div></span> tags, as shown in the example below.</p>
1383 <div class="preview">
1384 <h3 class="preview-title">Example</h3>
1385 <table class="basic">
1386 <tr>
1387 <td style="width: 50%">
1388 <p><span class="highlight"><box align="right" width="100px"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac
1389 leo accumsan, semper magna in...<span class="highlight"></box></span></p>
1390 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
1391 <p><span class="highlight"><clear></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac
1392 leo accumsan, semper magna in...</p>
1393 </td>
1394 <td style="font-size: 150%">→</td>
1395 <td>
1396 <div class="chart align-right" style="width: 100px">
1397 <div class="chart-body">
1398 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac
1399 leo accumsan, semper magna in...</p>
1400 </div>
1401 </div>
1402 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
1403 <p class="clear-both">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac
1404 leo accumsan, semper magna in...</p>
1405 </td>
1406 </tr>
1407 </table>
1408 </div>
1409 <h2 id="anchors">Anchors</h2>
1410 <p>Use an <span class="highlight"><anchor></span> tag to provide an invisible anchor in the text to which you can link
1411 with an <span class="highlight"><a></span> tag. You can also use the attribute
1412 <span class="highlight">id</span> on any other tag to do the same thing, but this tag lets
1413 you avoid adding unnecessary begin/end tags, as shown in the example below.</p>
1414 <div class="preview">
1415 <h3 class="preview-title">Example</h3>
1416 <table class="basic">
1417 <tr>
1418 <td style="width: 50%">
1419 <p><span class="highlight"><a href="#anchor1"></span>Jump to the anchor<span class="highlight"></a></span></p>
1420 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac
1421 leo accumsan, semper magna in, consectetur metus. Mauris dictum adipiscing metus
1422 sed accumsan. Aenean facilisis justo lacus, et fringilla arcu luctus id. Nulla at
1423 tortor at erat sagittis pellentesque.<span class="highlight"><anchor id="anchor1"></span></p>
1424 </td>
1425 <td style="font-size: 150%">→</td>
1426 <td>
1427 <p><a href="#anchor1">Jump to the anchor</a></p>
1428 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac
1429 leo accumsan, semper magna in, consectetur metus. Mauris dictum adipiscing metus
1430 sed accumsan. Aenean facilisis justo lacus, et fringilla arcu luctus id. Nulla at
1431 tortor at erat sagittis pellentesque.<span id="anchor1"></span></p>
1432 </td>
1433 </tr>
1434 </table>
1435 </div>
1436 <h2 id="rules">Rules</h2>
1437 <p>Use an <span class="highlight"><hr></span> tag to introduce a break in the text.</p>
1438 <div class="preview">
1439 <h3 class="preview-title">Example</h3>
1440 <table class="basic">
1441 <tr>
1442 <td style="width: 50%">
1443 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac
1444 leo accumsan, semper magna in...</p>
1445 <p><span class="highlight"><hr></span></p>
1446 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac
1447 leo accumsan, semper magna in...</p>
1448 </td>
1449 <td style="font-size: 150%">→</td>
1450 <td>
1451 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac
1452 leo accumsan, semper magna in...
1453 </p>
1454 <hr>
1455 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac
1456 leo accumsan, semper magna in...</p>
1457 </td>
1458 </tr>
1459 </table>
1460 </div>
1461 <h1>Advanced</h1>
1462 <h2 id="macro">Controlling the formatter</h2>
1463 <p>As discussed in <a href="#characters">special characters</a>, you can control
1464 which types of character replacement occur within a block of text. The
1465 <span class="highlight"><macro></span> tag applies options, which
1466 apply for the rest of the text or until they are changed by a subsequent
1467 macro.</p>
1468 <p>The following properties are supported:</p>
1469 <h3>convert</h3>
1470 <p>Pass in a comma-delimited list of converters, which should be active. Use
1471 a plus (+) sign to enable a converter and a minus (-) sign to disable it.
1472 If no sign is present, it is assumed to be enabling the converter. The
1473 converters in the list are applied in order and can overwrite one another.
1474 Choose from the following converters:</p>
1475 <table class="basic columns left-labels top">
1476 <tr>
1477 <th>punctuation</th>
1478 <td>If enabled, punctuation marks are replaced with their fancier HTML equivalents. <em>enabled by default</em></td>
1479 </tr>
1480 <tr>
1481 <th>ligature</th>
1482 <td>If enabled, ligatures are replaced with their fancier HTML equivalents. <em>disabled by default</em></td>
1483 </tr>
1484 <tr>
1485 <th>tags</th>
1486 <td>If enabled, special html characters are converted to
1487 avoid being interpreted as HTML. The keyword "all" does not apply to this
1488 converter; you must explicitly toggle it if you want to change the setting.
1489 <em>enabled by default</em></td>
1490 </tr>
1491 <tr>
1492 <th>highlight</th>
1493 <td>If enabled, keywords from a search are
1494 highlighted within the text. <em>enabled by default</em></td>
1495 </tr>
1496 <tr>
1497 <th>all</th>
1498 <td>Applies to all converters except for "tags"</td>
1499 </tr>
1500 </table>
1501 <p>The following examples enable ligatures:</p>
1502 <div class="preview">
1503 <h3 class="preview-title">Example 1</h3>
1504 <span class="highlight"><macro convert="ligature"></span> or <span class="highlight"><macro convert="+ligature"></span>
1505 </div>
1506 <p>The following examples turn off everything but highlighting:</p>
1507 <div class="preview">
1508 <h3 class="preview-title">Example 2</h3>
1509 <span class="highlight"><macro convert="-ligature,-punctuation"></span>
1510 <p>or</p>
1511 <span class="highlight"><macro convert="-all;+highlight"></span>
1512 </div>
1513 <p>The following example makes sure that all converters are turned on:</p>
1514 <div class="preview">
1515 <h3 class="preview-title">Example 3</h3>
1516 <span class="highlight"><macro convert="+all"></span>
1517 </div>
1518 </div>
1519 </div>
1520 </div>
1521 <?php
1522 $Page->finish_display ();
1523 ?>
1524