Styling with the text processor

Styling just changes the appearance of the text, not its content. You can also do this with HTML/CSS, but for short sections within a paragrap this is easier and less typing. If you want to change the whole paragraph, you are better off using a CSS class with the msg function.

Here is a simple example of styling text:

This text has {i:a section} in italic.

Simple styling

directive	effect	example
i	italic	example
b	bold	example
u	underlined	example
s	strike-through	example
code	mono-spaced font	example
sup	superscript	example
sub	subscript	example
huge	200% the size	*
big	150% the size	*
small	80% the size	*
tiny	60% the size	*
smallcaps	small capitals	*

* The Github wiki software does not allow some styles to be displayed.

Capitalise

Use cap to capitalise the first letter of the text, or title to capitalise the first letter of every word - all other letters will be unchanged. Behind the scenes these use sentenceCaseForHTML and titleCaseForHTML; for details of the implications see here.

User upper or lower to change every latter to upper case or lower case respectively.

Colours

You can also use "colour" (or "color") and "back" to set the foreground and background colour, together with a colour.

This text has {colour:red:some of it} in red.

If you want to go a bit more extreme, use the "rainbow" directive, which turns every character a different character. The simple version uses the default list, but you can provide your own list to suit the colour scheme of your page (note that you cannot nest other directives or HTML code within a rainbow directive).

Some text {rainbow:with some quite colorful writing}.
Some text {rainbow:red:blue:with some not so varied colour}.

Colours must be either standard web colour names or hexadecimal triples; for more on both see here. Bear in mind about 5% of the population has some degree of colour-blindness, so choose your colours thoughtfully.

For all colour option, test what it looks like in dark mode. It may become unreadable! An alternative - if not straightforward - is to use class and to set up the class in the CSS to change with dark mode.

Blur

You can blur text with the "blur" directive. This requires a number, the degree of blur. A value of 0 will look like normal, 2 or 3 are readable, higher than that, and it will be obscured.

{blur:3:If you were not so drunk you could read this}.

Fonts

Use the "font" directive to change the font family.

This text has {font:sans-serif:some of it} in a plain font.

You need to be a little bit careful to ensure the user has the font on their computer. There is a page here which gives some suggested safe fonts.

Alternatively, you can download fonts from Google in the stylesheet. You should pick out all the fonts you need, then go to the list of families at the bottom, go to "Embed", then "Import" and get some text like this (in this example I am using two font families; Krona One and Trade Winds):

@import url('https://fonts.googleapis.com/css?family=Krona+One|Trade+Winds&display=swap');

Paste it into the top of the style.css file, and you are good to go.

Class

Use the class directive to have the section of text in a given CSS class (which should be defined in a .css file somewhere, probably style.css). The advantage of this for colours is that your CSS can include a definition for dark mode.

Dialogue

To highlight speech, and perhaps differentiate between different speakers, you can put spoken text inside a dialogue directive, which will also add quotation marks.

This has three modes. All of these put quote marks around the text for you. By default single quotes are used, but you can modify to your liking in the settings. For French style, for example, it would look like this.

settings.openQuotation:"<<",
settings.closeQuotation:">>",

Dialogue with a class

If the first parameter starts with a dot, this is taken as a CSS class, and this will be applied to the rest of the parameters. In this example the class "my-css-class" is used. If the class does not exist, the text will appear, but no styling will be applied.

"Kyle says; {dialogue:.my-css-class:Hello!}"

Dialogue specified

In the second mode, you specify the styling in the directive. For the first parameter, if it includes "i", the text will be in italic, if there is a "b" it will be in bold, if a "u" it will be underlined. The second parameter is the colour, which can be any HTML colour. These two examples both set the text to be cyan; the second also sets it to be italic and bold.

"Kyle says; {dialogue::cyan:Hello!}"
"Kyle says; {dialogue:ib:#00ffff:Hello!}"

Dialogue by object

You can also associate the styling with an object; this allows you to consistently colour-code the NPCs in your game. To do this, specify a parameter (as discussed here), and Quest will use its "dialogueStyle" to get the styling, which must be in the standard CSS format. In this example, Kyle's "dialogueColour" is set to magenta, Lara's to orange and italic. The text is then set to use the object set to "char" in the parameters.

w.Kyle.dialogueStyle= 'color:#ff00ff;'
w.Lara.dialogueStyle= 'color:orange;font-style:italic;'
msg("Kyle says; {dialogue:char:Hello!}", {char:w.Kyle})
msg("{dialogue:char:And hello to you!} replies Lara.", {char:w.Lara})

Exotic alphabets

Use the encode directive to translate text into another character set for messages in exotic languages. The directive requires two hexadecimal numbers, the first unicode character for upper case and lower case letters. You need a continuous block of 26 unicode characters for each set (or use the same for both upper and lower case).

Some examples:

Some text in Greek: {encode:391:3AC:The quick brown fox jumped over the lazy dog}.
Some text in Cyrillic: {encode:402:431:The quick brown fox jumped over the lazy dog}.
Some text in Armenian {encode:531:561:The quick brown fox jumped over the lazy dog}.
Some text in Devanagari: {encode:904:904:The quick brown fox jumped over the lazy dog}.
Some text in Thai {encode:E01:E01:The quick brown fox jumped over the lazy dog}.
Some text in Tibetan {encode:F20:F20:The quick brown fox jumped over the lazy dog}.
Some text in Khmer {encode:1780:1780:The quick brown fox jumped over the lazy dog}.
Some text in Javan {encode:A985:A985:The quick brown fox jumped over the lazy dog}.
Some text in Nko {encode:7C1:7C1:The quick brown fox jumped over the lazy dog}.

Please use responsibly; these character sets are a part of some people's culture.

Command

The command directive (or just cmd) will add a hyperlink; when clicked it will pass the command to the parser.

{cmd:get boots}
{cmd:drop hat:drop the hat}

You can use exit and page as synonyms, to ease conversion from Quest 5.

Link

You can link to other web pages with the link directive. The first parameter is the text that will appear on the page, the second is the address. Note that the page will open in a new tab, so the user will not lose their game if she clicks on it!

Learn more about Quest 6 {link:here:https://github.com/ThePix/QuestJS/wiki}.

If you link to a file in your game, I suggest putting the file in either the game folder or another, dedicated folder. The Text Adentures web site can occasionally get confused about which is the primary HTML file; if index.html is the only one in the top directory it should know that is the one.

An example of this is described for the HINT command here.

Images

The img directive can be used to include an image. By default, this should be in the images folder (settings/images, unless you have changed it), however, if the filename has a forward slash, Quest will assume you have included the path yourself. You can optionally include a title (as in the example below) and "alt" text (not included in the example).

{img:box.png:An image of a box}

Popup

You can have a link in your text that will toggle a box of text. This could be used to offer a kind of glossary - click on a term to see a definition. The popup directive has two parts, the first being the link text and the second being the text to display.

There is a sizeable {popup:desert:A desert is a large dry area.} to the west.