An author's reference for Bisquixe, a tool for adding audiovisual content to Inform projects (up: final (?) comments on Cloak of Darkness)

Authoring Inform 7
9

Other frequently specified content in web-based Inform games

There are still other elements, classes, and properties that are specified in a styled web game, although they do not receive the same attention. Authors will typically set them once and forget about them.

classes and pseudo-classes

.links

The default web template displays links on the left-hand side of the screen. We can configure these however we like, using properties we have already discussed.

	css-set-fast ".links; font-size; 45px";

We can even use the display property to omit them altogether.

	css-set-fast ".links; display; none";

a:

While the above section specifies the .links class, that class does not actually configure links within our game. To do that, we use assign properties to a:link. There are in fact multiple pseudo-classes related to links that websites use. a:hover, for instance, is commonly seen in the wild, but it has no apparent effect within our Bisquixe game. Similarly, a:visited applies to links directed at the outside world (the interpreter credit, for instance, or the default links at the left side of the .play window, but never applies to links with the #gameport.

In practice, authors will specify a:link commonly, a:visited rarely, and seldom any other link-related pseudo-class.

	css-set-fast "a:link; color; yellow";
	css-set-fast "a:link; font-family; cursive";

Our web page only displays one type of link (a). When links appear in multiple parts of a web page, care must be taken to choose a color that will make sense everywhere.

.interpretercredit

The .interpretercredit class displays at the bottom-left of the default website. It can be styled like any other text. However, since it is a link, the most common properties will likely already be assigned via a:link. It moreover inherits properties from .play.

	css-set-fast ".interpretercredit; background; green"

Note that it would be poor form to forego crediting the interpreter entirely. At bare minimum, it should be mentioned along with installed extensions in response to a VERSION command in-game. This can be accomplished via a new rule. For example:

report requesting the story file version:
	say "Quixe interpreter by Andrew Plotkin
[line break] - (http://eblong.com/zarf/glulx/quixe/)"

properties

padding

The padding property can used to specify space between an element’s contents and its border. As a commonly-applicable case, added spacing between text and its container’s edge can make content more readable. New authors may be surprised at the number of ways one can specify padding (as the above link will attest), but in simplicity’s name this reference will provide only one example. For a padding property with four specified values (6px 10px 6px 2px), the values are read clockwise, starting at the top:

  • 6px: padding at the top border of the element
  • 10px: padding at the right edge of the element
  • 6px: padding at the bottom edge of the element
  • 2px: padding at the left edge of the element

In the below example, 20px is specified at left and right, and 10px is specified for top and bottom.

	css-set-fast ".BufferWindow; padding; 10px 20px 10px 20px";

left, right, top, bottom

These properties specify an offset between a container and its contents. The default template uses left and right properties to position the #gameport within the .play area containing it. Specifying position creates a boundary area that can hold the links customarily printed at the left side of the template’s window. Even if we choose to remove those links (I always do), a proportional boundary prevents the readable area from becoming uncomfortably wide on widescreen displays.

The default template setting is 18% for both left and right properties on non-mobile displays. Values of 0% create a one-to-one overlap between .play and #gameport. top and bottom default to 0%.

	css-set-fast "#gameport; left; 30%";
	css-set-fast "#gameport; top; 5%";

white-space

The Bisquixe interpreter strips “extra” white space (space characters) from web games by default, and many authors will wish to leave their custom spacing intact. We can adjust this behavior at the .BufferLine. This class has not been mentioned before; it is the smallest unit of output, and the .BufferWindow contains them. Since BufferLine inherits properties from .BufferWindow already, it is seldom customized.

In cases where finer control is needed, we turn to it, setting a value for the white-space property.

	css-set-fast ".BufferLine; white-space; pre-wrap";
3 Likes