Image scaling
We can add scaling support for images in Bisquixe. If we want to assign seettings at the global level, i.e., applying to all images. We do so by specifying the width properties for the img element.
This works the same way, whether we are using the ifsetgen.py or Bisquixe’s own add-image phrasing.
when play begins:
css-set-fast "img; height; auto !important";
css-set-fast "img; width; 45% !important";
The !important designation is required if we are to override the set behavior of printing all images at native size.
There is a bit of an art to this. Ideally, the player can see the whole image at a time. For wide images that aren’t very wide, it will usually be enough to specify width; 100% !important. However, with taller images, it might be better to scale back the width so that the entire image displays.
Styling img applies to every image on-screen or in the scroll buffer. If we have multiple images with varied dimensions, they will all be scaled identically. One solution—should this be a problem—is to clear the screen before displaying a given image. I employed this tactic in the post-game gallery for Marbles, D, and the Sinister Spotlight.
A benefit to using the add-image technique native to Bisquixe is that we can specify image size per individual image. This requires that we designate the specific image file. The format is more or like this:
css-set-fast "img[src="Figures/mMatisse.jpg"]; width; 25% !important";
css-set-fast "img[src="Figures/mMatisse.jpg"]; height; auto !important";
There’s a problem, though, isn’t there? Inform reserves brackets and quotation marks for specific use. Since css-set-fast is sending text to html, we should format the string like we would to print any other string.
We can send quotation marks via the apostrophe character ['] and brackets via open bracket and close bracket.
Here’s the string we’ll use.
css-set-fast "img[bracket]src='Figures/mMatisse.jpg'[close bracket]; width; 25% !important";
css-set-fast "img[bracket]src='Figures/mMatisse.jpg'[close bracket]; height; auto !important";
Note that this is not fully equal to an inline solution. Every time this image prints, it will print at these dimensions until we specify new ones. In most cases, though, that will be all that we require.
These CSS settings apply only to our web release. Standalone interpreters will handle things as they were written to handle them.
Parchment support for image scaling is coming soon. In the meantime, authors releasing games with Parchment can add a general setting for image scaling directly into the CSS (glkote.css), should they prefer it for sound support or for any other reason:
img {
width: 35% !important;
height: auto !important;
}