Difference between revisions of "Plasma:esHTML"
Tsar hoikas (Talk | contribs) m (Fixed spelling of "color") |
Tsar hoikas (Talk | contribs) (Fixup covers) |
||
(11 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. 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: | 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: | ||
− | + | <syntaxhighlight lang="html"> | |
− | <blockquote> | + | <font face=Courier size=20 color=ff0000> |
− | + | </syntaxhighlight> | |
+ | <blockquote>Font color is the hexadecimal code you will find in your graphics program when you use the color picker</blockquote> | ||
− | + | You may also request '''bold''' or ''italics'' by using the <code>style</code> attribute: | |
− | + | <syntaxhighlight lang="html"> | |
− | + | <font style=bi> | |
− | + | </syntaxhighlight> | |
− | + | 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: | ||
+ | <syntaxhighlight lang="html"> | ||
+ | <p align=center> | ||
+ | </syntaxhighlight> | ||
+ | |||
+ | |||
+ | = Content Flow = | ||
+ | == Page Margins == | ||
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. | ||
− | + | <syntaxhighlight lang="html"> | |
+ | <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. | 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. | ||
− | + | <syntaxhighlight lang="html"> | |
+ | <pb> | ||
+ | </syntaxhighlight> | ||
+ | |||
+ | == Line Spacing == | ||
+ | Line spacing can also be adjusted: | ||
+ | <syntaxhighlight lang="html"> | ||
+ | <font spacing=1> | ||
+ | </syntaxhighlight> | ||
+ | |||
+ | |||
+ | = 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 == | ||
+ | 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. | |
− | + | ||
− | < | + | 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.
Contents
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">