Web styling with Bisquixe for new Inform authors (who don't know CSS or web stuff)

[kamineko (Drew Cook)]

New Inform authors: are you planning to enter Spring Thing? Have you made your website yet?

It was nearly two years ago today. I had waited until the last minute to make a website for my game. The documentation made it sound so easy! But files were out of date, the images weren’t displaying, and I had different ideas about the layout/font/colors.

I was in a panic!

"release along with an interpreter" for future generations + question

Preface I am attempting to do something, and it hasn’t gone well so far. I think that there must be many philosophical and technical reasons why that might be (including my own lack of understanding), but I probably don’t know enough to comprehend such things. I just want to have my game ready for Spring Thing, and the submission deadline for that is Sunday. So if someone says, “oh, that’s the frob, it just doesn’t work with fram, you need to update the schlam before you can guncho the fweep,”…

If you, like me, don’t understand CSS or HTML at all but want to have a basic, styled website, don’t panic! This thread is for you. It’s going to involve some fiddling with files and folders, but don’t worry! We can get through this.

(a lot of this content simplified/extracted from this excellent thread by B.J. Best).

NOTE: Our styling only appears in websites. It can’t be viewed within the IDE.

---

getting started

---

These are Windows-specific instructions, but hopefully Mac or Linux users will be able to use them, too.

1. Let’s grab Mathbrush’s “Bisquixe”. It’s located here.
2. First, download “bisquixe.zip”. That contains an interpreter (software required to play Inform games).
3. Next, get the extension for your compiler version (this is not the same as the version installed on your computer!). Not sure about this? Have a look at the title banner for your game. For instance:

Marbles, D, and the Sinister Spotlight
A new What-Do-I-Do-Now story by Drew Cook
Release 0 / Serial number 250327 / Inform 7 v10.1.2 / D

See that stuff at lower left? “Inform 7 v10.1.2 / D”? That’s the compiler information.

• If your game has a v10.1.2 compiler, download “Simple.Multimedia.Effects.for.v10.i7x”.
• Otherwise, download “Simple.Multimedia.Effects.i7x”

4. Let’s get everything in the right place. You might want to make a special “staging area” folder in your projects directory, just so you have a place to keep everything straight. Starting with “bisquixe.zip”, unzip it. Note that Windows will add a “bonus” folder by default. What you are looking for is a folder called “bisquixe” that contains files. No folders within folders. Something like this, in other words:
   

   

5. This might take a little digging. First, copy your new folder. We need to place a copy where Inform expects to look for it. In newer installations, this is usually (in Windows that’s …\Documents\Inform\Templates. Just drop the folder in the templates directory! Again, the folder, not the zip file. Hang on to that zip, though, just in case.

6. Next, the extension. Start by extracting the zip for “Simple Multimedia Effects” either version. This time, we just want the file inside. Once it’s extracted, you can install it from within the IDE. Just click “file>install extension” from the top-left drop-down.

7. Browse to the newly-unzipped file. That’s it! Now, we add it to our project. Just paste one of these near the top of your project:

• for v10: include simple multimedia effects for v10 by mathbrush.
• otherwise: include simple multimedia effects by mathbrush

Still with me? Ok. Let’s add some styling to our website.
(continued)

[kamineko (Drew Cook)]

CSS is a technolgy and standard for styling content. One problem I had (see above post) is that it’s hard for a beginner to tell what entries do what. The approach in this thread uses CSS, but instead of wrestling with two separate files, we can zero in on just the settings we need.

---

Basic Styling with Bisquixe

---

Bisquixe changes styling during action processing. That means we can change a font color after jumping: for instace. Since we’re talking about a whole game right now, we’ll set everything when play begins.

1. In terms of organization, I recommend having multiple rules, one for each type of setting. That way, we can keep track of what we’re doing and edit/troubleshoot with less fuss. Here’s a start:

first when play begins:
	follow the font download rule;
	follow the buffer window rule;
	follow the play rule;
	follow the grid window rule;
	follow the input rule;

Note that I chose these names myself. You can call them whatever you want! They can serve as a kind of checklist. We can look at them one at a time.

2. follow the font download rule:

• You can customize your project with Google fonts. Like the other settings in this thread, changing fonts is not required. But it isn’t so hard! Have a look here. For the simple styling we’re doing here, you’ll need two: one for the main window (called the .BufferWindow) and one for the status line (called .GridWindow).
  • If you find some fonts you like, you’ll need a name you can use to refer to them. On the fonts website, add the fonts you want to your shopping bag. Just click the “get font” button at upper right.
  • Once you have some items bagged, click the bag icon at top right. That will open your bag contents. Click the “get embed code” button (pictured).
    
    
  • OK, there’s a lot of text here. We don’t need to understand it all! We’re just looking for the name Google uses for the font under the hood. These come from the topmost Embed code in the <head> of your html section of the page. Here’s the format we’re looking for (two examples):
    family=Open+Sans
family=Roboto
  • Note that there are no spaces! Spaces in font names are filled with the “+” symbol.
  • Suggestion for finding what you’re looking for: do a “find” (ctrl-F in Windows) for family=
  • Don’t be confused by all of the extra information about italics, etc. You just need the name formatted as above.
• In our code, we can download these fonts to our project:

this is the font download rule:
	import-google-fonts "Open+Sans&family=Roboto+Mono";

• All fonts are listed on one line, separated by the & symbol.
• You may have noted that one font is prefaced with family= and one isn’t. The first one is assumed or built in, so we only need to add it for subsequent added fonts.
• That’s it! Provided we have no typos, our fonts are available for use.

---

the buffer window (.BufferWindow)

---

The BufferWindow is the area that contains gameplay: printed output, input. We can use this area to configure colors and fonts for gameplay. We’ll need some colors! I recommend a hex color picker. There are a lot of them out there. This is the one I use. The goal is to get hexadecimal codes for our colors of choice. This sounds scary, but a color picker will automatically give you one for the colors you pick. Example:

The code at bottom, #2596BE, is a hex code for the color above it.

• At minimum, I suggest a background color for the window and a font color. That will look like this. We can take those (and our font, too) and roll them into the rule we’re working on.

this is the initial buffer window rule:
	css-set-fast ".BufferWindow; font-family; Open Sans, sans-serif";
	css-set-fast ".BufferWindow; background; #020213";
	css-set-fast ".BufferWindow; color; #dadaf6";

Some notes:

• See the “sans-serif” designation after Open Sans? This is a “fallback” setting. If the game can’t find our font, it will try to use whatever sans-serif font it can find. A best practice.
• ```css-set-fast`` is the definition we use to configure css items (like colors) in our game. It really is fast! We can change these settings mid-game if we like.
• Note that “color” refers to font color, not window color!
• Consider verifying that your color combination is accessible. Just web search “accessibility contrast checker” and provide your color codes.

What else can we do with the .BufferWindow? We probably want to add a small amount of space left over on the sides (optional), just to avoid letters pushing against the edge. B.J. Best recommended 20px (20 pixels) and that looks like a good number to me.

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

Experiment with this number a bit if you like!

What else? Font size. I believe most web templates start at 14, but I prefer 15 personally.

	css-set-fast ".BufferWindow; font-size; 15px";

Finally: the scrollbar! I like to use the colors I’ve already downloaded. In this example below, I use the window color first and the font color second (the scrollbar is configured with one line of code).

	css-set-fast ".BufferWindow; scrollbar-color; #dadaf6 #020213";

OK! The further we go, the less explanation we need, because we’ll be applying what we’ve learned. Next up: the status bar (.GridWindow).

[kamineko (Drew Cook)]

The status bar (.GridWindow)

---

Moving along: we won’t be covering a lot of new ground here. Colors and fonts:

this is the grid window rule:
	css-set-fast ".GridWindow; font-family; Roboto Mono, monospace";
	css-set-fast ".GridWindow; background; #dadaf6";
	css-set-fast ".GridWindow; color; #020213";
	css-set-fast ".GridWindow; font-size; 15px";

It’s customary to use monospace fonts for the .GridWindow.

---

Input

---

This one is surprisingly elaborate. That’s because what most of us (me, anyway) would consider “input” is more than one thing, and we need to configure them both. One important thing to understand is the input field is its own separate thing. It has its own background and fonts. Unless you’re trying to do something dramatic, this is a good way to begin:

this is the initial input rule:
	css-set-fast ".Input; background; transparent";

In other words, we’re going to tell the input background to look like the window behind it. This is what we are used to seeing in nearly every parser game out there. Next, font and color. Stick with me, this gets a little weird.

	css-set-fast ".Input; color; #dadaf6";
	css-set-fast ".Style_input; color; #dadaf6";

One of these dictates the cursor color, while the other dictates the color of the text as it is typed in. You need both, in other words. I usually double down on size, too:

	css-set-fast ".Input; font-size; 16px";
	css-set-fast ".BufferWindow .Input; font-weight; bold";
	css-set-fast ".BufferWindow .Input; font-size; 16px";

Note that I’m using 16px here instead of 15px. That’s because iOS Safari (iPhones) will zoom in on the input field if it is set to less than 16. This creates a side-scrolling bar and makes the interface genuinely unpleasant. In my opinion! I always set input to 16 px.

---

The play area

---

Our last bit of simple styling involves the play area. What’s that? The play area is whatever lies outside of the main game area (.BufferWindow and .GridArea). It isn’t visible by default. The screen is covered by game and a left frame with cover art. Let’s imagine that you don’t want that content. In that case, you can unleash the play area. First, we have to get rid of the default website’s built-in links and image.

this is the play rule:
	css-set-fast ".coverimage; display; none";
	css-set-fast ".links; display; none";

OK! Now we have the whole play area for ourselves. How much space should it occupy? A common idea is 20% of window size on each side of the game area. That looks like this:

	css-set-fast "#gameport; left; 21%";
	css-set-fast "#gameport; right; 19%";

These numbers reflect the amount of real estate occupied. It scales according to window size. As always, experiment if you like! We can finish things off with a background color.
css-set-fast ".play; background; #4E4E72";
What else? There’s the “more” prompt at the bottom right.

this is the more rule:
	css-set-fast ".MorePrompt; font-weight; bold";
	css-set-fast ".MorePrompt; background; #dadaf6";
	css-set-fast ".MorePrompt; color; #020213";
	css-set-fast ".MorePrompt; opacity; .85";

Note that we can set our own fonts, and font sizes. That opacity is just what it sounds like. By default a bit of play text is visible underneath the prompt.

OK, this leave us with a window that looks like this:

Whew! Save your code so you can copy/paste it anywhere!

We aren’t quite done yet, though the next two posts are optional: mobile styling and… images!

[kamineko (Drew Cook)]

mobile styling

---

Mobile play via browser is a different matter. There is less screen to work with, and that has a cascading effect. Our gameport setting above will take up too much screen. We might want different margins or buffers.

You need a way to figure out whether the player is using a mobile device or not. If we were using full CSS, we could add entries specific to device screen dimensions. But we aren’t! Chances are, if you know how to deal with that, you don’t need this guide.

My method is to ask at the beginning of play after I’ve already set CSS for general use. Then, I can change what I need to (it’s fast, remember? we can make changes on the fly).

We’re just walking back some of our settings. I’ve also added a truth state (mobile) so that I can keep track of the setting.

let mobile be a truth state that varies;

after jumping:
	now mobile is true;
	css-set-fast "#gameport; left; 0%";
	css-set-fast "#gameport; right; 0%";
	css-set-fast "#gameport; top; 0%";
	css-set-fast "#gameport; bottom; 0%";
	css-set-fast "#gameport; width; 100vw";
	css-set-fast "#gameport; height; 100vh";
	css-set-fast ".BufferWindow; padding; 10px";	

Essentially, we can make these changes at any time with a rule. Note that “vw” and “vh” mean “viewable width” and “viewable height” respectively.

As a reminder, any input under 16px will cause some zooming effects with iPhones. If you have a smaller font configured, you probably want to add a separate line for a moble font setting. This isn’t required, of course. Experiment with viewing on mobile and see what you think.

---

images

---

Don’t get overwhelmed here, OK? This can seem like a lot. You may have already discovered that following the release process in the documentation will yield up a website that contains no images. Yikes! Well, let’s see what we can do about that!

1. Set up a folder as a staging area where you can work on this. It doesn’t matter where, but you’ll want to keep everything in one place.
2. Put that “bisquixe.zip” file you downloaded a long time ago into your staging folder.
3. Find the “standard” website template. On my Windows installation, it’s here: C:\Program Files\Inform\Internal\Templates.
4. Make a ZIP file called “Standard” and put the Standard folder in it. Put that ZIP file in your staging area.
5. Download “ifsitegen.py” and put it in the staging area, too.
6. Whew! OK. Go ahead and release your project within your Inform IDE.
7. Grab the GBLORB file. You don’t need anything else; none of the web stuff. Paste it in your staging area.
8. Your staging area should look like this (or something like it):
   
   
9. One last thing. Python. You’ll need Python. Get that installed.
10. OK! Just one more push to the summit! Get a terminal open. On Windows, you can just right-click on any empty space and select “open in terminal.” From here, you should be able to use this as a template:

python ifsitegen.py -w standard.zip -i bisquixe.zip --title="Marbles, D, and the Sinister Spotlight" --author="Drew Cook" "marbles, d, and the sinister sp.gblorb"

recopied as a quote for readability

python ifsitegen.py -w standard.zip -i bisquixe.zip --title=“Marbles, D, and the Sinister Spotlight” --author=“Drew Cook” “marbles, d, and the sinister sp.gblorb”

-w points to Inform’s built-in web template “standard.zip” and - i points to the “bisquixe.zip” interpreter that we’ve used to perform our web styling. You can look at all of the switches by typing just python ifsitegen.py by itself.

Note that the script expects quotation marks around anything with spaces. Ideally, a success message will follow:

Glulx file (Blorb): marbles, d, and the sinister sp.gblorb
Interpreter: Quixe for Inform 7 (v. 2.2.2)
Website: standard.zip
Wrote playable game to: Release

A new “release” folder should have appeared in our staging area. Let’s check it out.

The index.html should present our website, fully styled, with images. We did it! You may want to experiment a bit over at itch.io, especially if you want to see how everything looks on mobile. You’ll need everything in a zip file. Create a new one, then copy the following into it:

• cover.jpg
• index.html
• styles.css
• interpreter directory

Head over to itch.io, put it in a draft project, and see how everything looks! Sometimes things take a bit of tweaking.

---

Hopefully this helps someone get their game out on time!

I may do a follow-up reply on handling images sizes, too.

Bisquixe can do a lot more than this, of course, but this is a pretty good start. Things have come a long way from my first Spring Thing, that’s for sure!

[kamineko (Drew Cook)]

Addendum: image sizing and scaling.

---

If this is your first project, you may have also discovered that your images seem too large for your IDE or a local interpreter. You fix them, but they look rather terrible and grainy in your web project. Or a combination of both.

Some interpreters scale images well, and some don’t. I hear Spatterlight handles it well. Winglulxe does, too. Interpreters that use CSS (Parchment, Lectrote/Quixe) can be configured to use it.

Does that help you, the author? Not right out of the gate, no. The last thing you want to do is provide lengthy instructions to players regarding configurations and interpreter choices. Players expect for things to just work, and why shouldn’t they in 2025? We can’t put the responsibility on them.

Let’s think about image sizes for local interpreters, first. Unless you took some pictures with a very old camera, you will want to resize them. Keep your originals, though! I use MS Paint, but any tool that will let you do resizes based on pixels will do.

For a image that is wider than it is tall, I suggest a maximum width of 720 pixels.
For an image that is taller than it is wide, I suggest a maximum height of 700 pixels.

These should scale, that is, adjust the other dimension automatically.

Keeping these names separate from our original names is worthwhile. I usually just append 720 to the name. fish 720.jpg for instance. For illustrative purposes, I’ll put our resize and the original in a single project. Here’s the code, and here’s the screenshot:

lab is a room.

figure couch is the file "fish.jpg".
figure lowcouch is the file "fish 720.jpg"

instead of jumping:
	display figure couch;
	display figure lowcouch;

Alright, we have some images that look OK. But what about the quality of our images? We have fancy, high-resolution images we’d like to show off!

We can handle that in-browser using bisquixe. Here’s a tweak to our existing code. First, let’s set up something easy to remember that we can use and re-use.

this is the wide images rule:
	css-set-fast ".BufferLine img.ImageInlineCenter; width; 100% !important";
	css-set-fast ".BufferLine img.ImageInlineCenter; height; auto !important";

this is the tall images rule:
	css-set-fast ".BufferLine img.ImageInlineCenter; width; auto !important";
	css-set-fast ".BufferLine img.ImageInlineCenter; height; 75vh !important";

Note that the wide images rule is specifically for layouts that do not have the extra frames or links. If you have chosen a design with frames, you will likely need to tweak your percentage.

These rules establish a way for telling the browser how to scale our images. Wide images will scale one way, tall images another. For tall images, the tall images rule will set height to 75% of viewable height, and width will scale based on that. Wide images similarly scale based on width.

We might have both types of image in our game!

This being so, we tell the game what type of image we are dealing with. Let’s scale our large image in bisquixe:

instead of jumping:
	follow the wide images rule;
	display figure couch;

There! We have a scaled image. This one is 2k pixels wide, but looks fine in a small window:

But wait; there’s a problem, potentially. These large images won’t look good in a local interpreter program (at least, not in some of them)! What to do? This was recently discussed elsewhere. One option is to include both resolutions in your project. We’ve already done that in our sample code, but we haven’t told our project when to print what. Fortunately, this can be done automatically. Let’s add this bit of code:

To decide whether bisquixe is active:
	(-(glk_gestalt(5376, 0) )-)

OK, now we can use the condition if bisquixe is active in our code. Let’s create a simple definition that we can use in our rules:

to show the couch picture:
	if bisquixe is active:
		follow the wide images rule;
		display figure couch;
	otherwise:
		display figure lowcouch;

There! If bisquixe is running (in a browser), the large image will display. Otherwise, the lower resolution one will.

instead of jumping:
	show the couch picture;

Is there a downside? Yes, one thing to consider is the overall size of the project. Since this approach effectively doubles the number of images in-project, you will want to be vigilant about file sizes. Using jpg files instead of png is a good start. You may also want to consider maximum resolutions for your larger files. A lot depends on the number you have in your project. Doubling the size of the low resolution ones (1440 wide or 1400 high) is one idea. Experiment to find the sweet spot.

It’s always possible to cut size by maintaining versions with just the files needed, but that can quickly become unwanted extra work.

I think that’s all I have right now! Perhaps I will have something new to share next Spring Thing. Good luck to all new authors!

---

other miscellany

---

Did you know that by default, Bisquixe does not honor white space (spaces, etc) after line breaks? Preserve your spacing with

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