Difference between revisions of "Plasma:esHTML"

(Fixup content flow)
(Completely document the <img> tag.)
Line 45: Line 45:
 
<font spacing=1>
 
<font spacing=1>
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
  
 
= Images =
 
= Images =
 
== Appearance and Position of Images  ==
 
== Appearance and Position of Images  ==
Images can be placed into your Journal along with the text (see below). To change their position and appearance in your Journal you can use these commands:
+
Images can be placed into your Journal along with the text (see below). To change their position and appearance in your Journal you can use these attributes:
* img src = (see below for more information on this)
+
* '''align''' (options: ''left'', ''center'', ''right''): Where you want the image aligned on the page.
* opacity = How transparent you want the image to be on the page
+
* '''blend''' (options: ''alpha''): If your texture is translucent, you will need to use ''blend=alpha'' for the translucency to function. This is useful for things like images that you want to look like they have been sketched into the Journal.
* blend = If your image has an alpha layer you must choose "alpha" in order for the alpha to show. This is useful for things like images that you want to look like they have been sketched into the Journal.
+
* '''check''' (arguments: ''off color'',''on color''): This allows the image to function as a checkbox, much like the Yeesha pages in the Relto book do. The colors are in hexadecimal and support alpha transparency.
* align = how you want it aligned on the page
+
* '''glow''' (arguments: ''min opacity'',''max opacity''): This sets up an image that glows over time. See the opacity argument for more information.
A typical command for an image that has an alpha layer and you wish to appear in the centre of the page and with an addition transparency would be:
+
* '''link''' (argument: ''link ID''): This is used to receive click events in case of a linking panel or check box. When clicked, the image will send a book event to the Python script's OnNotify method of type kNotifyImageLink with the given link ID.
  ''<img src="yourimage.hsm" opacity=0.7 align=center blend=alpha>''
+
* '''opacity''' (range: 0.0-1.0): How opaque you want the image to be on the page where 1.0 is fully opaque and 0.0 is fully transparent.
 +
* '''pos''' (arguments: ''x'',''y''): Set the absolute position of the image on the page.
 +
* '''resize''' (options: ''no''): This attribute is very misleading. It indicates that you '''''have not resized''''' your image to match the ratio of the book, and Plasma should resize the image for you. Use this if your image appears "squashed".
 +
* '''src''' ('''REQUIRED'''): the name of the texture to display in the book
 +
 
 +
A typical setup for an image that is transparent and you wish to appear in the center of the page would be:
 +
<syntaxhighlight lang="html">
 +
<img src="yourimage.hsm" align=center blend=alpha>
 +
</syntaxhighlight>
 +
 
 +
 
 +
=== GOTCHAS ===
 +
Images in journals have several [https://en.wikipedia.org/wiki/Gotcha_(programming) "GOTCHAS"].
 +
# The '''glow''' and '''check''' attributes are mutually exclusive. Setting one will unset the other. Therefore, using both on a single image will result in undefined behavior.
 +
# If an image is too large or positioned on a page using '''pos''' such that the image goes even partially outside of the bounds of the page, the entire image will not be rendered.
 +
 
  
 
== Closed Book cover ==
 
== Closed Book cover ==

Revision as of 10:02, 7 September 2020

Plasma offers several options for customizing the appearance of your journals in game. These can be altered by adding HTML-like tags within the text of your Journal. These tags apply their effect to all the text that appears after them until there is a new tag to change change the effect. If you are already familiar with HTML, Plasma markup does not have closing tags--it is analogous to markdown using HTML tags.

Text Options

Typeface

You can use any of the fonts that are available in your dat folder. You can adjust the size and the color. The built-in font files in your dat folder have the file extension .p2f but should not be supplied in the font name.

For example, if you want to use the Courier font at size 20 and have it displayed in red then the code to put in your text file would be:

<font face=Courier size=20 color=ff0000>
Font color is the hexadecimal code you will find in your graphics program when you use the color picker

You may also request bold or italics by using the style attribute:

<font style=bi>

You will need to use either b, i, or bi. Be aware that using the longform bold or italics will not function.

Remember, ALL the text in your file that comes AFTER this tag will be formatted this way until you use a new command to change it. You can add new commands at any time during your Journal's text.

Text alignment

You can have the text aligned to the left, center or right of the page using the align command:

<p align=center>


Content Flow

Page Margins

This defines the border in pixels at which the text is written. IIRC, this works per-page and not per-line. Which means you cannot change the margin for a single line, but can change it for the full page.

<margin left=62 right=62 top=48>

Page Break

This forces the Journal to make a new page for your text. For example, if you wanted each journal entry to appear on a new separate page.

<pb>

Line Spacing

Line spacing can also be adjusted:

<font spacing=1>


Images

Appearance and Position of Images

Images can be placed into your Journal along with the text (see below). To change their position and appearance in your Journal you can use these attributes:

  • align (options: left, center, right): Where you want the image aligned on the page.
  • blend (options: alpha): If your texture is translucent, you will need to use blend=alpha for the translucency to function. This is useful for things like images that you want to look like they have been sketched into the Journal.
  • check (arguments: off color,on color): This allows the image to function as a checkbox, much like the Yeesha pages in the Relto book do. The colors are in hexadecimal and support alpha transparency.
  • glow (arguments: min opacity,max opacity): This sets up an image that glows over time. See the opacity argument for more information.
  • link (argument: link ID): This is used to receive click events in case of a linking panel or check box. When clicked, the image will send a book event to the Python script's OnNotify method of type kNotifyImageLink with the given link ID.
  • opacity (range: 0.0-1.0): How opaque you want the image to be on the page where 1.0 is fully opaque and 0.0 is fully transparent.
  • pos (arguments: x,y): Set the absolute position of the image on the page.
  • resize (options: no): This attribute is very misleading. It indicates that you have not resized your image to match the ratio of the book, and Plasma should resize the image for you. Use this if your image appears "squashed".
  • src (REQUIRED): the name of the texture to display in the book

A typical setup for an image that is transparent and you wish to appear in the center of the page would be:

<img src="yourimage.hsm" align=center blend=alpha>


GOTCHAS

Images in journals have several "GOTCHAS".

  1. The glow and check attributes are mutually exclusive. Setting one will unset the other. Therefore, using both on a single image will result in undefined behavior.
  2. If an image is too large or positioned on a page using pos such that the image goes even partially outside of the bounds of the page, the entire image will not be rendered.


Closed Book cover

If you want your Journal to first display as a closed book then you must put a cover image in your image library (see below) To show the cover you need to start your Journal's text file with the following command:

<cover src="yourcover.hsm">

where "yourcover.hsm" is the name of your cover image file in the image library. This filename name must always have a .hsm file extension

If you fail to include this command in your Journal text file then the Journal will first appear as open, even if you have selected the "closed" option in the modifier.