Latest revision as of 10:09, 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

Images may be added into journals. Before you attempt to add the image into your Age, be sure to setup an Image Library Modifier with the images you want to appear in the journal.

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".

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.

Book Cover

A journal may optionally define an image to use as its "cover." The following attributes may be used:

src (REQUIRED): The name of the texture to display in the book.
tint (argument: color): Color in hexadecimal used to tint the cover image. Note that alpha values are ignored in the tint.

A typical setup for a journal cover is:

<cover src="xYeeshaBookCover*1#0.hsm">

@@ Line 1: / Line 1: @@
-=== Plasma esHTML ===
+Plasma offers several options for customizing the appearance of your journals in game. These can be altered by adding [https://en.wikipedia.org/wiki/HTML 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.
-Making a journal by simply writing text in a file is ok, but there are a several options available to change the layout and appearance of your Journal's content.
+= Text Options =
-These can altered by adding tags (Plasma's version of HTML code) within the text of your Journal. These tags do not need to be in any particular order and their effect will apply to all the text that appears after them until there is a new command to change it. These tags are always placed inside angle brackets ( < > ).
+== Typeface ==
-The single set of these brackets can contain as many commands as you like, but remember, all the text that appears after those brackets will be affected by those commands.
+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.
-Here is a list of commands that will help you layout your Journal's text to your liking:
-===== Typeface Appearance: =====
-You can use any of the fonts that are available in your dat folder. You can adjust the size and the colour. The built-in font files in your dat folder have the file extension .p2f but that file extension is '''NOT''' required by the command.
-Use the font's  name '''only'''.
 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:
-  ''<''face=Courier font size=20 color=ff0000''>''
+<syntaxhighlight lang="html">
-<blockquote> font colour is the hexadecimal code you will find in your graphics program when you use the colour picker</blockquote>
+<font face=Courier size=20 color=ff0000>
-Remember, ALL the text in your file that comes AFTER this command 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.
+</syntaxhighlight>
+<blockquote>Font color is the hexadecimal code you will find in your graphics program when you use the color picker</blockquote>
-For example, if you wanted most of your text to be black (000000) and just one word in red, then you would put
+You may also request '''bold''' or ''italics'' by using the <code>style</code> attribute:
- ''<''face=Courier font size=20 color=000000''>''
+<syntaxhighlight lang="html">
-at the beginning of your Journal's text and then, before the word you wanted in red you would add
+<font style=bi>
- ''<''face=Courier font size=20 color=ff0000''>''
+</syntaxhighlight>
-and then, immediately after that word, you would put
+You will need to use either '''b''', '''i''', or '''bi'''. Be aware that using the longform '''bold''' or '''italics''' will not function.
- ''<''face=Courier font size=20 color=000000''>''
-to make the rest of the Journal's text black again.
+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, centre or right of the page using the align command:
+== Text alignment ==
-  ''<''align=center''>''
+You can have the text aligned to the left, center or right of the page using the align command:
-===== Page margins : =====
+<syntaxhighlight lang="html">
+<p align=center>
+</syntaxhighlight>
+= 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>''>''
+<syntaxhighlight lang="html">
-===== Page Break : =====
+<margin left=62 right=62 top=48>
+</syntaxhighlight>
+== 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''>''
+<syntaxhighlight lang="html">
-===== Appearance and Position of Images : (see also below) =====
+<pb>
-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:
+</syntaxhighlight>
-* img src = (see below for more information on this)
-* opacity = How transparent you want the image to be on the page
+== Line Spacing ==
-* 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.
+Line spacing can also be adjusted:
-* align = how you want it aligned on the page
+<syntaxhighlight lang="html">
-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:
+<font spacing=1>
-   ''<''<img src="yourimage.hsm" opacity=0.7 align=center blend=alpha>''>''
+</syntaxhighlight>
-===== Closed Book cover : (see also below) =====
-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:
+= Images =
- ''<cover src="yourcover.hsm">''
+Images may be added into journals. Before you attempt to add the image into your Age, be sure to setup an [[Korman:Plasma_Modifiers#Image_Library|Image Library Modifier]] with the images you want to appear in the journal.
-where "your cover.hsm" is the name of your cover image file in the image library.
+== 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:
+<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.
+== Book Cover ==
+A journal may optionally define an image to use as its "cover." The following attributes may be used:
+* src ('''REQUIRED'''): The name of the texture to display in the book.
+* tint (argument: ''color''): Color in hexadecimal used to tint the cover image. Note that alpha values are ignored in the tint.
-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.
+A typical setup for a journal cover is:
+<syntaxhighlight lang="html">
+<cover src="xYeeshaBookCover*1#0.hsm">
+</syntaxhighlight>

Guild of Writers

Navigation

Toolbox

Meta

Difference between revisions of "Plasma:esHTML"