←/Esc = Close
↓/↑ = Select
Pg↑/Pg↓ = Arrange
→/Enter = Go
Or just enter a search query.
←/→ = Seek
Enter = Volume
Welcome to PowerLeafSolid
<div style=text-align:center><span id=SP_dlia></span>(:::Molaskes.info/PLS:)<span id=SP_dlib></span></div> ----- <em>PowerLeafSolid</em> (or <em>PLS</em> for short) is a PHP‑based renderer for <b>deluxe single‑file HTML projects</b>, such as <b>e‑books</b> in <b>full HTML5 and CSS3</b>, with <b>optimized design</b> and <b>deluxe usability</b>. Some of its <b>highlights</b> are: <ul><li>very <b>easy markup</b> (besides HTML)</li><li>integrated <b>MP3 player</b></li><li>full <em>Eas</em> (Easy Application Script) support</li><li>very <b>customizable</b> (design and locale)</li><li>duly tested to be <b>ultra fast, safe, and robust</b></li></ul> It is a <b>freeware open‑source</b> product by (:Molaskes::Molaskes.info:), and can be used quite freely <pre>(see the (:Licence:))</pre> by anybody who has at least semi‑professional experience in web development <pre>(see (:Prerequisites:)).</pre> <b>The document you are viewing</b> here serves three purposes: <ol><li>it is your <b>introduction to <em>PLS</em></b></li><li>it is the <b>manual of <em>PLS</em></b></li><li>it <b>showcases 100 % <em>PLS</em></b> (being entirely produced in <em>PLS</em>)</li></ol> Go to the <b>next page</b> by either pressing <kbd>→</kbd> on your keyboard or clicking the key button in the bottom right corner of this window (or click the <b>icon</b> in the top left corner). There you will find the <b>main Table of Contents</b>. <hr> — Or check out the following <b>demos</b> first: 1. All <b>pictures</b> have <b>captions</b>: (:A photo from Switzerland::demopic.jpg:) 2. An <b>MP3 player</b>: (:Welcome to PowerLeafSolid! ::welcome.mp3:) (The music in above sample is from (:Globkunst: "Dirty Boxes"::Molaskes.bandcamp.com/track/dirty-boxes:).) 3. You can have <b>several MP3 players</b> on a page: (:Defenders of the Samurai Castle::dotsca.mp3:) (Above is a sample from an (:Iteki-San UC track::Molaskes.bandcamp.com/track/defenders-of-the-samurai-castle:).) 4. You can include <b>source code</b> examples: ::::: 5. You can program <b>animations</b> (and even <b>applications</b>): -----
["# a PHP example:\nfunction CountLetter($t,$l){\n $o=\"\";\n $c=0;\n for($i=0;$i<strlen($t);$i++){\n $o.=$t[$i]==$l?++$c:$t[$i];\n }\n return$o;\n}\n::\n-- the same in Eas:\nCountLetter t l:\n @@t\n ?@=l\n c+\n o;c\n \\\n o;@\n \/\n \/\n <<o\n\/"]
[[0,0,0,"1\/15",0,"#fb0"],[0,"600","400","1\/30",0,"#fi1"]]
Table of Contents
0
Understand the Luxury of PLS
This whole website here is a <b>single HTML file</b>. You can <b>download it as a single file</b>: all sub‑pages, pictures, MP3 audio files, download options and so on are integrated into it. — It has been <b>created with</b> <em>PLS</em>. As a web developer who can run <em>PHP</em> scripts, for instance in <em>XAMPP</em>, or at least on an online web server, you can <b>create your own</b> <b>single‑file projects</b> with <u><b>free and open‑source</b></u> <em>PowerLeafSolid</em> (aka <em>PLS</em>) that work like <b>state‑of‑the‑art</b> <b>e‑books</b>. <em>PLS</em> generates a <b>perfect user experience</b> for your readers with <ul><li>an easy‑to‑read and aesthetic <b>text layout</b></li><li><b>easy navigation</b> by <b>keyboard or mouse</b></li><li><b>leafing through the pages</b> as with a book (using the+<kbd>←</kbd>+and+<kbd>→</kbd>+keys)</li><li><b>easy searching</b> (with leafing, highlighting, and auto‑scrolling)</li><li><b>intelligent tables of contents</b> (with a main TOC and sub‑chapter TOCs)</li><li>per‑document <b>comfortable bookmarks</b></li><li><b>remembering</b> where you left the document<br>in your previous session (<b>auto‑bookmark</b>)</li></ul> and much more, such as <ul><li>a fully adaptive <b>intelligent user interface</b></li><li>a <b>rapidly responding</b> website with full caching of anything once rendered</li><li><b>integrated handy MP3 players</b></li><li>aesthetic <b>pictures</b> placement, and all pictures with a <b>proper caption</b></li><li><b>dynamic content</b>, <b>animations</b>, and <b>interactive appliocations</b></li></ul> And <b>for your convenience</b> as a <b>web developer</b> or <b>content editor</b> <ul><li>a <b>highly comfortable markup</b> syntax</li><li>writing <b>pages</b> simply as <b>text files</b> with any editor you prefer</li><li>managing <b>chapters</b> simply as <b>directories</b> on your file system</li><li><b>auto-embedding</b> any files you place in the <code>/files</code> sub-folder,<br>including a <b>favicon</b> and <b>fontfaces</b></li><li>highly <b>customizable</b> without compromising the user experience</li><li><b>program</b> dynamic content and even applications<br>with <b>ultra‑efficient and powerful</b> <em>Eas</em> (Easy Application Script)</li></ul> I wish you lots of succes with <em>PowerLeafSolid</em>! <i>— Molaskes, July 2023</i>
Contact and Support
If you have a question about, or problem with, <em>PLS</em>, and this whole <b>manual and tutorial</b> here and the <code>PLS ReadMe.txt</code> file (included in the download) do not help you enough, contact the author by writing an email to <code>email%Molaskes?info</code> (replace %→@ and ?→.). The author uses <em>PLS</em> himself a lot and is highly interested in that it always works perfectly. Because he is usually very busy with other creative projects, he may not be able to react quickly, but will definitely reply within a few days.
Licence
<em>PowerLeafSolid</em> (aka <em>PLS</em> for short) is <b>open‑source freeware</b> and <b>you can</b> <b>use it freely</b>, also for commercial projects, except for <b>two limitations</b>: <ol><li>You shall not sell <em>PLS</em>.</li><li>You shall not claim <em>PLS</em> was developed by yourself<br>or anybody else but Molaskes.</li></ol> That's the whole licence.
Getting Started
7
Prerequisites
To be able to use <em>PowerLeafSolid</em>, besides a standard web browser <b>you need</b> three things: <ol><li>to be able to run <em>PHP</em> scripts,<br>for instance by a local <em>XAMPP</em> server (recommended)<br>or at least (via FTP) on an online web server (inconvenient)</li><li>read, understand and accept the (:Licence:)</li><li>download and unpack the ZIP file from (:Download PLS:)</li></ol> In addition, <b>you should</b> <ul><li>follow the instructions in the <code>PLS ReadMe.txt</code> file<br>that is included in the download,<br>and/or read this whole <b>manual</b> here</li><li>know or learn <em>HTML</em> (ideally HTML5)</li><li>know or learn <em>CSS</em> (ideally CSS3)</li></ul> And to <b>program dynamic content</b> and <b>applications</b>, you need to <ul><li>know how to program, which you can learn here:<br>(:Learning Programming with Eas::Molaskes.info/Eas-Tutorial:)</li><li>know <em>Eas</em> (Easy Application Script), which you can learn here:<br>(:Eas Documentation::Molaskes.info/Eas:).</li></ul> <u>Extra Tip</u>: Should you be a <b>total beginner</b> but still really want to get started with developing digital content projects, go to (:W3Schools::w3schools.com:) where you can learn the bascis of pretty much everything in the field.
Download PLS
<div style=text-align:center><span id=SP_dlia></span>(:::Molaskes.info/PLS:)<span id=SP_dlib></span></div> ----- <div class=cbl>Now <b>download</b> (:::PowerLeafSolid.zip:) which <b>contains</b> the following four files: <ol><li><code>Eas.js</code><br>= the <em>Eas</em> <em>4B</em> engine written in plain <em>JavaScript</em><br>see the (:official Eas website::Molaskes.info/Eas:)</li> <li><code>PLSbake.php</code><br>= the <em>PLS</em> <b>renderer</b> active <em>PHP</em> script</li> <li><code>PLSengine</code> (having no file extesion)<br>= the <em>PLS</em> <b>template</b> in <em>Eas</em>, <em>HTML5</em>, and <em>CSS3</em></li> <li><code>PLS ReadMe.txt</code><br>= a <b>compact</b> <em>PLS</em> <b>manual</b> in plain‑text format</li></ol> and then follow the instructions on the following pages.
[[0,0,0,"1\/15",0,"#fb0"]]
Install and Run PLS
<b>Unzip</b> the file you downloaded from (:Download PLS:) and save the files it contained in a <b>project directory</b> of your <em>PHP </em><b>server</b> (e.g. your <em>XAMPP</em> localhost root). Here we will call it <code>MyProject</code> as an example. Then run the <code>PLSbake.php</code> script in your web browser, such as from the URL <code>localhost/MyProject/PLSbake.php</code>. It will display a plain‑text‑like <b>message</b> asking you to enter a <i>target path</i> in an <code>ALL_SETTINGS</code> file in your <i>project root</i>. We will discuss this on the <b>next page</b>. When you check your <b>project directory</b> now, you will see that <code>PLSbake.php</code> has <b>created</b> a few things there for you: <ol><li><code>/files</code><br>= a directory for any <b>files</b> you want <b>to embed</b> in your project</li> <li><code>/pages</code><br>= the directory wherein you will create your <pre><b>pages</b> and <b>chapters</b></pre></li> <li><code>ALL_SETTINGS</code><br>= a plain‑text file with the <b>main settings</b> for your project</li> <li><code>alt.txt</code><br>= a plain‑text file with all the <b>user interface texts</b> and <b>locale settings</b></li></ol> We will discuss all of them in the upcoming pages and chapters.
The ALL_SETTINGS File
Go to your <b>project root</b> directory and open the <code>ALL_SETTINGS</code> file in a <b>text editor</b>. Initially, it will look like this: ::::: Now <b>edit it</b>, keeping <i>its structure</i> intact: <ul><li><b>line 1</b> will show in <b>web browser tab titles</b></li><li><b>line 2</b> will become the <b>main headline</b> on top</li> <li><b>line 3</b> will go in the HTML <code><!--comment--></code><br>between <code><!DOCTYPE HTML></code> and <code><html lang=en><head></code><br>(you can change the language in the <code>alt.txt</code> file of course)</li> <li><b>line 4</b> sets your <b>output file path</b> (usually <code>*.htm</code>)</li><li><b>line 5</b> will go in the HTML <code><!--comment--></code> as well</li> <li><b>line 6</b> expects single-space-separated <b>three CSS colors</b><br>in the format <code>#RGB</code> (Red Green Blue, each one‑digit hex);<br>anything behind them (after a space) will be ignored<ul><li>the <b>first color</b> is the <b>top bar/main headline background</b></li><li>the <b>second color</b> is the <b>initial</b> <b>main headline text color</b></li><li>the <b>third color</b> is the <b>main headline text color</b><br>when the top bar has <b>faded</b> after a few minutes</li></ul></li> <li>any lines <b>after line 6</b> must be <em>Eas</em> code (can include <b>blank lines</b>) and should provide <em>Eas</em> <em>DRAW'</em> calls to <b>render the main logo</b> in the top‑left corner of the page</li></ul> For this document here <b>for example</b>, it looks as follows (not showing here the full background shading for layout reasons): ::::: There is a much simpler way, though, to set up (:Your Logo:), as we will discuss on the next page.
["Your Project's Tabs Title\nYour Project's Top Headline\nby Firstname Lastname\ntargetpath.htm\nyour project's long name or short description\n#FFF #000 #555 (#RGB H1bgcol H1litcol H1offcol)\n-- enter Eas DRAW' code here for rendering your logo\n-- do not include the DRAW'TO line\n-- below is just an example:\nDRAW'PEN:5\nDRAW'BALL!\n-- you could also DRAW'COPY:\"#name.ext\"&&0\n-- any image file you include in \/files","PLS\nPowerLeafSolid (PLS)\nby Molaskes\npub\/PLS.htm\na one-solid-deluxe-HTML-file renderer\n#000 #FD6 #980\n\nDRAW'HERE:-50 -50 100 100\nDRAW'PEN:0\nDRAW'FILL:\"#0\"\nDRAW'BOX!\nDRAW'FILL:\"#FA\" \"#FD63\" {...} \"#FD60\" -45 45\nDRAW'BOX!\nDRAW'HERE!\nDRAW'LAYER!\nDRAW'FILL:\"#980\"\nDRAW'TEXT:\"PLS\" 0 -15 & \"monospace\" \"b\"\nDRAW'GLASSIFY!\nDRAW'GROW!\nDRAW'OUTLINE!\nDRAW'SHADOW!\nDRAW'MERGE!\nDRAW'GLASSIFY:1 0 33\nDRAW'LAYER!\nDRAW'FILL:\"#0\" \"#FD6\" \"#0\"\nDRAW'RING:0 0 93 103\nDRAW'CARBONIZE!"]
Your Logo
In (:The ALL_SETTINGS File:) you can define your logo (shown in the top‑left corner of the document). Besides <b>programming</b> your logo with <em>Eas</em> <em>DRAW'</em> commands (never including the final <em>DRAW'TO:</em> though), there is a <b>much easier way</b>: Simply put your logo as a <b>picture file</b> (e.g. <code>*.png</code> or <code>*.jpg</code>) in the <code>/files</code> directory under your projet root and <em>DRAW'COPY:</em> it in the <code>ALL_SETTINGS</code> file. Let's assume as an <b>example</b> that you have your logo as a file <code>MyLogo.png</code>. In the <code>ALL_SETTINGS</code> file, now simply write <b>below line 6</b>: ::::: and you are set. (Don't forget the <code>#</code> before the filename!) <u>Notice 1:</u> The <code>&&0</code> sequence ensures that your logo fills the entire <b>logo circle</b> of <em>PLS</em>. <u>Notice 2:</u> If you have a <b>square logo</b>, you could also simply write: ::::: — but non-square logos would be distorted this way. <u>Tip</u>: You will probably also want to (:Have a Favicon:).
["DRAW'COPY:\"#MyFile.png\"&&0","DRAW'FROM:\"#MyFile.png\""]
Creating Pages
Any pages of your project go into the <code>/pages</code> directory under your project root. Just create a new file in your <b>text editor</b>, write a few lines, and save it in the <code>/pages</code> directory, and then open (or refresh) your project in your web browser running <em>PHP</em> (e.g. via <em>XAMPP</em>). We will discuss (:Markup Basics:) soon, but you should see your first page more or less as you wrote it, but now in the web browser and with all the <em>PLS</em> galore around it. There is even already the <b>main Table of Contents</b> available. Notice that the <b>whole filename</b> will become <b>the page's title</b>, so normally you don't want file extentions (such as <code>*.txt</code>). The <b>ordering</b> of your pages will be determined by alphanumerically sorting the <b>filenames</b>. However, you can <b>prefix</b> your filenames with <b>decimal digits</b> followed by a space. All that will be <b>stripped for the titles</b>, but is perfect for defining the order in which your pages shall appear. (And after the prefix, the title can of course start wwith a digit.) The <b>main Table of Contents</b> (aka <b>main TOC</b>) will always be inserted as the <b>second page</b> in the final document. Your <b>first page</b> has a special role: it serves as the <b>welcome page</b> and cannot be <em>PLS</em>‑bookmarked by the readers (neither can the main TOC).
Chapters
You can not only have <b>text files</b> for your <b>pages</b> in the <code>/pages</code> directory, but you can also create <b>sub‑directories</b> there and fill them with further page text files — and sub‑directories again, with <b>unlimited nesting</b> for as many <b>chapter levels</b> as you want. Each <b>directory</b> (unless it is completely empty) will become a <b>chapter</b>, shown as a <b>table of contents</b> for quick navigation. Notice that unlike in your file system, the files (<b>pages</b>) will always be <b>listed first</b> in the tables of contents, and only then come the directories (<b>sub‑chapters</b>). Don't worry about <b>duplicate page titles</b>: <em>PLS</em> will automatically display them as <code>Chapter Title: Page Title</code> in all tables of contents, and create <b>unique URLs</b> for them accordingly.
Markup Basics
11
HTML and CSS
In your pages, you can use any <em>HTML</em> body‑level <code><tags></code> and <em>HTML</em> <code>&entities;</code>. (Notice though that <em>JavaScript</em> <code><script>...</script></code> blocks will <b><u>not</u> be executed</b>.) And you can <em>CSS</em>‑style <em>HTML</em> tags of course via the <code>style=</code> attribute. (<b>Advanced users</b> can also define (:Project-Wide CSS:).) If you want to <b>disable <em>HTML</em> tags or entities</b>, for instance in order to show them as text for your readers, just <b>add a</b> <em>comma</em> after the <code><</code> or <code>&</code>. <u>Examples</u>: <ul><li><code>This is <u>great</u> stuff!</code> → This is <u>great</u> stuff!</li><li><code>This is <,u>great<,/u> stuff!</code> → This is <u>great</u> stuff!</li><li><code>I &hearts; that!</code> → I ♥ that!</li><li><code>I &,hearts; that!</code> → I &hearts; that!</li></ul> However, for most content‑writing tasks, <em>PLS</em> offers <b>much more comfortable</b> markup options than <em>HTML</em>, which will be explained in the following pages.
Text Styling
<em>PLS</em> offers easy markup for the following text styles:<table><tr><td><em>!</em></td><td><b>bold</b></td></tr><tr><td><em>/</em></td><td><i>italic</i></td></tr><tr><td><em>_</em></td><td><u>underlined</u></td></tr><tr><td><em>*</em></td><td><s>red</s></td></tr><tr><td><em>#</em></td><td><code>code</code></td></tr><tr><td><em>@</em></td><td><em>keyword</em></td></tr></table>Place any of these <b>styling marks</b> <i>immediately</i> <b>before a word</b> to style this word only:<table><tr><td><code>a !bold word</code> →</td><td>a <b>bold</b> word</td></tr><tr><td><code>an /italic word</code> →</td><td>an <i>italic</i> word</td></tr><tr><td><code>an _underlined word</code> →</td><td>an <u>underlined</u> word</td></tr><tr><td><code>a *red word</code> →</td><td>a <s>red</s> word</td></tr><tr><td><code>a #code word</code> →</td><td>a <code>code</code> word</td></tr><tr><td><code>a @keyword here</code> →</td><td>a <em>keyword</em> here</td></tr></table>The four styles <em>!</em>, <em>/</em>, <em>_</em>, and <em>*</em> will also work for whole <b>quoted phrases</b> <b>or passages</b>, including or excluding the quote marks:<table><tr><td><code>a !"mini phrase" here</code> →</td><td>a <b>"mini phrase"</b> here</td></tr><tr><td><code>a "!mini phrase" here</code> →</td><td>a "<b>mini phrase</b>" here</td></tr><tr><td><code>a /"mini phrase" here</code> →</td><td>a <i>"mini phrase"</i> here</td></tr><tr><td><code>a "/mini phrase" here</code> →</td><td>a "<i>mini phrase</i>" here</td></tr><tr><td><code>a _"mini phrase" here</code> →</td><td>a <u>"mini phrase"</u> here</td></tr><tr><td><code>a "_mini phrase" here</code> →</td><td>a "<u>mini phrase</u>" here</td></tr><tr><td><code>a *"mini phrase" here</code> →</td><td>a <s>"mini phrase"</s> here</td></tr><tr><td><code>a "*mini phrase" here</code> →</td><td>a "<s>mini phrase</s>" here</td></tr></table>For <b>word styling</b> or <b>quoted phrase styling</b>, the <b>styling mark</b> must <b>not</b> <b>be preceded</b> by a <b>non‑whitespace character</b> other than an <em>opening</em> <em>parenthesis</em> (and <em>"</em> for quoted phrases):<table><tr><td><code>not!bold</code> →</td><td>not!bold</td></tr><tr><td><code>.!notbold</code> →</td><td>.!notbold</td></tr><tr><td><code>.!"not bold"</code> →</td><td>.!"not bold"</td></tr><tr><td><code>(!bold) notbold</code> →</td><td>(<b>bold</b>) notbold</td></tr><tr><td><code>gets(!bold)off</code> →</td><td>gets(<b>bold</b>)off</td></tr><tr><td><code>(!"bold yes" off)</code> →</td><td>(<b>"bold yes"</b> off)</td></tr></table>For <b>word styling</b>, <i>any first character</i> will be styled, but then <b>only word characters</b>, which includes the <b>letters</b> <em>A‑Z</em> and <em>a‑z</em> (and any others that you may have defined in your <code>alt.txt</code> file), the <b>digits</b> <em>0-9</em>, the <b>hyphen/dash</b> (<em>-</em>), the <b>apostrophe</b> (<em>'</em>), the <b>underscore</b> (<em>_</em>), the <b>forward slash</b> (<em>/</em>) and the (:Text Layouting:) marks (<b>non‑breaking space</b> and <b>non‑breaking hyphen/dash</b>):<table><tr><td><code>!Really? That's #good!</code> →</td><td><b>Really</b>? That's <code>good</code>!</td></tr><tr><td><code>_*xyz/ABC'123_ok*xyz</code> →</td><td><u>*xyz/ABC'123_ok</u>*xyz</td></tr></table>There is one <b>exception</b> though: If an <b>italic word</b> is followed by <em>?</em> or <em>!</em>, for aesthetic reasons the punctuation mark is italicized as well:<table><tr><td>your page code:</td><td><code>That's /good? Oh /yeah!</code></td></tr><tr><td>the result:</td><td>That's <i>good?</i> Oh <i>yeah!</i></td></tr><tr><td>exception off:</td><td>That's <i>good</i>? Oh <i>yeah</i>!</td></tr></table>If you want to <b>disable a styling mark</b>, simply put a <em>comma</em> after it:<table><tr><td><code>not !,bold</code> →</td><td>not !bold</td></tr><tr><td><code>not /,italic</code> →</td><td>not /italic</td></tr><tr><td><code>not _,underlined</code> →</td><td>not _underlined</td></tr><tr><td><code>not *,red</code> →</td><td>not *red</td></tr><tr><td><code>not #,code</code> →</td><td>not #code</td></tr><tr><td><code>no @,keyword</code> →</td><td>no @keyword</td></tr></table>To <b>style a free selection</b> <b>of text</b>, use the following markup:<table><tr><td><code>mid!:word to mid:!word</code> →</td><td>mid<b>word to mid</b>word</td></tr><tr><td><code>mid/:word to mid:/word</code> →</td><td>mid<i>word to mid</i>word</td></tr><tr><td><code>mid_:word to mid:_word</code> →</td><td>mid<u>word to mid</u>word</td></tr><tr><td><code>mid*:word to mid:*word</code> →</td><td>mid<s>word to mid</s>word</td></tr><tr><td><code>mid#:word to mid:#word</code> →</td><td>mid<code>word to mid</code>word</td></tr><tr><td><code>mid@:word to mid:@word</code> →</td><td>mid<em>word to mid</em>word</td></tr></table>If you do not close such a <b>colon‑selection</b>, it will <b>automatically end</b> at the <b>end of the line</b>:<table><tr><td><code>go italic #:from here on<br>normal next line</code></td><td class=td_cm>→<td>go italic <i>from here on</i><br>normal next line</td></td></tr></table>You can very freely <b>nest style selections</b>:<table><tr><td><code>!:/:bold _:and:_ italic</code> →</td><td><b><i>bold <u>and</u> italic</b></i></td></tr><tr><td><code>/:!:in _:any:_ order</code> →</td><td><i><b>in <u>any</u> order</b></i></td></tr><tr><td><code>!:ABC /:ABC:! ABC:/ ABC</code> →</td><td><b>ABC <i>ABC</b> ABC</i> ABC</td></tr></table>To <b>disable selection styling</b>, simply insert a <em>comma</em> between the <b>style mark</b> and the <em>colon</em>:<table><tr><td><code>how _:it is:_ done</code> →</td><td>how <u>it is</u> done</td></tr><tr><td><code>how _,:it is:,_ done</code> →</td><td>how _:it is:_ done</td></tr></table>Of course, you could also always use the <em>HTML</em> equivalents:<table><tr><td>to get:</td><td>use <em>PLS</em> markup:</td><td><i>or</i> use <em>HTML</em> markup:</td></tr><tr><td><b>ABC</b></td><td><code>!ABC</code> or <code>!:ABC:!</code></td><td><code><b>ABC</b></code></td></tr><tr><td><i>ABC</i></td><td><code>/ABC</code> or <code>/:ABC:/</code></td><td><code><i>ABC</i></code></td></tr><tr><td><u>ABC</u></td><td><code>_ABC</code> or <code>_:ABC:_</code></td><td><code><u>ABC</u></code></td></tr><tr><td><s>ABC</s></td><td><code>*ABC</code> or <code>*:ABC:*</code></td><td><code><s>ABC</s></code></td></tr><tr><td><code>ABC</code></td><td><code>#ABC</code> or <code>#:ABC:#</code></td><td><code><code>ABC</code></code></td></tr><tr><td><em>ABC</em></td><td><code>@ABC</code> or <code>@:ABC:@</code></td><td><code><em>ABC</em></code></td></tr></table>
Horizontal Rules
If you want to put a decorative <em>horizontal</em> <em>rule</em> page division element on your page ... <hr> ... like shown here twice ... <hr> ... just write a line that consists of <b>three or more</b> <em>minus</em> <em>dashes</em> and nothing else: ::::: Or of course use the <em>HTML</em> tag <code><hr></code> anywhere in your text where you want such a separator line. And what would happen if you only wrote two minus dashes? -- ↑ This. (Lines with just a <i>single minus dash</i> are used by (:Tables:).) And if you really want <b>a line</b> <b>of only</b> <em>minus</em> <em>dashes</em>, just place a <em>comma</em> anywhere between or after them: -----
["---\nabove line will do it\n::\n----------\nabove line overdoes it ;)"]
[["-,--\n or\n--,-\n or\n---,",0,0,"0",0,"#db0"]]
Page Links
To link to another page of your project, simply write <ul><li><code>(,:Page Title:)</code><br>or</li><li><code>(,:Page_URL:)</code><br>or</li><li><code>(,:#Page_URL:)</code></li></ul> For <u>example</u>: <ul><li><code>(,:Markup Basics:)</code> → (:Markup Basics:)</li><li><code>(,:Markup_Basics:)</code> → (:Markup_Basics:)</li><li><code>(,:#Markup_Basics:)</code> → (:#Markup_Basics:)</li></ul> If you link to a page that <b>does not exist</b> in your project, it will be displayed like so: <ul><li>(:Sex Tips:)</li></ul> <b>Non-unique page names</b> result in <b>unique URLs</b> anyhow, by prefixing their URL with that of their <b>chapter</b> followed by a <em>colon</em> and <em>space</em>. In page links, their chapter must always be given accordingly. As an <u>example</u> let's assume that you have <i>three</i> pages titled <i>"Introduction"</i>, one in the <code>/pages</code> root, one in a chapter <i>"Survival Medicine"</i>, and one in a chapter <i>"Using Maps"</i> that itself is located in a chapter <i>"Navigation"</i>. <ul><li><code>/pages/Introduction</code><br>would need to be linked to by<br><code>(,:Introduction:)</code> or <code>(,:#Introduction:)</code></li> <li><code>/pages/Survival Medicine/Introduction</code><br>would need to be linked to by<br><code>(,:Survival Medicine: Introduction:)</code> or<br><code>(,:Survival_Medicine:_Introduction:)</code> or<br><code>(,:#Survival_Medicine:_Introduction:)</code></li> <li><code>/pages/Navigation/Using Maps/Introduction</code><br>would need to be linked to by<br><code>(,:Using Maps: Introduction:)</code> or<br><code>(,:Using_Maps:_Introduction:)</code> or<br><code>(,:#Using_Maps:_Introduction:)</code><br>(only the <b>direct parent</b> chapter is used)</li></ul> To <b>disable the page links syntax</b> for any instance, simply insert a <em>comma</em> <b>after the</b> <em>opening</em> <em>parenthesis</em>: <ul><li><code>(,:Markup Basics:)</code> → (:Markup Basics:)</li><li><code>(,,:Markup Basics:)</code> → (,:Markup Basics:)</ul></li>
Web Links
Other than (:Page Links:), web links always need a caption: <ul><li><code>(,:Descriptive Caption::websiteURL:)</code></li></ul> The <code>http://</code> or <code>https://</code> <b>protocol prefix</b> can be omitted. For <i>example</i> <ul><li><code>(,:My Music::http://Molaskes.info/music:)</code></li><li><code>(,:My Music::Molaskes.info/music:)</code></li></ul> both render as (:My Music::Molaskes.info/music:). Only the <b>domain core</b> is given in <b>parentheses</b>, but hovering your mouse pointer over the link, you will always see the <b>full URL</b>. (For <b>localhost</b> documents, the top directory under <code>localhost/</code> is used as the "domain core".) The <b>parentheses</b> are <b>omitted</b> if the <b>caption</b> <b>already contains</b> <b>the domain core</b> (case‑insensitive): <ul><li><code>(,:www.Molaskes.info::http://Molaskes.info:)</code></li></ul> renders as (:www.Molaskes.info::http://Molaskes.info:). This <b>cannot be abused</b>, as it really detects whole valid URL parts: <ul><li><code>(,:anti-Molaskes.info::Molaskes.info:)</code></li></ul> renders as (:anti-Molaskes.info::Molaskes.info:). Although the syntax always requires a <b>caption</b>, it <b>can remain empty</b>, in which case the caption becomes the <b>entire given URL</b>: <ul><li><code>(,:::www.Molaskes.info/music:)</code></li></ul> renders as (:::www.Molaskes.info/music:) To <b>disable the web links syntax</b> for any instance, simply insert a <em>comma</em> <b>after the</b> <em>opening</em> <em>parenthesis</em>: <ul><li><code>(,:my website::Molaskes.info:)</code> → (:my website::Molaskes.info:)</li><li><code>(,,:my website::Molaskes.info:)</code> → (,:my website::Molaskes.info:)</ul></li>
Lists
To create an <b>bullet list</b> (aka an "unordered list" in <em>HTML</em>), just start each line with a <em>dash</em> followed by a <em>space</em>: ----- To create an <b>numbered list</b> (aka an "ordered list" in <em>HTML</em>), just start each line with a <em>dot</em> followed by a <em>space</em>: ----- If there is <b>at least one space</b> <b>before</b> the <em>dash</em> or <em>dot</em>, the list will be <b>centered on the page</b>: <code>- with <u>no space</u> before the dash:</code> <ul><li>a left-aligned list</li><li>just slightly indented</li><li>from the text flow</li></ul> <code> - <u>with</u> space before the dash:</code> <ul class=free><li>a list that is</li><li>centered on the page</li><li>standing out much more</li></ul> <code>. with <u>no space</u> before the dot:</code> <ol><li>a left-aligned list</li><li>just slightly indented</li><li>from the text flow</li></ol> <code> . <u>with</u> space before the dot:</code> <ol class=free><li>a list that is</li><li>centered on the page</li><li>standing out much more</li></ol> You can <b>space the list items</b> by <b>blank lines</b> between them: ----- ----- As the <em>PLS</em> <b>lists syntax</b> only supports <b>single lines</b>, you need to <b>use</b> <em>HTML</em> for <b>multiline list items</b>. For <u>example</u>: ----- Likewise, use <em>HTML</em> in a <b>single line</b> if you need to create any <b>sub lists</b>. To <b>disable the lists syntax</b> of <em>PLS</em> for any instance, simply insert a <em>comma</em> after the <em>dash</em> or <em>dot</em>: -----
[["- a list item\n- another one\n- and one more",0,0,0,0,"#db0"],[". a list item\n. another one\n. and one more",0,0,0,0,"#db1"],["- a list item\n\n- another one\n\n- and one more",0,0,0,0,"#db2"],[". a list item\n\n. another one\n\n. and one more",0,0,0,0,"#db3"],["- an item<br>continues\n- another one\n- and one more",0,0,0,0,"#db4"],["-, no list item\n., none as well",0,0,0,0,"#db5"]]
Tables
Let's start with a <i>minimal table</i> of one cell: ----- Always <b>open a table</b> with a <b>line</b> that <b>contains only</b> the <em>opening</em> <em>bracket</em> (<em>[</em>), and always <b>end a table</b> with a <b>line</b> that <b>contains only</b> the <em>closing</em> <em>bracket</em> (<em>]</em>). <b>Table cells</b> can be created by <b>starting a line</b> with the <em>hash</em> <em>sign</em> (<em>#</em>) followed by a <em>space</em>. Let's add more cells: ----- Separate <b>table rows</b> by a <b>line</b> that <b>contains only</b> the <em>minus</em> <em>dash</em> (<em>-</em>): ----- If you want to have a table <b>without frames/borders</b> around the cells, just start it with <em>[-</em>: ----- The <em>PLS</em> syntax only supports single‑line cells. Use <em>HTML</em> if you want to create <b>multi‑line cells</b>: ----- As you can see, cells created by just <em>#</em> are <b>top‑left‑aligned</b>. To create <b>centering cells</b>, <b>prefix the cell line</b> with a <em>plus</em> <em>sign</em> (<em> </em>): ----- And to create <b>bottom‑right‑aligned cells</b>, <b>prefix the cell line</b> with a <em>minus</em> <em>dash</em> (<em>-</em>): ----- To <b>disable the tables syntax</b> for any instance, simply place a <em>comma</em> after the first character of every table line: -----
[["[\n# cell 1\n]",0,0,0,0,"#db0"],["[\n# cell 1\n# cell 2\n# cell 3\n]",0,0,0,0,"#db1"],["[\n# cell 1\n# cell 2\n# cell 3\n-\n# cell A\n# cell B\n# cell C\n]",0,0,0,0,"#db2"],["[-\n# cell 1\n# cell 2\n# cell 3\n-\n# cell A\n# cell B\n# cell C\n]",0,0,0,0,"#db3"],["[\n# cell 1<br>continues\n# cell 2\n# cell 3\n]",0,0,0,0,"#db4"],["[\n+# cell 1<br>continues\n+# cell 2\n# cell 3\n]",0,0,0,0,"#db5"],["[\n-# cell 1<br>continues\n-# cell 2\n# cell 3\n]",0,0,0,0,"#db6"],["[,\n#, cell A\n#, cell B\n-,\n+,# cell C\n-,# cell D\n],",0,0,0,0,"#db7"]]
Keyboard Keys
<table><tr><td><em>HTML</em></td><td><em>PLS</em></td><td>result</td></tr><tr><td><code><kbd>key</kbd></code></td><td><code>[[key]]</code></td><td class=td_cm><kbd>key</kbd></td></tr></table>The <em>plus</em> sign in <b>key combinations</b> is automatically rendered smaller and in dark grey:<table><tr><td><code>[[Ctrl]]+[[Enter]]</code> →</td><td><kbd>Ctrl</kbd><small>+</small><kbd>Enter</kbd></td></tr></table>To <b>disable the syntax</b> of <em>PLS</em> <b>keyboard keys rendering</b>, simply put a <em>comma</em> between the two <em>opening</em> <em>brackets</em>:<table><tr><td><code>[,[key]]</code> →</td><td>[[key]]</td></tr></table>
Code Blocks
You <b>start</b> a code block with a <b>line</b> that <b>contains only</b> the sequence <em>#:</em> and you <b>end</b> it with a <b>line</b> that <b>contains only</b> the sequence <em>:#</em>. Everything between those two lines will be rendered <b>as‑is</b> (<b>no other markup applied</b>) in code style. So if you write ::::: it will be rendered as: ::::: <b>Within</b> a <b>code block</b>, you can define separate <b>code segments</b> by putting a <b>line</b> betwwen them that <b>contains only</b> the sequence <em>::</em> (<em>colon</em> <em>colon</em>). The <b>code segments</b> will try to float <b>side by side</b> but will <b>wrap</b> automatically to float <b>one over the other</b> if the browser window is or gets too narrow: ::::: will thus be rendered as: ::::: <b>Resize</b> your browser window or change your <b>browser zoom</b> (<kbd>Ctrl</kbd><small>+</small><kbd> </kbd>/<kbd>-</kbd>/<kbd>0</kbd>) to see the wrapping in action! To <b>disable</b> the <b>code blocks syntax</b>, use the sequences <em>#,:</em> and <em>:,#</em> and optionally (segment separators) <em>:,:</em> or <em>::,</em> like shown here: ::::: will be rendered as simply: #: Code Block Number One :: Code Block Number Two :: Code Block Number Three :#
["#:\nSomething\n like so\n !no PLS markup\n also <u>no<\/u> HTML\n:#\u00a0","Something\n like so\n !no PLS markup\n also <u>no<\/u> HTML","#:\nBlock One\n::\u00a0\nCode Block Two\n::\u00a0\nCode Block Nr. Three\n::\u00a0\nCode Block Number Four\n::\u00a0\nCode Block Number Five is a lot more verbose\n::\u00a0\nCode Block Number Six is also very wide\n:#\u00a0","Block One\n::\nCode Block Two\n::\nCode Block Nr. Three\n::\nCode Block Number Four\n::\nCode Block Number Five is a lot more verbose\n::\nCode Block Number Six is also very wide","#,:\nCode Block Number One\n:,:\nCode Block Number Two\n::,\nCode Block Number Three\n:,#"]
Text Layouting
For better layouted texts, you can and should use <em>non‑breaking</em> <em>spaces</em> and <em>non‑breaking</em> <em>dashes/hyphens</em> to make sure that <ul><li>line wraps do not break <b>names</b></li><li>line wraps do not break <b>fixed phrases</b></li><li>line wraps do not <b>orphan single words</b><br>at the end or at the start of a line</li></ul> Additionally, you can use the <em>soft</em> <em>hyphen</em> to allow very long words to break when the web browser would otherwise wrap the whole word to the next line (which looks especially bad in <em>justified</em> texts, as used by <em>PLS</em> since they <i>usually</i> look much better). To illustrate this:<table><tr><td>problem</td><td>without layouting</td><td>fixed by layouting</td></tr><tr><td>broken name</td><td><span style=float:right>... written by John</span><br>Doe who also ...</td><td class=td_rb>... written by<br><span style=float:left>John Doe who also ...</span></td></tr><tr><td>broken name<br>with a hypen</td><td><span style=float:right>... chased by a T-</span><br>Rex that roared ...</td><td class=td_rb>... chased by a<br><span style=float:left>T-Rex that roared ...</span></td></tr><tr><td>broken phrase</td><td><span style=float:right>... and at this time</span><br>of year we ...</td><td class=td_rb>... and at this<br><span style=float:left>time of year we ...</span></td></tr><tr><td>broken phrase<br>with a hyphen</td><td><span style=float:right>... all stared wide-</span><br>eyed at this ...</td><td class=td_rb>... all stared<br><span style=float:left>wide-eyed at this ...</span></td></tr><tr><td>orphaned start</td><td><span style=float:right>... This was bad. So</span><br>he had to ...</td><td class=td_rb>... This was bad.<br><span style=float:left>So he had to ...</span></td></tr><tr><td>orphaned end</td><td><span style=float:right>... until all was</span><br>good. She then ...</td><td class=td_rb>... until all<br><span style=float:left>was good. She then ...</span></td></tr><tr><td>bad justify</td><td><span style=float:right>...   must   be</span><br>concatenated by ...</td><td class=td_rb>... must be concate-<br><span style=float:left>nated by ...</span></td></tr></table>Use the following <em>PLS</em> <b>markup</b> (two <em>underscores</em> or <em>equals‑signs</em>) for text layouting:<table><tr><td class=td_cm>markup</td><td class=td_cm>effect</td><td class=td_cm>example</td><td class=td_cm>renders as</td></tr><tr><td class=td_cm><em>+</em></td><td class=td_cm>non-breaking space</td><td class=td_cm><code>A+B</code></td><td class=td_cm>A B<br><div style=text-align:right>......</div><div style=text-align:left>A B</div></td></tr><tr><td class=td_cm><em>~</em></td><td class=td_cm>non-breaking hyphen</td><td class=td_cm><code>A~B</code></td><td class=td_cm>A‑B<br><div style=text-align:right>......</div><div style=text-align:left>A‑B</div></td></tr><tr><td class=td_cm><em>|</em></td><td class=td_cm>soft hyphen</td><td class=td_cm><code>A|B</code></td><td class=td_cm>AB<br><div style=text-align:right>...... A-</div><div style=text-align:left>B</div></td></tr></table>All three will <b>only</b> work when you place them <b>between</b> <code>[^\s>]</code> and <code>[^,\s<]</code>, i.e. <b>not bordering</b> <em>spaces</em> <b>or</b> <em>HTML</em> <b>tags</b>. (The <em>comma</em> is used to <b>escape</b> the markup, see below.) The only <b>exception</b> to this rule is that a <em>plus</em> character standing <b>alone on a line</b> will become a <em>non‑breaking</em> <em>space</em> as well. This is useful to create <em>blank</em> <em>lines</em> before or after <b>lists</b>, <b>tables</b>, and so on. <b>Alternatively</b>, you can also use the <em>HTML</em> tag <code><pre>...</pre></code> to set a selection of text as <em>CSS</em> <code>white‑space:nowrap</code>. And of course you also could directly use the <em>HTML</em> <b>equivalents</b>:<table><tr><td class=td_cm><em>PLS</em></td><td class=td_cm><em>HTML</em></td></tr><tr><td class=td_cm><code>+</code></td><td class=td_cm><code>&nbsp;</code></td></tr><tr><td class=td_cm><code>~</code></td><td class=td_cm><code>&#8209;</code></td></tr><tr><td class=td_cm><code>|</code></td><td class=td_cm><code>&shy;</code></td></tr></table>To <b>escape</b> the <b>non‑breaking characters</b> markup of <em>PLS</em>, simply put a <em>comma</em> after the markup character:<table><tr><td><code>A+,B</code> →</td><td>A+B</td></tr><tr><td><code>A~,B</code> →</td><td>A~B</td></tr><tr><td><code>A|,B</code> →</td><td>A|B</td></tr></table>
Centered Text Blocks
If you want to have a portion of a page to stand out as a text block that is probably less wide than the rest of the page, just place it <b>between a line</b> that <b>contains only</b> the sequence <em>-:</em> and a <b>line</b> that <b>contains only</b> the sequence <em>:-</em> as shown here: ::::: <div class=cbl style="margin:-0.5em auto -1.5em"><b style=color:#888;font-size:2em>⮟</b></div> This is a line in normal text flow. <div class=cbl>This will stand out as (left-aligned) text that floats centered on the page.</div> And we are back in normal text flow. <hr> If the <b>text</b> shall be <b>centered</b>, too, use <em>plus</em> <em>signs</em> instead of the <em>minus</em> <em>dashes</em>: ::::: <div class=cbl style="margin:-0.5em auto -1.5em"><b style=color:#888;font-size:2em>⮟</b></div> This is a line in normal text flow. <div class=cbc>This will stand out as centered text that floats centered on the page.</div> And we are back in normal text flow. <hr> To <b>escape</b> this <em>PLS</em> markup syntax, simply put a <em>comma</em> between the markup sequences: ::::: <div class=cbl style="margin:-0.5em auto -1.5em"><b style=color:#888;font-size:2em>⮟</b></div> This is a line in normal text flow. -: This will NOT stand out. :- Everything is in normal text flow. +: This won't be centered. :+ It's all plain text.
["This is a line in normal text flow.\n-:\nThis will stand out\nas (left-aligned) text\nthat floats\ncentered on the page.\n:-\nAnd we are back in normal text flow.","This is a line in normal text flow.\n+:\nThis will stand out\nas centered text\nthat floats\ncentered on the page.\n:+\nAnd we are back in normal text flow.","This is a line in normal text flow.\n-,:\nThis will NOT stand out.\n:,-\nEverything is in normal text flow.\n+,:\nThis won't be centered.\n:,+\nIt's all plain text."]
Embedding Files
5
Pictures
Follow these steps to embed pictures into your document: <ol><li>put the <b>picture file</b> (e.g. <code>*.jpg</code>, <code>*.png</code>, <code>*.gif</code>, or <code>*.webp</code>) into the <code>/files</code> directory under your project root</li> <li>make sure the <b>name</b> before the file extension dot is <code>^\w $</code><br>(= contains only letters A‑Z/a‑z, digits 0‑9, and/or the underscore)<br>and that the <b>file extension</b> after the dot is <b>2 to 4 characters long</b></li> <li>use the following <b>markup synax</b> in your pages:<br><code>(,:Picture Caption::filename.ext:)</code></li></ol> Here is an <u>example</u>: ::::: <div class=cbl style="margin:-0.5em auto -2.3em"><b style=color:#888;font-size:2em>⮟</b></div> (:A scene in Switzerland::demopic.jpg:) What will happen if you leave the <b>caption empty</b>? It will be set to the <b>filename</b>: ::::: <div class=cbl style="margin:-0.5em auto -2.3em"><b style=color:#888;font-size:2em>⮟</b></div> (:::demopic.jpg:) Pictures included this way will <ol><li>always have a <b>proper caption</b></li><li><b>never</b> display <b>wider</b> than the <b>text</b></li><li><b>never</b> display <b>taller</b> than <b>70%</b> of the <b>viewport</b></li></ol> <u>Note</u>: Use pictures <b>sparsely</b> and try to <b>keep the total filesize</b> as <b>low</b> as possible. Embedding files will increase the size of your document, increase <b>download times</b> for your readers, and will also increase the <b>loading time</b> when opening the document. To <b>escape</b> the <em>PLS</em> picture markup in any instance, simply put a <em>comma</em> after the <em>opening</em> <em>parenthesis</em>: ::::: <div class=cbl style="margin:-0.5em auto -2.3em"><b style=color:#888;font-size:2em>⮟</b></div> (,:A scene in Switzerland::demopic.jpg:)
["(:A scene in Switzerland::demopic.jpg:)","(:::demopic.jpg:)","(,:A scene in Switzerland::demopic.jpg:)"]
Have a Favicon
Besides normal (:Pictures:), you can also put any <code>favicon.*</code> image file in the <code>/files</code> directory under your project root. This will <b>not be available</b> as a picture that you can put on your pages via the <b>pictures markup</b> syntax, but it will be used as your document's proper <em>favicon</em>, shown in the browser tab and in browser bookmarks. If you use a <b>logo picture file</b> (see (:Your Logo:)), you could simply <b>copy it</b> as your favicon, retaining the file extension of the logo file. And if you <b>program</b> your <b>logo</b> in <em>Eas</em> with <em>DRAW'</em> commands (as is demonstrated in (:The ALL_SETTINGS File:) for the logo of this very document here), you could simply <b>right‑mouse‑click</b> the rendered logo and <b>save it as</b> <code>/files/favicon.png</code>.
MP3 Audio Files
Follow these steps to embed <em>MP3</em> audio tracks into your document: <ol><li>put the <em>MP3</em> file (<code>*.mp3</code>) into the <code>/files</code> directory under your project root</li> <li>make sure the <b>name</b> before the file extension dot is <code>^\w $</code><br>(= contains only letters A‑Z/a‑z, digits 0‑9, and/or the underscore)</li> <li>use the following <b>markup synax</b> in your pages:<br><code>(,:Track Title::filename.mp3:)</code></li></ol> Here is an <u>example</u>: ::::: <div class=cbl style="margin:-0.5em auto -2.3em"><b style=color:#888;font-size:2em>⮟</b></div> (:A Welcome Message::welcome.mp3:) The player shows the <b>position info</b> in the format <code>P/D\R</code> with: <ul><li><code>P</code> = <b>played</b> seconds / <b>position</b></li><li><code>D</code> = total <b>duration</b> in seconds</li><li><code>R</code> = <b>remaining</b> seconds</li></ul> All three of these are <b>automatically prefixed</b> with zeroes to keep them all the same width: (:Dance Along! ::dotsca.mp3:) Your readers can use the players as follows: <ul><li><b>stop</b> it by <b>clicking anywhere else</b> on the page</li><li><b>stop</b> it by pressing <kbd>Esc</kbd></li><li><b>stop</b> it by <b>selecting another</b> player or link (<kbd>↓</kbd>/<kbd>↑</kbd>)</li><li><b>seek forwards/backwards</b> by the keys <kbd>→</kbd>/<kbd>←</kbd></li><li><b>replay</b> a finished track by pressing <kbd>→</kbd></li><li><b>restart</b> a track by <b>clicking it again</b></li><li>quickly adjust the <b>volume</b> in three steps (<kbd>Enter</kbd>)<br>(global for the whole document, reset only upon refreshing)</li></ul> What will happen if you leave the <b>caption empty</b>? It will be set to the <b>filename</b>: ::::: <div class=cbl style="margin:-0.5em auto -2.3em"><b style=color:#888;font-size:2em>⮟</b></div> (:::welcome.mp3:) <em>MP3</em> audio tracks included this way will <b>each</b> get their own <b>mini audio player</b> that starts playing as soon as it is mouse‑clicked or navigated to by the <b>keyboard controls</b> that are activated by <kbd>Tab</kbd> (if there is more than one player, or there are any links before the track, navigate to it by using the <kbd>↓</kbd>/<kbd>↑</kbd> keys). <u>Note</u>: Use <em>MP3</em> tracks <b>sparsely</b> and try to <b>keep the total filesize</b> as <b>low</b> as possible. Embedding files will increase the size of your document, increase <b>download times</b> for your readers, and will also increase the <b>loading time</b> when opening the document. To <b>escape</b> the <em>MP3</em> player markup in any instance, simply put a <em>comma</em> after the <em>opening</em> <em>parenthesis</em>: ::::: <div class=cbl style="margin:-0.5em auto -2.3em"><b style=color:#888;font-size:2em>⮟</b></div> (,:A Welcome Message::welcome.mp3:) <hr> If you want to hear the <b>music</b> from the <b>Welcome Message</b> in <b>full length</b> (by <b>Globkunst</b>, a project of Molaskes), go to <ul><li>(:"Dirty Boxes"::Molaskes.bandcamp.com/track/dirty-boxes:),</li></ul> and for the "<b>Dance Along!</b>"‑track in <b>full length</b> (by <b>Iteki‑San UC</b>, another project of Molaskes), go to <ul><li>(:"Defenders of the Samurai Castle"::Molaskes.bandcamp.com/track/defenders-of-the-samurai-castle:).</li></ul> For <b>all music projects</b> of <b>Molaskes</b>, go to: <ul><li>(:::Molaskes.info/music:)</ul></li>
["(:A Welcome Message::welcome.mp3:)","(:::welcome.mp3:)","(,:A Welcome Message::welcome.mp3:)"]
Offering Downloads
Follow these steps to include downloads in your document: <ol><li>put the <b>downloadable file</b> (e.g. a <code>*.zip</code>) into the <code>/files</code> directory under your project root</li> <li>make sure the <b>name</b> before the file extension dot is <code>^\w $</code><br>(= contains only letters A‑Z/a‑z, digits 0‑9, and/or the underscore)<br>and that the <b>file extension</b> after the dot is <b>2 to 4 characters long</b></li> <li>use the following <b>markup synax</b> in your pages:<br><code>(,:Download Caption::filename.ext:)</code></li></ol> Here is an <u>example</u>: ::::: <div class=cbl style="margin:-0.5em auto -1.5em"><b style=color:#888;font-size:2em>⮟</b></div> (:Get PowerLeafSolid Now! ::PowerLeafSolid.zip:) The <b>file size</b> will automatically be displayed as rounded <b>Bytes</b>, <b>KB</b>, or <b>MB</b>, and if the caption does not end with the <b>file extension</b>, the latter wlll be displayed in capital letters before the file size. Downloads offered this way will use the <b>caption</b> as their default <b>download name</b>. What will happen if you leave the <b>caption empty</b>? It will be set to the <b>filename</b>: ::::: <div class=cbl style="margin:-0.5em auto -1.5em"><b style=color:#888;font-size:2em>⮟</b></div> (:::PowerLeafSolid.zip:) <u>Note</u>: Use offering downloads <b>sparsely</b> and try to <b>keep the total filesize</b> as <b>low</b> as possible. Embedding files will increase the size of your document, increase <b>download times</b> for your readers, and will also increase the <b>loading time</b> when opening the document. To <b>escape</b> the <em>PLS</em> download markup in any instance, simply put a <em>comma</em> after the <em>opening</em> <em>parenthesis</em>: ::::: <div class=cbl style="margin:-0.5em auto -1.5em"><b style=color:#888;font-size:2em>⮟</b></div> (,:Get PowerLeafSolid Now<b>:PowerLeafSolid.zip:)</b>
["(:Get PowerLeafSolid Now!::PowerLeafSolid.zip:)","(:::PowerLeafSolid.zip:)","(,:Get PowerLeafSolid Now!::PowerLeafSolid.zip:)"]
Embedding Fonts
Follow these steps to embed fonts into your document: <ol><li>put the <b>picture file</b> (e.g. <code>*.ttf</code>, <code>*.otf</code>, or <code>*.woff</code>) into the <code>/files</code> directory under your project root</li> <li>make sure the <b>name</b> before the file extension dot is <code>^\w $</code><br>(= contains only letters A‑Z/a‑z, digits 0‑9, and/or the underscore)<br>and that the <b>file extension</b> after the dot is <b>2 to 4 characters long</b><br>(just rename any <code>*.woff2</code> files to <code>*.woff</code>)</li></ol> Any <b>font files</b> that you thus embed in your document will <b>not</b> be available in (:Offering Downloads:), <b>but</b> will be <b>embedded as</b> <em>CSS</em> <em>@font‑face</em> definitions that you can <b>use</b> by their extension‑strippd <b>filename</b>. If for <u>example</u> you want to use a font <code>My Cool Font.woff2</code>: <ol><li>put it in your <code>/files</code> directory</li><li><b>rename</b> <b>it</b> to <code>MyCoolFont.woff</code></li><li><b>use</b> it in any <em>CSS</em> like so: <code>font-family:MyCoolFont;</code></li></ol> <u>Notice</u> that throughout your document <b>your filename</b> will <b>override</b> any <b>existing</b> <em>font‑family</em> names (except for the generic fallbacks <code>serif</code>, <code>sans‑serif</code>, <code>monospace</code>, and so on). Embedded fonts can come in particularly handy if you define (:Project-Wide CSS:).
For Advanced Users
10
Project-Wide CSS
Study the <code><style></code> section of the <code>PLSengine</code> file to see which <b>.classes</b> and <b>#ids</b> you should not (or perhaps actually want to) mess about with. Then, while you also could edit the <code>PLSengine</code> file, better create in your project root a file <code>add.css</code> and edit this instead. Its contents will be inserted at the very bottom of the <code><style></code> section of your generated target file, so you can effectively overwrite any <code>PLSengine</code> <em>CSS</em> definitions that you want. See also (:Embedding Fonts:) for using embedded fonts in your <code>add.css</code> file.
Localizing
Edit the <code>alt.txt</code> file in your project root to create a <b>custom</b> and/or <b>localized</b> (using <b>another language</b> other than English) <b>user interface</b>. To understand the <code>alt.txt</code> file: <ul><li>If you <b>delete</b> this file, it will be <b>recreated</b> with <b>default values</b> when you run <code>PLSbake.php</code> the next time.</li> <li>If you <b>delete</b> a key <b>or</b> make it <b>invalid</b>, it will be <b>appended</b> with its <b>default value</b> when you run <code>PLSbake.php</code> the next time.</li> <li>Only <code>\n(. ?) = (. )\n</code> lines are important,<br>they define <code>key = value</code> pairs.</li> <li>All <b>other lines</b> are <b>ignored</b> by <code>PLSbaker.php</code>.<br>Use them as <b>comments</b> or for <b>structuring</b>.</li></ul> Notice especially the following <b>keys</b>: <ol><li><code>language-name</code> (default: <code>English</code>)<br>is actually not used by <em>PLS</em>, it just looks better this way before the language code</li> <li><code>language-code</code> (default: <code>en</code>)<br>will become the <code>lang=</code> attribute of the <code><html></code> tag of your target file.</li> <li><code>uppercase-letters</code> (default: <code>A-Z</code>)<br>actually strips any <code>[\w -]</code> and then adds the essential <code>A-Z</code><br>(see below for its use)</li> <li><code>lowercase-letters</code> (default: <code>a-z</code>)<br>actually strips any <code>[\w -]</code> and then adds the essential <code>a-z</code><br>(see below for its use)</li> <li><code>singlecase-letters</code> (default: <code>-</code>)<br>actually strips any <code>[\w -]</code><br>(see below for its use)</li> <li><code>search-replace-letters</code> — the default is the verbose <code style=white-space:normal>Aa=a Zz=z and so on, from=to only for non-ASCII (not A-Z or a-z) from-letters</code><br>(see below for more on its use)</li> <li><code>URL-replace-letters</code> — the default is the verbose <code style=white-space:normal>a=xy b=z and so on, from=to only for non-ASCII (not A-Z or a-z) from-letters</code><br>(see below for more on its use)</li></ol> What are <b>"singlecase" letters</b>? Some languages use letters that have no lowercase vs uppercase distinction. One <u>example: <u>is</u> the German <b>ß</b>.</u> The <b>uppercase</b>, <b>lowercase</b>, and <b>singlease</b> letter definitions are all needed for <em>PLS</em> <b>search</b> to work properly. (It just <b>ignores</b> any characters that are neither letters it knows, nor digits, nor whitespace characters, and of course it handles all markup, <em>HTML</em> etc.). The <em>PLS</em> <b>search</b> will also only then work properly with locale (non‑English) letters if you provide the <code>uppercase-letters</code> and <code>lowercase-letters</code> values in the <b>same order</b>. The search internally converts everything to lowercase and uses these locale pairs. The <code>search-replace-letters</code> field scans for <code>(\W+)=(\w)</code> pairs separated by any number of space characters. Here you can define which locale letters shall be considered equal to any other letter. One <u>example</u> would be to map <b>accented letters</b> to their respective non‑accented base‑letter, so that when you search for <i>"dóm"</i> it will also find <i>"dom"</i> and vice versa. <u>Notice</u> that the replacement letter should be lowercase for the search to actually work. The <code>URL-replace-letters</code> field scans for <code>(\W+)=(\w+)</code> pairs separated by any number of space characters. <em>PLS</em> uses <em>#hash‑URLs</em> and these accept only the letters <b>A-Z</b>. Any locale letters must therefore be <b>transcripted</b> into <b>A-Z equivalents</b>. For <b>URLs</b>, <em>PLS</em> will replace all <b>spaces</b> with <b>underscores</b>, and after applying any <code>URL-replace-letters</code> it will simply <b>strip</b> all other characters that are not eligible in <em>#hash‑URLs</em>. (Underscores at the start or end of the URL will be trimmed away, and groups of underscores will be collapsed into a single underscore.) Here is a basic <u>example</u> for <b>German</b>:<table><tr><td>language‑name</td><td>=</td><td>Deutsch (German)</td></tr><tr><td>language-code</td><td>=</td><td>de</td></tr><tr><td>uppercase‑letters</td><td>=</td><td>A-Z ÄÖÜ ÁÂÀ ÉÊÈ ÍÎÌ ÓÔÒ ÚÛÙ</td></tr><tr><td>lowercase‑letters</td><td>=</td><td>a-z äöü áâà éêè íîì óôò úûù</td></tr><tr><td>singlecase‑letters</td><td>=</td><td>ß</td></tr><tr><td>search‑replace‑letters</td><td>=</td><td>ÁÂÀáâà=a ÉÊÈéêè=e ÍÎÌíîì=i ÓÔÒóôò=o ÚÛÙúûù=u</td></tr><tr><td>URL‑replace‑letters</td><td>=</td><td>Ä=Ae Ö=Oe Ü=Ue ä=ae ö=oe ü=ue ß=sz Á=A Â=A À=A á=a â=a à=a É=E Ê=E È=E é=e ê=e è=e Í=I Î=I Ì=I í=i î=i ì=i Ó=O Ô=O Ò=O ó=o ô=o ò=o Ú=U Û=U Ù=U ú=u û=u ù=u</td></tr><tr><td>enter‑key</td><td>=</td><td>Enter</td></tr><tr><td>escape‑key</td><td>=</td><td>Esc</td></tr><tr><td>tab‑key</td><td>=</td><td>Tab</td></tr><tr><td>backspace‑key</td><td>=</td><td>← &emsp;</td></tr><tr><td>page‑up‑key</td><td>=</td><td>Bild↑</td></tr><tr><td>page‑down‑key</td><td>=</td><td>Bild↓</td></tr><tr><td>insert‑key</td><td>=</td><td>Einfg</td></tr><tr><td>delete‑key</td><td>=</td><td>Entf</td></tr><tr><td>loading‑message</td><td>=</td><td>Seite lädt ... bitte warten!</td></tr></table><div class=cbc>(And so on.)</div>
Rendering Static Eas
You can generate <b>dynamic content</b> that you program with <em>Eas</em> ((:::Molaskes.info/Eas:)). Each active <em>Eas</em> code block looks like this: ::::: It must <b>start</b> with a <b>line</b> that contains only <b>one or more</b> <b>equals‑signs</b> followed by a <b>backslash</b>, and it must <b>end</b> with a <b>line</b> that contains only <b>one or more</b> <b>equals‑signs</b> followed by a <b>forward slash</b>. Other than in regular <em>Eas</em>, the <em>SAY:</em> function only accepts one parameter and will not write a debug message but directly onto the page. Here is an <u>example</u>: ::::: <div class=cbl style="margin:-0.5em auto -2.3em"><b style=color:#888;font-size:2em>⮟</b></div> ----- There are a few things to <u>notice</u> here: <ol><li>Only the last <em>SAY:</em> will be effective (<b>overwriting</b> any prior output).</li><li>The output will be <b>centered</b> on the page.</li><li>The output will be <b>center‑aligned</b>.</li><li>The font will be <b>styled</b> like that of code blocks.</li><li>The output is <b>cached</b>: Go to any other page and then return here to see it's true. Then press <kbd>F5</kbd> and you will see a new datetime.</li><li>The output will get <b>rendered anew</b> when when the document window is <b>resized</b>.</li></ol> Your <b>second option</b> is to <b>render images</b> via <em>DRAW'</em> commands. Just <b>don't use</b> <em>DRAW'TO</em>, it will be called automatically by <em>PLS</em>. Here is an <u>example</u>: ::::: <div class=cbl style="margin:-0.5em auto -1.5em"><b style=color:#888;font-size:2em>⮟</b></div> ----- <u>Notice</u> the following here: <ul><li>The <b>default size</b> of rendered images is <b>500×500</b> pixels.</li><li>The result is <b>cached</b> also here (check as described above).</li><li>If your picture takes rather long to render, the site logo in the top left corner of the document will show a <b>stopwatch icon</b> until the whole page has been rendered.<br>((:The DemoPic:) usually takes a few seconds to render, so there you can probably see the effect better than here.)</li></ul> To set a different <b>canvas size</b>, you need to start your code with a <b>configuration line</b>. For <b>static rendering</b>, it starts with a <b>zero</b>; after a space there can then follow a <b>pixels size</b> for square images: ::::: <div class=cbl style="margin:-0.5em auto -1.5em"><b style=color:#888;font-size:2em>⮟</b></div> ----- Or you give the <code>width:height</code> in pixels: ::::: <div class=cbl style="margin:-0.5em auto -1.5em"><b style=color:#888;font-size:2em>⮟</b></div> ----- Images that are <b>too wide</b> for the <b>viewport</b> will be fit into it: ::::: <div class=cbl style="margin:-0.5em auto -1.5em"><b style=color:#888;font-size:2em>⮟</b></div> ----- And images that are <b>overly tall</b> will be <b>reduced</b> to <b>70%</b> of the <b>viewport height</b>: ::::: <div class=cbl style="margin:-0.5em auto -1.5em"><b style=color:#888;font-size:2em>⮟</b></div> ----- Besides a <em>SAY:</em> <b>text output</b> and rendering <em>DRAW'</em> <b>images</b>, the final option is to create <b>dynamic</b> <em>HTML</em> via <em>DHT'NEW:</em> or <em>DHT'DIV:</em> — where <code>"body"</code> will be replaced by <code>Base!</code> which you should preferably use anyway. ::::: <div class=cbl style="margin:-0.5em auto -1.5em"><b style=color:#888;font-size:2em>⮟</b></div> ----- <u>Notice</u> that the <b>result</b> of such a <b>static</b> <em>Eas</em> program is also <b>cached</b>. (See above.) To <b>disable</b> the <em>Eas</em> markup, just put <em>commas</em> between <b>all</b> the <b>equals‑signs</b> (or after a single one) of both the opening and the closing marker line (technically, one comma will disable it already, but any remaining adjacent equals‑signs would become a non‑breaking hyphen as discussed in (:Text Layouting:)): ::::: <div class=cbl style="margin:-0.5em auto -1.5em"><b style=color:#888;font-size:2em>⮟</b></div> =\ SAY:"In plain view ..." ===/
["=====\\\n-- Eas code\n=====\/\n::\n===\\\n-- also okay\n===\/\n::\n=\\\n-- works, too\n=\/\n::\n=========\\\n-- still okay\n==\/","=\\\nSAY:\"What will this do?\"\nSAY:\"You first saw this\"\/;DTSTR!;\" ...\"\n=\/","=\\\nDRAW'PEN:0\nDRAW'FILL:\"#F\" \"#3\"\nDRAW'BOX!\nDRAW'LAYER!\nDRAW'FILL:-90 \"#F00\" \"#0F0\"\nDRAW'TEXT:DTSTR!&&-100&\"b\" -45\nDRAW'GROW:3\nDRAW'INFLATE!\nDRAW'SHADOW!\n=\/","=\\\n0 200\nDRAW'PEN:0\nDRAW'FILL:\"#F\" \"#3\"\nDRAW'BOX!\nDRAW'LAYER!\nDRAW'FILL:-90 \"#F00\" \"#0F0\"\nDRAW'TEXT:DTSTR!&&-100&\"b\" -45\nDRAW'GROW!\nDRAW'INFLATE!\nDRAW'SHADOW!\n=\/","=\\\n0 480:270\nDRAW'PEN:0\nDRAW'FILL:\"#F\" \"#3\"\nDRAW'BOX!\nDRAW'LAYER!\nDRAW'FILL:-90 \"#F00\" \"#0F0\"\nDRAW'TEXT:DTSTR!&&-100&\"b\" -45\nDRAW'GROW!\nDRAW'INFLATE!\nDRAW'SHADOW!\n=\/","=\\\n0 5000:1000\nDRAW'PEN:0\nDRAW'FILL:\"#F\" \"#3\"\nDRAW'BOX!\nDRAW'LAYER!\nDRAW'FILL:-90 \"#F00\" \"#0F0\"\nDRAW'TEXT:DTSTR!&&-100&\"b\" -45\nDRAW'GROW!\nDRAW'INFLATE!\nDRAW'SHADOW!\n=\/","=\\\n0 1000:5000\nDRAW'PEN:0\nDRAW'FILL:\"#F\" \"#3\"\nDRAW'BOX!\nDRAW'LAYER!\nDRAW'FILL:-90 \"#F00\" \"#0F0\"\nDRAW'TEXT:DTSTR!&&-100&\"b\" -45\nDRAW'GROW!\nDRAW'INFLATE!\nDRAW'SHADOW!\n=\/","=\\\nb DHT'NEW:\"body\" \"button\"\nDHT'INNER:b \"Click me\"\nDHT'ATTR:b \"onclick\" \"alert('You clicked it!')\"\nCSS:b \"cursor:pointer\"\n=\/","=,\\\nSAY:\"In plain view ...\"\n=,=,=\/"]
[[0,0,0,0,0,"#fb0"],[0,500,500,0,0,"#fi1"],[0,"200","200","0",0,"#fi2"],[0,"480","270","0",0,"#fi3"],[0,"5000","1000","0",0,"#fi4"],[0,"1000","5000","0",0,"#fi5"],[0,0,0,0,0,"#fb6"]]
The DemoPic
As a special case of (:Rendering Static Eas:), you can use a pre‑programmed demo picture. It is rather complex and therefore may take <b>a few seconds</b> to render, during which time the <b>site logo</b> will be replaced by a <b>stopwatch icon</b>. After the first rendering, the <em>DemoPic</em> will be <b>cached</b>, so any further use of it will be without delay (other than rendering any effects you apply). The <em>DemoPic</em> will <b>internally</b> be rendered as <b>800×800 pixels</b>. Use it for instance by calling <code>DRAW'COPY:DemoPic!</code> (don't forget the exclamation mark!), after which you may apply any effects that you want to test or demonstrate. And how does it look like? Let's see: ::::: <div class=cbl style="margin:-0.5em auto -1.5em"><b style=color:#888;font-size:2em>⮟</b></div> ----- And now let's see how a <b>colorblind</b> person would see it: ::::: <div class=cbl style="margin:-0.5em auto -1.5em"><b style=color:#888;font-size:2em>⮟</b></div> ----- <u>Notice</u> that the <em>DemoPic</em> will get <b>rendered anew</b> with some slightly <b>randomized features</b> when the document window is <b>resized</b>.
["=\\\nDRAW'COPY:DemoPic!\n=\/","=\\\nDRAW'COPY:DemoPic!\nDRAW'MIX:(1 1 0) (1 1 0) 1\n=\/"]
[[0,500,500,0,0,"#fi0"],[0,500,500,0,0,"#fi1"]]
Writing Animations
The next step after (:Rendering Static Eas:) is to write animations. Just start your code with a <b>configuration line</b>. The simplest case is a single <code>1</code>: ::::: <div class=cbl style="margin:-0.5em auto -2.3em"><b style=color:#888;font-size:2em>⮟</b></div> ----- The program will execute <b>every second</b> — and <u>notice</u> that it also <b>starts</b> only after a second. The <b>configuration line</b> has the following syntax: <ul><li>the <b>first item</b> is the <b>timer interval</b> of the animation in <b>seconds</b><br>(mind that a <code>0</code> will lead to (:Rendering Static Eas:))</li> <li><b>valid interval strings</b> are <code>\d (\.\d )?(/\d )(\.\d ))?</code><br>(<u>examples</u>: <code>15</code>, <code>3.8</code>, <code>1/25</code>, <code>19.512/12.73</code>)</li> <li>for <em>DRAW'</em> programs, <code>\d (:(\d ))?</code> can follow after a <em>space</em>,<br>meaning <b>width:height</b> in <b>pixels</b>,or as a single value:<br><b>dimension</b> (=<b>width=height</b>) in <b>pixels</b></li></ul> Most animations should use a <b>framerate</b> of about <b>20–30 FPS</b> (frames per second), which you can set by intervals of <code>1/20</code>–<code>1/30</code> respectively: ----- ----- <b>Slower animations</b> will not seem as smooth, but <b>robotic/jumpy</b>: ----- Of course you can also animate with <em>DRAW'</em>: ::::: <div class=cbl style="margin:-0.5em auto -1.5em"><b style=color:#888;font-size:2em>⮟</b></div> ----- <u>Notice</u> that animations are <b>only</b> rendered when they (or at least a portion of them) are <b>visible</b> in the viewport. Scroll the following animation in and out of view, waiting a few seconds when it is off the screen before you return to it! You can even go to other pages in the meantime. As long as you do not reload the page, it will remember where you left it. ::::: <div class=cbl style="margin:-0.5em auto -2.3em"><b style=color:#888;font-size:2em>⮟</b></div> ----- And finally, you can animate <em>dynamic</em> <em>HTML</em>: ::::: <div class=cbl style="margin:-0.5em auto -2.3em"><b style=color:#888;font-size:2em>⮟</b></div> ----- <u>Notice</u> that the <b>query search</b> of <em>PLS</em> searches only in the text parts of the pages, but will not find anything either in (:Code Blocks:), in (:Code Demos:) or in programmed output. So you could not find above example without "I blink" being mentioned here again.
["=\\\n1\nSAY:\"The current datetime is:\"\/;DTSTR!\n=\/","=\\\n1\/25 500:300\nDRAW'PEN:0\nDRAW'FILL:0 \"#05A\" \"#036\"\nDRAW'BOX!\no \"Spin it!\"\/\no;DTSTR:\"nd\\nh:mi:s\"\na TIMER'COUNT*3\nDRAW'FILL:-90 \"#F00\" \"#FF0\" \"#0F0\"\nDRAW'TEXT:o&&-100&\"b\" a\n=\/","=\\\n1\/10\nt TIMER'COUNT\n? _anidemoVPt=t\n _anidemoVPc +\n\/\n_anidemoVPt t+1\no \"You've seen me\"\/\no;\"for a total of\"\/\ns _anidemoVPc\ns s\/\/10;\".\";s\\10\nSAY:o;s;\" seconds.\"\n=\/","=\\\n1\/20\n? \"\"=DHT'INNER:Base!\n d DHT'NEW:Base! \"em\"\n o \"I blink, therefore I am!\"\n DHT'INNER:d o\n _anidemoDHT d\n\/\nc CSS'COLA:\"0-F\" \"0-F\" \"0-F\"\nCSS:_anidemoDHT \"color:\";c\n=\/"]
[[0,0,0,"1",0,"#fb0"],["=\\\u00a0\n1\/20\nt DTSTR:DTSTR:\"h:mi:s.ms\"\na REPEAT:\" \" TIMER'COUNT\\t?\nSAY:\";t\"\/\";a#\"\n=\/\u00a0",0,0,"1\/20",0,"#db1"],["=\\\u00a0\n1\/30\nt DTSTR:DTSTR:\"h:mi:s.ms\"\na REPEAT:\" \" TIMER'COUNT\\t?\nSAY:\";t\"\/\";a#\"\n=\/\u00a0",0,0,"1\/30",0,"#db2"],["=\\\u00a0\n1\/15\nt DTSTR:DTSTR:\"h:mi:s.ms\"\na REPEAT:\" \" TIMER'COUNT\\t?\nSAY:\";t\"\/\";a#\"\n=\/\u00a0",0,0,"1\/15",0,"#db3"],[0,"500","300","1\/25",0,"#fi4"],[0,0,0,"1\/10",0,"#fb5"],[0,0,0,"1\/20",1,"#fb6"]]
Writing Apps
Apps are <b>animations</b> (see (:Writing Animations:)) that react to <b>user actions</b>, in particular to <b>mouse events</b> and <b>keyboard events</b>. For <em>PLS</em>, use special <b>global variables</b> that hold the last actual <em>Eas</em> event variables. Only the <em>KEYHELD</em> variable can be used directly. Here is an <u>overview</u> of how the <em>PLS</em> variables correspond to regular <em>Eas</em> event handling:<table><tr><td>regular <em>Eas</em></td><td><em>PLS</em> apps</td></tr><tr><td><code>! MOUSE'... THIS</code></td><td><code>_MouseFor</code></td></tr><tr><td><code>! MOUSE'...</code></td><td><code>_Mouse</code></td></tr><tr><td><code>MOUSEX</code></td><td><code>_MouseX</code></td></tr><tr><td><code>MOUSEY</code></td><td><code>_MouseY</code></td></tr><tr><td><code>MOUSEW</code></td><td><code>_MouseW</code></td></tr><tr><td><code>MOUSEB;"-";MOUSER</code></td><td><code>_MouseB</code></td></tr><tr><td><code>! KEY'DOWN ... KEY</code></td><td><code>_Key</code></td></tr><tr><td><code>! KEY'DOWN ... KEYX</code></td><td><code>_KeyX</code></td></tr></table>Let's write a simple little <em>SAY</em> app to see all those event variables in action: ----- On any page where there is an app that contains <code>_Key</code> or <code>_MouseW</code> or <code>_App</code> (also as just part of an identifier), the reader can enter <em>App</em> <em>Mode</em> wherein <b>keyboard controls</b> and the <b>mousewheel</b> are handled by the app(s) only. All it takes is to <b>press </b><kbd>Enter</kbd>. In <em>App</em> <em>Mode</em>, only <kbd>F5</kbd>, <kbd>F11</kbd>, <kbd>Ctrl</kbd><small>+</small><kbd> </kbd>, <kbd>Ctrl</kbd><small>+</small><kbd>-</kbd> and <kbd>Ctrl</kbd><small>+</small><kbd>0</kbd> retain their usual web browser control functionality. (You can test for <em>App</em> <em>Mode</em> by checking if <code>_AppM=1</code>.) Let's see the <em>_MouseFor</em> variable in action: ----- ----- When you work with a <em>DRAW'</em> <b>canvas</b>, you need to <b>transform</b> the mouse <b>coordinates</b> into <em>DRAW'HERE</em> coordinates. Here is how: ::::: Let's see that <u>in action</u>, including what would happen if you didn't calculate the position correctly, using classical coordinates in every case: ----- Besides <em>SAY</em> and <em>DRAW'</em> apps, you can of course also write full <em>DHT'</em> <b>apps</b>. For elements to get <em>_MouseFor</em> events, the <em>#id</em> must start with <code>#app</code>: ----- Of course you can also use <em>Eas</em> <em>AV'</em> <b>control</b> in your apps. Here is a litle <u>demo</u>: ----- And here is the whole <b>listing</b> of this demo: ::::: <u>Remember</u> that you apps will <b>only run while</b> they are <b>visible</b> in the viewport. For writing more <b>complex apps</b>, see (:Adding Eas Functions:). And while your document <b>cannot save</b> data to the reader's <b>harddisk</b>, remember that you can use the <em>COOKIE:</em> function of <em>Eas</em> to retain data in the current <b>web browser</b> either for the <b>session</b> (as a temporary cookie) or for any length of <b>time</b>.
["-- classical mode:\nDRAW'HERE:0 -100 100 100\nw DHT'W:Base!\nh DHT'H:Base!\nx _MouseX\/w*100\ny _MouseY\/h*100\n::\n-- graph mode:\nDRAW'HERE:0 0 100 100\nw DHT'W:Base!\nh DHT'H:Base!\nx _MouseX\/w*100\ny 100-_MouseY\/h*100\n::\n-- artist mode (default):\nDRAW'HERE!\nw DHT'W:Base!\nh DHT'H:Base!\nx _MouseX\/w*200-100\ny 100-200*_MouseY\/h\n::\n-- radial mode:\n-- ... JUST DON'T! ;)","=\\\n1\/30\nb Base!\n? \"\"=DHT'INNER:b\n CSS:b \"background:#FC9\"\n CSS:b \"padding:2em\"\n d..(\"am\" \"Click me or\" \"#FFF\")\n d..(\"cb\" \"Cymbals\" \"#A5F\")\n d..(\"hh\" \"Hi-Hat\" \"#5AF\")\n d..(\"th\" \"High Tom\" \"#5FA\")\n d..(\"sn\" \"Snare\" \"#AF5\")\n d..(\"bd\" \"Basedrum\" \"#F5A\")\n d..(\"tl\" \"Low Tom\" \"#FA5\")\n _appDrum ?\n f b\n @@ d\n ? @@=1|4\n f DHT'DIV:b\n \/\n d DHT'DIV:f \"#appDrum_\";@[0]\n _appDrum..d\n k @@??@@\\\\\"Enter\"\n DHT'INNER:d @[1];\/\"press [;k]\"\n CSS:d \"display:inline-block\"\n CSS:d \"margin:5pt\"\n CSS:d \"border:outset 5pt \";@[2]\n CSS:d \"border-radius:33%\"\n CSS:d \"background:\";@[2]\n CSS:d \"padding:0.5em\"\n CSS:d \"cursor:pointer\"\n CSS:d \"box-shadow:0 0 2px 5px\"\n CSS:d \"display:none\"\n \/\n _appDrumAM 2\n\/\n? _AppM#_appDrumAM\n _appDrumAM _AppM\n @@ _appDrum\n v @@||_AppM??0\\\\1\n v v??\"inline-block\"\\\\\"none\"\n CSS:@ \"display:;v\"\n \/\n ? _AppM\n GOTO:Base!\n \/\n\/\n@@ _appDrum\n ? _MouseFor=@\n ? _Mouse=\"Down\"\n s \"inset\"\n k PART:@ 9\n ? k=\"am\"\n -- enter App Mode\n Appy:1\n \\\n f k;\".mp3\"\n AV'PLAY:f 1\n \/\n \\\n s \"ridge\"\n \/\n \\\n s \"outset\"\n \/\n CSS:@ \"border-style:;s\"\n\/\nk _Key\n? k,_AppM\n f _appDrum[k]\n ? f\n f PART:f 9\n AV'PLAY:f;\".mp3\" 1\n \\\n k DICE:1 3\n AV'PLAY:\"k;k\";\".mp3\" 1\n \/\n _Key ?\n\/\n? _MouseFor=Base!\n ? _Mouse=\"Out\"\n _appDrumMI 0\n AV'PLAY:\"mo.mp3\" 1\n \\ \"Move\",_appDrumMI#1\n _appDrumMI 1\n AV'PLAY:\"mi.mp3\" 1\n \/\n _Mouse ?\n\/\n=\/"]
[["=\\\n1\/20\no \"_MouseFor = \"\no;MAP:_MouseFor\no;\/\" _Mouse = \"\no;MAP:_Mouse\no;\/\" _MouseX = \"\no;MAP:_MouseX\no;\/\" _MouseY = \"\no;MAP:_MouseY\no;\/\" _MouseW = \"\no;MAP:_MouseW\no;\/\" _MouseB = \"\no;MAP:_MouseB\no;\/\/\" _Key = \"\no;MAP:_Key\no;\/\" _KeyX = \"\no;MAP:_KeyX\no;\/\" KEYHELD = \"\no;MAP:KEYHELD\no SSEDIT:o \" \" \" \"\n? _AppM#1\n o;\/\/\"Press [Enter]!\"\n\/\nSAY:o\n=\/\u00a0",0,0,"1\/20",1,"#db0"],["- ... -\no \"(I am app \";Base!;\")\"\/\no;\/\"_MouseFor = \"\no;MAP:_MouseFor\n-- ... -",0,0,"1\/20",0,"#db1"],["- ... -\no \"(I am app \";Base!;\")\"\/\no;\/\"_MouseFor = \"\no;MAP:_MouseFor\n-- ... -",0,0,"1\/20",0,"#db2"],[0,"500","375","1\/20",0,"#fi3"],["=\\\n1\/20\nk \"#appdemoBtn\"\n? \"\"=DHT'INNER:Base!\n DHT'NEW:Base! \"button\" k\n CSS:k \"padding:2em\"\n CSS:k \"cursor:pointer\"\n CSS:k \"font-weight:bold\"\n\/\nc \"Click me!\"\n? _MouseFor=k\n ? _Mouse=\"Click\"\n _appdemoBtn 30\n \\\n c \"Lick me!\"\n \/\n _Mouse ?\n\/\n? _appdemoBtn\n _appdemoBtn - 1\n c \"Booo! :(\"\n\/\nDHT'INNER:k c\n=\/\u00a0",0,0,"1\/20",0,"#db4"],[0,0,0,"1\/30",1,"#fb5"]]
Adding Eas Functions
In your <i>project root</i>, you can create a file <code>add.eas</code> wherein you can define functions that you can use in (:Writing Apps:), (:Writing Animations:) and in (:Rendering Static Eas:). <em>PLS</em> will let the reader switch to <em>App</em> <em>Mode</em> (giving your apps almost full control over <b>mouse</b> and <b>keyboard events</b>) whenever your <code>=\ ... =/</code> code contains <code>_Key</code> or <code>_MouseW</code> or <code>_App</code>, even if only as part of an identifier. Functions that you use in apps that need <em>App</em> <em>Mode</em> should therefore ideally contain <code>_App</code> in their name, so that you are on the safe side. Functions can be used by <b>various</b> of your apps and will <b>declutter</b> your on‑page coding. If you need a certain <b>database</b> (of course <b>read‑only</b> in the baked target file), it's a good idea to define this (as a more or less complex <b>array</b>) in a function that can be used by various apps and/or other <code>add.eas</code> functions. Here is an <u>example</u>: ::::: ----- <u>Tip</u>: See (:Custom Page Rendering:) for <b>reserved function names</b>.
["-- in add.eas:\n\nFruit i:\n f..\"kiwi\"\n f..\"banana\"\n f..\"cherry\"\n f..\"mango\"\n f..\"peach\"\n f..\"plum\"\n -- etc. --\n ? i=\"\"\n @\n i DICE:0 f?-1\n \/ i#_lastfruit .. 100\n \/\n _lastfruit i\n << f[i]\n\/\n::\n-- using it in an app\n-- or in a function,\n-- for a random fruit:\n\nSAY:\"Do you want some \";Fruit!;\"?\""]
[[0,0,0,"1\/2",0,"#fb0"]]
Code Demos
To have a <b>code block</b> with an <b>arrow</b> pointing to its (apparent) <b>result</b>, just <b>precede</b> your <b>page code</b> (<code>=\ ... =/</code>) with the <b>display code</b> followed by a <b>line</b> that contains only one or more <em>equals‑signs</em>. The <b>result</b> will be shown in a <b>frame</b> matching the display code block. ::::: <div class=cbl style="margin:-0.5em auto -1.5em"><b style=color:#888;font-size:2em>⮟</b></div> ----- Of course it works with all three types of code/apps: ::::: <div class=cbl style="margin:-0.5em auto -1.5em"><b style=color:#888;font-size:2em>⮟</b></div> ----- <u>Notice</u> that <b>oversized</b> canvasses will be limited to <b>fit</b> in <b>50%</b> of the viewport width and <b>70%</b> of its <b>height</b>. The <b>display code</b> can of course be very <b>different</b> from the <b>actual code</b> (but do better not <b>confuse</b> your readers!): ::::: <div class=cbl style="margin:-0.5em auto -1.5em"><b style=color:#888;font-size:2em>⮟</b></div> ----- The <b>vertical arrows</b> used throughout this document however are just brute <em>HTML</em>: ::::: and <b>above text demos</b> (bottom-margin <code>-2.3em</code> instead of <code>-1.5em</code>): :::::
["=\\\n-- a text demo:\nSAY:\"Works fine!\"\n=\nSAY:\"Works fine!\"\n=\/","=\\\n-- a pic demo:\nDRAW'NOISE!\nDRAW'SCANLINES!\nDRAW'LAYER!\nDRAW'COPY:_lgc\nDRAW'SHAKE!\n=\n0 900:300\nDRAW'NOISE!\nDRAW'SCANLINES!\nDRAW'LAYER!\nDRAW'COPY:_lgc\nDRAW'SHAKE!\n=\/","=\\\n-- a DHT demo:\nd DHT'DIV:Base!\nDHT'INNER:d \"Hello\"\nCSS:d \"background:#FF0\"\nCSS:d \"color:#C00\"\n=\n1\/30\nb Base!\nd _demoFaker\nt TIMER'COUNT\nm \"Hello\"\n? \"\"=DHT'INNER:b\n d DHT'DIV:b\n DHT'INNER:d m\n CSS:d \"background:#FF0\"\n CSS:d \"font-size:3em\"\n _demoFaker d\n _demoFakerT t+90\n\/\n? t>_demoFakerT,t\\20=0\n o DHT'INNER:d\n p DICE:0 4\n ? p=1|4\n l \"aeiou\"\n \\\n l \"bdfghjklmnprstvwyz\"\n ? p=0\n l UCASE:l\n \/\n \/\n ? DICE:0 2\n o[p] m[p]\n \\\n o[p] l[DICE:0 l?-1]\n \/\n DHT'INNER:d o\n\/\n=\/","<div class=cbl style=\"margin:-0.5em auto -1.5em\">\n<b style=color:,#888;font-size:2em>\u2b9f<\/b><\/div>","<div class=cbl style=\"margin:-0.5em auto -2.3em\">\n<b style=color:,#888;font-size:2em>\u2b9f<\/b><\/div>"]
[["-- a text demo:\nSAY:\"Works fine!\"",0,0,0,0,"#db0"],["-- a pic demo:\nDRAW'NOISE!\nDRAW'SCANLINES!\nDRAW'LAYER!\nDRAW'COPY:_lgc\nDRAW'SHAKE!","900","300","0",0,"#di1"],["-- a DHT demo:\nd DHT'DIV:Base!\nDHT'INNER:d \"Hello\"\nCSS:d \"background:#FF0\"\nCSS:d \"color:#C00\"",0,0,"1\/30",0,"#db2"]]
Unsearchable Secrets
Any parts of your texts that you put in <b>triple</b> <em>parentheses</em> (and that are at least two characters long) will become <b>unsearchable</b>. They will <b>still</b> be <b>highlighted</b> in <b>search results</b> of the page, but the page will not be found by it. So although the sequences (((<em>sdf</em>))) and <em>dfg</em> are both visible here, you can only find the latter, because (((<em>sdf</em>))) has been written as <code>(((,(((@sdf))))))</code>. And <u>notice</u> that if you search only for (((<code>df</code>))), it will be highlighted in both cases. This feature is further discussed in (:Custom Page Rendering:). One thing to <u>mind</u> is that <em>Unsearchable</em> <em>Secrets</em> should stand <b>whitespace‑separated</b> from any <b>searchable characters</b> (letters, digits, underscore, minus dash, forward slash, apostrophe), or else you will generate search matches that <b>cannot be</b> <b>highlighted</b>, like here when you search for <code>j<div style=display:inline></div>kl</code> (this instance has been made "unsearchable" by a hidden <em>HTML</em> blocktag between the <code>j</code> and the <code>k</code>): <em>jk(((oo)))l</em> has been written as <code>jk(((,(((oo))))))l</code> and will thus be <b>found</b> (looking to the search algorithm like the <code>oo</code> wasn't there), but it <b>cannot be highlighted</b> as a search match. To <b>escape</b> the <em>Unsearchable</em> <em>Secret</em> markup, simply put a <em>comma</em> after any of the <em>opening</em> <em>parentheses</em>:<table><tr><td><code>(,,((qwe)))</code> →</td><td>(,((qwe)))</td></tr><tr><td><code>((,,(qwe)))</code> →</td><td>((,(qwe)))</td></tr><tr><td><code>(((,,qwe)))</code> →</td><td>(((,qwe)))</td></tr></table>
Custom Page Rendering
When (:Adding Eas Functions:), you can define two <b>special functions</b> to influence the rendering of the pages of your document: <ol><li><em>EarlyPageRender</em><br>takes the <b>raw page contents</b> as its <b>one argument</b> and must <b>return</b> them with any <b>modifications</b> that you want to make.</li> <li><em>FinalPageRender</em><br>takes the <i>almost</i> <b>final</b> <em>HTML</em> <b>output</b> of the page as its <b>one argument</b> and must <b>return</b> it with any <b>modifications</b> that you want to make.</li></ol> So, <b>if</b> you define these functions, they must <b>at least</b> look like this: ::::: <u>Beware</u>: If you define them and do not <b>return</b> their <b>input argument</b> (changed or unchanged), your document will not render any pages at all anymore. It's a good idea to use (:Unsearchable Secrets:) to mark points in pages where you want to display <b>programmed</b> or <b>specially styled</b> content. Just <b>replace</b> the <em>Unsearchable</em> <em>Secret</em> (and perhaps any adjacent <b>whitespace</b> if you start or end your pages with it) with whatever you like. Any <b>links</b> (page links, web links, pictures, MP3 audio tracks, downloads) that you put on the page upon <em>EarlyPageRender</em> in regular <em>PLS</em> <b>markup syntax</b> will become as real as if you had put them in the original <b>page file</b>. In <em>EarlyPageRender</em>, you could also set a <b>global variable</b> after <b>stripping</b> away your marker, and <b>react</b> to this global variable then in the <em>FinalPageRender</em> (after any search match highlighting has been performed and other such steps). You cannot only use <em>Custom Page Rendering</em> for adding <b>project‑specific</b> elements to your document, but also to show different content depending on whether the document is on your <b>original website</b> or not (e.g. downloaded or mirrored). Just use a <b>test</b> like the following: ::::: <u>Notice</u> that most other <b>markups</b> have already been <b>rendered</b> by <code>PLSbake.php</code> way <b>before</b> <em>EarlyPageRender</em>, so you need to use <em>HTML</em> in your <b>output</b>, except for any link‑type markup (see above).
["EarlyPageRender o:\n << o\n\/\n\nFinalPageRender o:\n << o\n\/","originalURL \"Molaskes.info\/PLS\"\nu RXESC:originalURL\n? RXHAS:URL! \"^https?:\/\/(www\\.)?;u\" 1\n -- output if on the official website\n\\\n -- output if downloaded or mirrored\n\/"]