Difference between revisions of "Plasma:esHTML"

m (→‎Typeface: Fix wording.)
(Fixup covers)
 
(7 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
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. Unlike HTML, however, 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, this means that Plasma markup does not have closing tags or a tree structure--it is analogous to markdown using HTML tags.
+
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.
  
 
= Text Options =
 
= Text Options =
 
== Typeface ==
 
== Typeface ==
−
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.
+
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.
−
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:
 
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 color is the hexadecimal code you will find in your graphics program when you use the color picker</blockquote>
+
<font face=Courier size=20 color=ff0000>
−
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.
+
</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 ==
 
== Text alignment ==
−
You can have the text aligned to the left, centre or right of the page using the align command:
+
You can have the text aligned to the left, center or right of the page using the align command:
−
  ''<''align=center''>''
+
<syntaxhighlight lang="html">
 +
<p align=center>
 +
</syntaxhighlight>
 +
 
  
 
= Content Flow =
 
= Content Flow =
Line 26: Line 30:
 
This defines the border in pixels at which the text is written.
 
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.
 
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">
 +
<margin left=62 right=62 top=48>
 +
</syntaxhighlight>
  
 
== Page Break ==
 
== 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.
 
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">
 +
<pb>
 +
</syntaxhighlight>
 +
 
 +
== Line Spacing ==
 +
Line spacing can also be adjusted:
 +
<syntaxhighlight lang="html">
 +
<font spacing=1>
 +
</syntaxhighlight>
 +
 
  
 
= Images =
 
= Images =
 +
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.
 +
 
== 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 ==
+
== 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)
+
A journal may optionally define an image to use as its "cover." The following attributes may be used:
−
To show the cover you need to start your Journal's text file with the following command:
+
* src ('''REQUIRED'''): The name of the texture to display in the book.
−
''<cover src="yourcover.hsm">''
+
* tint (argument: ''color''): Color in hexadecimal used to tint the cover image. Note that alpha values are ignored in the tint.
−
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
+
  
−
<blockquote>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>

Latest revision as of 11: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".

  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.


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