Strange Eons
Advanced Mark-up Example

Send Feedback      Home Page > Strange Eons >Miriam's Basement > Mark-up Tricks

To examine this example, download it as an .eon file (5 kB) and open it in Strange Eons. (The example is in the Story So Far box.) Note that when you click on the Back Sheet tab, it will take a few moments for the sheet to appear because the mark-up engine will have to download one of the images in the example from the Internet.

A complete list of the tags that can be used in Strange Eons is available here.

<!
  Strange Eons Mark-up Example

  The built-in cards include many examples of the more commonly employed 
  mark-up tags. This example demonstrates less-frequently used tags that may be 
  used to achieve special effects.

  The backslash after this comment prevents the following white space from 
  being included in the printed text. It helps keep the mark-up source text neat 
  and easy to read.

  You will probably find editing this file a bit slow, as it uses several 
  images. The renderer scales them each time the card is redrawn, which is 
  time-consuming.

>\
<!

  The "<colour>" and "<bgcolour>" tags accept standard web colours in #rrggbb 
  format.  (The spellings "color" and "bgcolor" are also accepted, but the
  opening and closing tags must use the same spelling.)

  Colours can optionally be defined with transparency. To do that add two 
  extra digits to the front of the colour to specify its alpha, or opacity
  (00 = completely transparent, ff = completely opaque).

  Instead of using hexadecimal, you can also specify the colour as a hue (angle 
  from 0 to 360), saturation (0 to 1), brightness (0 to 1) and (optionally) alpha 
  (0 to 1). An example of this is given further down.

>\

<middle><left><size 10>This <bgcolour #33ffff00>mark-up text</bgcolour> demonstrates
some of the new and/or less common aspects of Strange Eons's mark-up system. 
See the "comments" (the text written between <lt>!< >...< ><gt>) for more
information.</size>

<!
  The latest version of the renderer will automatically produce curly double 
  and single quotes when you use plain (straight) quotes. If it gets things wrong 
  you can force it to use a particular quote type (see the tag table web page to 
  learn how).

  Besides giving an excuse to talk about quotes, the word "comments" was placed 
  in quotes because there is no comment tag in Strange Eons. I'm just taking 
  advantage of the fact that Strange Eons ignores any tags that it does not 
  recognize.
>\

<!-
  We will create several new tags with the "define" facility. This tag 
  takes two parameters, a name for the new tag and the text to replace it with. If 
  the replacement contains spaces or other tags, surround it in straight quotes 
  ("like this").

  Be careful when defining tags, as currently the program offers no protection 
  against recursive definitions (a definition that uses the tag that it defines, 
  or uses another tag that ultimately refers to the tag it defines). When a 
  recursive tag is expanded, the result will be an infinite loop that you cannot 
  break except by killing the Strange Eons process.

  The definition of "<divider>" makes use of one of the characters in the 
  "private use area" of the standard font included with Strange Eons for printing 
  body text, Linux Libertine. The tag "<u+xxxx>" prints the Unicode character with 
  hexadecimal value xxxx.

  I define "tab" to be the tab character to make it easy to see when I use a 
  tab in the mark-up. You could simply press the tab key instead.
  A more interesting definition is the "skill-line" tag, as it accepts 
  parameters which will replace the @1;, @2;, etc., used in the definition.
>\

<define divider "<center><size 48><u+e006></size></center>"><tabwidth 
.8in><define tab "<u+9>"><divider> \

<!
  Inline images can be included with the "<image>" tag. The 
  format of this tag is:

  "<image file-name [width [height]] >"

  The file-name can be a local file or a URL. Note that the image is not saved 
  with the Strange Eons file. If you want to share a .eon file that includes an 
  inline image, the best way to do it is to upload the image to a web page and 
  then use the image's URL as the file name.

  If no width or height is given, the image is assumed to be at a resolution of 
  150 DPI. If only a width is given, the height is determined automatically based 
  on the width (i.e., the aspect ratio is maintained).

  A width or height is given as a decimal number that may be followed by a 
  unit. Do not put any space between the number and the unit. The possible units 
  are cm, in (inches), and pt (points). If no unit is given, cm are assumed. (We 
  already saw a width specified above as the width for tab stops, in the "<tabwidth>"
  tag.)
>\

<image "http://www.sfu.ca/~cjenning/eons/samples/web-site-sampler.png" 1in>

<define skill-line "<tt>@2;<@1;><tab>@3;<tab>@4;<tab>@5;<tab>@6;</@1;></tt>">\

<skill-line blue ANGER 0 1 2 3> <skill-line red DESPAIR 5 4 3 2>

<!
  A bit of an aside... but see the Russian sailor example character for 
  another example of non-Latin characters.
>

<left><size 12>Handling of right-to-left languages:
שלום</size>

<!
  A similar idea, this time defining a mini doom track:

  Note: the definition of doom-impl assumes that the doom tokens are stored
  as JPEG2000 images. Prior to version 2.00, they were stored as PNG images.
  If you are using an older version of SE, replace the ".jp2" with ".png".
>\

<center><define doom-impl "<image res://doomtokens/dt@2;@1;.jp2>">\
<define doom "<doom-impl @1; 0>" >\ 
<define red-doom "<doom-impl @1; -red0>" >\
<doom 1><tab><doom 2><tab><doom 3>
<doom 4><tab><red-doom 5>

<center><colour 60 .8 .5><family "SansSerif"><b>Have you seen \
<image res://icons/ky-expansion-icon.png 18pt>?</colour></b></family>
<divider>
<right><size 18><u+e003> <i>fin</i> <thsp><u+e001></size>
<image res://icons/application/128.png 
0.5cm 0.5cm><repeat 3 "<emsp>">

Return to Home Page    Send Feedback

June 27, 2007  — Updated January 10, 2010